编写jQuery插件的最短,最快捷的方法

时间:2013-03-05 10:29:50

标签: jquery jquery-templates

编写jQuery插件以获取所有jQuery函数,方法和可用属性的最短和最快的方法是什么,但要避免在大多数情况下存储在jquery.*-plugin.js文件中的此模式:

(function($){
    $.yourPluginName = function(el, radius, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("yourPluginName", base);

        base.init = function(){
            if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";

            base.radius = radius;

            base.options = $.extend({},$.yourPluginName.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };

        // Run initializer
        base.init();
    };

    $.yourPluginName.defaultOptions = {
        radius: "20px"
    };

    $.fn.yourPluginName = function(radius, options){
        return this.each(function(){
            (new $.yourPluginName(this, radius, options));

           // HAVE YOUR PLUGIN DO STUFF HERE


           // END DOING STUFF

        });
    };

})(jQuery);

我正在寻找一个快速的jQuery插件模式/模板,我可以在我的main.js文件中使用它来执行我的所有JavaScript逻辑和jQuery事务。

我想要做的是避免对我的某些自定义插件使用jquery.*-plugin.js文件,这些插件仅用于我网站的某些部分和部分。

1 个答案:

答案 0 :(得分:1)

这真的取决于你需要什么功能,但jQuery插件只是jQuery.prototype的一种方法(别名为jQuery.fn),所以你可以这样做:

$.fn.myPlugin = function () {
    // `this` refers to the jQuery instance. Put your logic in here.
};

然后你可以这样称呼它:

$(".some-selector").myPlugin();

这是working example