6

我正在开发一个不需要选择器的 jQuery 插件，所以我只是将它添加到全局 jQuery 命名空间。

我在插件的公共方法之间共享内部实例变量时遇到问题。例如，我希望能够从 .init 方法访问 $.MyPlugin.settings。

这是插件代码：

(function($) {
    $.MyPlugin = function(options) {

        var defaults = {
            username: '',
            password: ''
        }

        var plugin = this;

        plugin.settings = {};

        plugin.init = function() {
          plugin.settings = $.extend({}, defaults, options);
        }

        plugin.init();
  }

  $.MyPlugin.init = function(callback) {
    console.log(this.settings); // undefined
    callback();
  }


}(jQuery));

在 main.js 中，我有：

$(document).ready(function() {
  $.MyPlugin({
      username: 'myuser',
      password: 'mypass'
  });

  $.MyPlugin.init(function() {
      console.log('hi');
  });

这将返回：

undefined
hi
4

2 回答 2

9

您遇到的问题是数据在插件的每个实例中都不是持久的。这是默认行为，但您可以使用以下方法绕过它.data()：

(function ($) {
    $.MyPlugin = function (options) {

        var defaults = {
                username: '',
                password: ''
            },
            plugin = this,
            options = options || {};


        plugin.init = function () {
            var settings = $.extend({}, defaults, options);
            $.data(document, 'MyPlugin', settings);
        }

        plugin.init();

    }

    $.MyPlugin.init = function (callback) {
        console.log($.data(document, 'MyPlugin'));
        callback();
    }

}(jQuery));

这使用 jQuery 的函数将插件的设置存储在document元素上。.data()这不允许您的插件的多个实例具有单独的选项，尽管每次重新声明$.MyPlugin' 选项都会覆盖以前的选项。

我的回答是基于您希望在整个脚本中使用不同的公共方法并让它们都共享原始选项的假设。如果您只想调用该插件一次，那么 Robert's 的方向可能更正确。

它在这里工作：http: //jsfiddle.net/pPJYx/

于 2013-09-09T01:10:42.367 回答
2

在这种情况下，我会将init函数与选项一起传递，因此您最终会像这样初始化插件：

$(document).ready(function() {
  $.MyPlugin({
      username: 'myuser',
      password: 'mypass',
      init: function() {
          console.log('hi');
      }
  });

在插件中，您可以像这样调用init函数：

//set the 'this' to the plugin inside init
if (options.init) options.init.call(plugin)
于 2013-09-09T01:11:35.463 回答