基于jquery插件模板的插件

在我的jQuery课程中，我在这里学习了jQuery插件模板

我理解一些概念，比如为什么

；（使用函数（$，窗口，文档，未定义）

，以及如何创建默认值等

var pluginName = "defaultPluginName",
                defaults = {
                propertyName: "value"
        };

然而，老师在这个模板上给我们的关于创建一个插件来突出显示div元素的例子超出了我的理解，我们没有让演示代码稍后理解它

这里的任何人都可以创建一个插件，根据模板突出显示div元素，并一步一步地解释相同的内容，比如如何使用默认值、插件构造和创建实际的插件

---

提前感谢。

jQuery插件模板做了很多事情：

样板文件将

$

符号设置为jQuery以避免插件冲突（例如，Prototype也像jQuery一样使用

$

，那么如何确保插件使用jQuery而不是其他东西呢？将jQuery传递到一个类似的文件中）：

但这并不能解决我们所有的问题，因为ECMAScript 3中的

未定义

可能不是

未定义

（也就是说，它是可变的，可以被其他脚本修改），所以我们添加了另一个参数：

(function( $, undefined ) {
  $.fn.yourPlugin = function() {
    // Do stuff!
  };
})( jQuery ); // note that we're not passing any value to make it truly undefined

样板还将

窗口

和

文档

作为局部变量传递，以便更快地解析它们，它还添加了一些代码，以便插件可以像其他jQuery对象一样链接起来。现在，我们以样板代码结束：

;(function ( $, window, document, undefined ) {

        var pluginName = "highlighter";

        var defaults = {
        };

        function Plugin ( element, options ) {
                this.element = element;
                this.settings = $.extend( {}, defaults, options );
                this._defaults = defaults;
                this._name = pluginName;
                this.init();
        }

        $.extend(Plugin.prototype, {
                init: function () {
                }
        });

        // A really lightweight plugin wrapper around the constructor,
        // preventing against multiple instantiations
        $.fn[ pluginName ] = function ( options ) {
                this.each(function() {
                        if ( !$.data( this, "plugin_" + pluginName ) ) {
                                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                        }
                });

                // chain jQuery functions
                return this;
        };

})( jQuery, window, document );

现在，让我们探讨如何突出显示div并更改字体。首先，您可以使用一些属性扩展默认设置：

// Here we create the defaults:
var defaults = {
    bgColor: 'yellow',
    font: 'normal small-caps normal 16px/1.4 Georgia'
};

在插件包装器中，当您的插件被实例化时，它还调用

init（）

函数：

// "options" parameter may contain the user's values to override defaults
$.fn[ pluginName ] = function ( options ) {
    // for each selected element
    this.each(function() {
        // ...
        // When "new Plugin()" -> init() is called in the function, see "function Plugin()"
        $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
    }
}

样板还做了另一件重要的事情：它将用户的设置存储在

this.settings

中，而不是

this.defaults

，这样插件的默认设置就不会被用户的自定义设置覆盖

new Plugin（）

调用

init（）

函数，在这里我们可以发挥我们的魔力。要访问默认或自定义设置，我们只需访问

此设置。设置

：

init: function () {
    // Set the highlight and font.
    $(this.element).css({ 
        'background-color': this.settings.bgColor,
        'font': this.settings.font
    });
}

---

查看fiddle。

突出显示是什么意思？像背景色？或者像jQuery UI的动画突出显示？是的，插件允许我只指定背景色和自定义字体。如果没有，默认值可以在插件中指定。这里有一个示例fiddle：基本上，默认属性在构造函数中设置在

此处。_默认值=默认值

。但是，设置对象在

this.settings=$.extend（{}，默认值，选项）扩展默认对象；

这样您就不会覆盖其他元素的默认设置。在初始化时，您可以使用jQuery的

css

功能应用这些设置。谢谢@arao6，如果我遇到任何问题，我会检查并通知您。谢谢！没问题！在我的评论中展开并给出答案。您应该自愿为jQuery编写文档。Fantast解释得太夸张了！

init: function () {
    // Set the highlight and font.
    $(this.element).css({ 
        'background-color': this.settings.bgColor,
        'font': this.settings.font
    });
}