Question

在我的jQuery类中，我在这里了解了jquery插件模板https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/91b4eb05b18f3038a6f8a34c41435c4d2702c0d0/dist/jquery.boilerplate.js

我理解了一些概念，例如使用;(function ( $, window, document, undefined )的原因以及如何创建默认值等

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

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

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

提前谢谢。

Answer 1

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

样板文件将$符号设置为jQuery以避免插件冲突（例如Prototype也像jQuery一样使用$，那么如何确保你的插件使用jQuery而不是其他东西？你传递jQuery到这样的Immediately Invoked Function Expression）：

(function( $ ) {
  $.fn.yourPlugin = function() {
    // Do stuff!
  };
})( jQuery ); // pass jQuery so the $ is jQuery and not something else in the function

但是这并没有解决我们所有的问题，因为ECMAScript 3中的undefined可能不是undefined（即，它是可变的 - 它可以被其他脚本修改），所以我们添加另一个参数：

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

样板文件还将window和document作为局部变量传递，以便更快地解析它们，并且还添加了一些代码，以便插件可以像其他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()函数，我们可以在这里运用我们的魔力。要访问默认设置或自定义设置，我们只需访问this.settings：

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

查看小提琴here。

基于jquery插件模板的插件

1 个答案: