在没有选择器的情况下创建 jQuery 插件的问题

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

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

它正在运行：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)