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

Issue with creating an jQuery plugin without selector

本文关键字：jQuery 插件 问题 创建 情况下 选择器      更新时间：2023-09-26

我正在开发一个不需要选择器的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));

在主要.js中，我有：

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

这将返回：

undefined
hi

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

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

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

在这种情况下，我会传递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)
相关文章：