javascript - 扩展/覆盖 jQuery 对象文字方法 - 超出范围问题

Question

我编写 jQuery 插件的经验很少，使用 JavaScript 设计模式的经验更少，所以请耐心等待。

我正在编写的 jQuery 扩展中使用单例模式。这工作得很好，但是我希望能够扩展/覆盖我的单例对象的方法和属性。

为了实现此目的，我有一个主 var self = {} 对象，该对象在运行时将包含一个属性对象文字和一个方法对象文字。各自对象文字的各个属性和方法将被设置为默认值或选项参数(如果传入)。

这也有效，直到您传入尝试访问 self.properties 或 self.methods 的方法。由于 self 仅在单例对象中定义，而不是我要传入的对象文字，因此在传递任何内容之前都会引发 JavaScript 错误。

为了更好地理解这一点，下面我创建了一个完整的示例，它与我想要做的非常相似。

;(function ( $, window, document, undefined ) {
    $.extend({
        MyObject : function(options) {

            // enfore singleton pattern
            $.MyObject = function() {
                if(typeof $.MyObject != 'undefined') { // if an instance exists
                    console.log('$.MyObject is a singleton - original instance returned');
                    return $.MyObject; // return original instance
                }
                else return this; // else, return this instance
            };

            var self = {},
            defaults = {
                properties : {
                    prop : true,
                    foo : "bar"
                },
                methods : {
                    main : function() {
                        console.log(self.properties.foo); // console logs "bar"
                    }
                }
            };

            this.init = function(options) {
                self = $.extend({}, defaults, options); // set properties to defaults unless options were provided
                self.methods.main();
            };

            this.init(options);

            return this;
        }

    });

})( jQuery, window, document );

$(window).load(function() {
    $.MyObject({
        properties : {
            foo : "baz"
        },
        methods : {
            main : function() {
                if(self.properties.prop) { // Uncaught TypeError: Cannot read property 'prop' of undefined
                    console.log(self.properties.foo); // Uncaught TypeError: Cannot read property 'foo' of undefined
                }
            }
        }
    });
});

我可能把我想做的事情变得过于复杂了。此时，我认为可能有更好的方法来做到这一点。

有什么想法吗？

Answer 1

您可能想要深入扩展 init()。您还可以通过 main() 上的 call() 将当前选项作为“this”传递。

;(function ( $, window, document, undefined ) {
  $.extend({
    MyObject : function(options) {

      // ---------------
      // enforce singleton pattern
      // ---------------
      $.MyObject = function() {
        if (typeof $.MyObject === 'undefined') { return this; }
        console.log('$.MyObject is a singleton...');
        return $.MyObject;
      };
      // ---------------

      // ---------------
      // establish default options
      // ---------------
      var self = {};
      var defaults = {
        properties : {
          prop : true,
          foo : "bar"
        },
        methods : {
          main : function() { console.log( this.properties.foo ); }
        }
      };
      // ---------------

      // ---------------
      // Override default options and execute main() in the context
      // of our current options
      // ---------------
      this.init = function(options) {
        self = $.extend(true, {}, defaults, options);
        self.methods.main.call(self);
      };
      this.init(options);
      // ---------------

      return this;
    }
  });
})( jQuery, window, document );

$(window).load(function() {
  var options = {
    properties : {
      bar : "foo"
    },
    methods : {
      main : function() {
        if(this.properties.prop) { console.log(this.properties.bar); }
      }
    }
  };

  $.MyObject(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>