Question

我正在研究一个不需要选择器的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

Answer 1

您遇到的问题是数据在插件的每个实例中都不是持久的。这是默认行为，但您可以使用.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的选项都会覆盖以前的选项。

我的答案基于您希望在整个脚本中使用不同的公共方法并让它们共享原始选项的假设。如果你只想打电话给插件，那么罗伯特可能会更加朝着正确的方向发展。

这里有效：http://jsfiddle.net/pPJYx/

Answer 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)

创建没有选择器的jQuery插件的问题

2 个答案: