Question

我只是想知道以下方法是否适合构建jQuery插件，如果不是最佳实践：

$.fn.loginsys = function(options) {

    var opts = $.extend({}, $.fn.loginsys.defaults, options);

    return this.each(function() {

        /* Code To Be Executed */

    });

}

$.fn.loginsys.defaults = {

    /* Some Options */

}

Answer 1

(function( $ ) {
  $.fn.myPlugin = function() {

    // Do your awesome plugin stuff here

  };
})( jQuery );

此处有更多信息：http://docs.jquery.com/Plugins/Authoring

Answer 2

除了最佳实践和所有内容之外，是否有理由想要公开默认值？

如果您希望它们可以从外部进行编辑，您可能希望为此公开一个setter并将它们保存在$ .fn.loginsys = function闭包内，以确保它们不能摆弄以某种方式阻止你的插件工作。

例如，请参阅jQuery的ajaxSettings（）。

Answer 3

我认为你只是错过了包装

(function($) {

    // plugin code here

})(jQuery);

但是，有很多插件模式;这里有bunch of templates可供下载。

Answer 4

我会从jquery教程插件中建议这个（但有几种方法）：

(function($) 
{   
    var globalSettings=
    {
        width:400,
        height:400
    };

    var methods =
    {
        init : function(options)
        {
            return this.each(function() 
            {
                var $this=$(this);
                var settings=$.extend({}, globalSettings, options);

                //your code

            });
        },
        destroy : function()
        {
            return this.each(function()
            {

            });
        },
        option : function(option, value)
        {

            if(value!=null && value!=undefined)
            {
                return this.each(function(){
                    var $this=$(this);
                    var curr_setts=$this.data('settings');
                    curr_setts[option]=value;
                    $this.data('settings',curr_setts);
                });
            }
            else
            {
                var $this=$(this);
                var curr_setts=$this.data('settings');
                return curr_setts[option];
            }
        }
    };

    $.fn.siter=function(method, options) 
    {
        if(methods[method])
        {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if(typeof method === 'object' || !method)
        {
            return methods.init.apply(this, arguments);
        }
        else
        {
            $.error('Method ' + method + ' does not exist on jQuery');
        }
    };

})(jQuery);

Answer 5

有几个关于如何编写jQuery插件的好教程，比如http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/。只是谷歌一点。另外，看看如何构建其他jQuery插件。这就是你能学到的最多的东西。

这种方式是构建插件的好方法吗？

5 个答案: