jQuery插件使用揭示原型模式

jQuery plugin using reveal prototype pattern

本文关键字：原型 模式 插件 jQuery      更新时间：2023-09-26

我正在使用揭示原型模式开发一个jQuery插件，我在实例化我的对象时遇到了一些麻烦。下面，插件的代码：

(function($) {
var GammadiaCalendar = function(elem, options) {
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
};
GammadiaCalendar.prototype = function() {
    var defaults = {
        message: 'Hello world!'
    },
    init = function() {
        this.config = $.extend({}, this.defaults, this.options);
        this.displayMessage();
        return this;
    },
    displayMessage = function() {
        alert(this.config.message);
    };
    return {
        displayMessage : displayMessage
    };

};
GammadiaCalendar.defaults = GammadiaCalendar.prototype.defaults;
$.fn.GammadiaCalendar = function(options) {
    return this.each(function() {
        new GammadiaCalendar(this, options).init();
    });
};
})(jQuery)

我得到 GammadiaCalendar 在实例化时未定义：

var gc = new GammadiaCalendar（'id'）;

问题是您已将原型设置为函数表达式，而不是立即调用的函数表达式。 您需要更改它：

GammadiaCalendar.prototype = (function() {
   // your code here
})(); // Execute it

此外，此行将永远不起作用：

GammadiaCalendar.defaults = GammadiaCalendar.prototype.defaults;

因为defaults永远不会返回到原型中。

揭示原型模式的整个结构不正确。 new GammadiaCalendar(this, options).init()使用的init函数是私有的，因此无法访问。因此，原型需要更改为如下所示的内容：

GammadiaCalendar.prototype = (function() {
  var defaults = {
     message: 'Hello world!'
  },
  init = function() {
    this.config = $.extend({}, this.defaults, this.options);
    this.displayMessage();
    return this;
  },
  displayMessage = function() {
    alert(this.config.message);
  };
  return {
    defaults: defaults,
    init: init,
    displayMessage : displayMessage
  };
})();

（但是，当然，通过这样做，你并没有真正从这种模式中获得任何东西，因为里面不再有真正的私有功能了）。

我认为这种模式没有任何意义，你可以这样做：

(function($) { //Because of this, everything here is "private" unless exposed anyway
    var defaults = {
            message: 'Hello world!'
    };
    function init() {
        this.config = $.extend({}, defaults, this.options);
        this.displayMessage();
        return this;
    }
    var GammadiaCalendar = function(elem, options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
    };
    GammadiaCalendar.prototype = {
        displayMessage: function() {
            alert(this.config.message);
        },
        constructor: GammadiaCalendar
    };

    GammadiaCalendar.defaults = defaults;
    $.fn.GammadiaCalendar = function(options) {
        return this.each(function() {
            var instance = new GammadiaCalendar(this, options);
            init.call(instance);
        });
    };
})(jQuery);

请注意，您不能在包含函数之外执行var gc = new GammadiaCalendar('id');，因为它没有公开

相关文章：