Javascript - 理解Requirejs模块文字和"这个"

时间:2014-03-29 05:50:20

标签: javascript module requirejs amd object-literal

我有一个requirejs模块,我定义没有依赖项,我从我以前使用的对象文字移植。我认为在返回工作时可以填写字面值,但它失去了对this的引用。我不断收到错误Cannot call method 'getHeight' of undefined我假设将在我的对象中为this的每个实例发生错误。

为什么这样做?因为回报的范围?这就是我所拥有的......

define(function() {
  return {
    // Photos
    photos: {
      // Get photos wrapper
      $photos: function(){
        return $('#photos');
      },
      setHeight: function() {
        var height = this.header.getHeight(); // Here is where I get my first error "Cannot call method 'getHeight' of undefined"
        return this.$photos().height($(window).height() - height);
      },
      setWidth: function() {
        var width = 0;
        $('#photos').find('img').each(function() {
          width += parseInt($(this).width());
        });
        return this.$photos().width(width);
      },
      init: function() {
        this.setHeight();
        this.setWidth();
      }
    },
    // Header
    header: {
      $header: function() {
        return $('header')
      },
      top: function() {
        var self = this;
        return parseInt(self.$header().css('margin-top'));
      },
      bottom: function() {
        var self = this;
        return parseInt(self.$header().css('margin-bottom'));
      },
      getHeight: function() {
        return this.$header().height() + (this.top() + this.bottom());
      }
    },
    // Padd the Body
    padBody: function() {
      var padding = this.header.getHeight();
      return $('.body').css('padding-top', padding);
    },
    loadImages: function() {
      var self = this;

      $("img[data-src]").unveil(200, function() {
        $(this).load(function() {
          $(this).removeClass('loading').addClass('loaded');
          self.photos.init();
        });
      });
    },
    init: function() {
      var self = this;

      // Fire everything
      this.padBody();
      this.loadImages();

      $(window).on('resize', function() {
        self.padBody();
        self.photos.init();
      });
    }
  }
});

1 个答案:

答案 0 :(得分:1)

在这种情况下'这个'是全局对象(严格模式下的窗口或null)。您应该使用构造函数(new ...)为对象函数创建自己的作用域(jsbin.com/dubuxonu/1/edit requirejs没有错误)

如果您不想要构造函数 - 将范围保存在变量中并使用它在正确的上下文中调用您的方法

   (function(){
       var moduleObject = {
         meth1: function(){},
         meth2: function(){ moduleObject.meth1() }
       } 
       return moduleObject;
    });

我在这里没有使用过这个'并直接说出我想调用方法的对象