快捷導(dǎo)航

推薦一款jQuery插件模板

更新時(shí)間：2015年01月09日 09:40:08 投稿：hebedich

這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡(jiǎn)單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧

我使用jQuery已經(jīng)有相當(dāng)長(zhǎng)的時(shí)間了，并且我會(huì)常常為它寫一些插件（plugin）。我嘗試過(guò)用不同的方式去寫，現(xiàn)在這個(gè)模板是我最喜歡的：

;(function($) {

  // multiple plugins can go here

  (function(pluginName) {

    var defaults = {

      color: 'black',

      testFor: function(div) {

        return true;

      }

    };

    $.fn[pluginName] = function(options) {

      options = $.extend(true, {}, defaults, options);

      return this.each(function() {

        var elem = this,

          $elem = $(elem);

        // heres the guts of the plugin

          if (options.testFor(elem)) {

            $elem.css({

              borderWidth: 1,

              borderStyle: 'solid',

              borderColor: options.color

            });

          }

      });

    };

    $.fn[pluginName].defaults = defaults;  

  })('borderize');

})(jQuery);

//下面是用法

$('div').borderize();

$('div').borderize({color: 'red'});

　　以下是我喜歡這種模板的原因

　　1. 你仍然可以訪問(wèn)里面的默認(rèn)選項(xiàng)，即便它被重寫了（簡(jiǎn)單地通過(guò)父屬性的訪問(wèn)）

　　2. 通過(guò)修改pluginName即可更改插件的名字。（這種方式對(duì)代碼壓縮也非常有利）

　　第#1點(diǎn)非常強(qiáng)大，比如說(shuō)我們希望復(fù)寫這個(gè)方法，但是仍然希望保留原來(lái)的方法，我們可以看下面的例子：

復(fù)制代碼代碼如下:

$('.borderize').borderize({

    testFor: function(elem) {

        var $elem = $(elem);

        if (elem.is('.inactive')) {

            return false;

        } else {

            // calling "parent" function

            return $.fn.borderize.defaults.testFor.apply(this, arguments);

        }

    }

});

We can even do this with regular properties like this

var someVarThatMayBeSet = false;

/* code ... */

$('.borderize').borderize({

    color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color

});