jquery插件開發

3種開發方式

1.通過$.extend()來擴展jQuery

2.通過$.fn.pluginName向jQuery添加新的方法

3.通過$.widget()應用jQuery UI的部件工廠方式創建

第一種方式相對簡單，只是在jquery上加靜態方法，可擴展性不強，如：

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //Hello,Dude
$.sayHello('John'); //Hello,John

第三種方法比較高級和複雜，不常用。
第二種方法是最常用的，大多數插件都是使用這種方法開發的。

$.fn.pluginName開發插件

Demo（jquery.btnDecorator.js）:

插件js命名規則一般爲：jquery.pluginName.js

//';'防止前面引用的js代碼結束位置無';'而報錯
//閉包，避免變量污染全局命名空間
//引入全局變量window，document，節省到外層查詢的時間
;(function ($, window, document, undefined) {
    var Decorator = function (ele, opt) {
        this.$element = ele;
        //默認值
        var defaults = {
            width: 50,
            height: 30,
            bgColor: "#666666"
        };
        //繼承defaults,opt,第一個參數{}避免opt修改defaults
        this.options = $.extend({}, defaults, opt);
    };
    //使用原型鏈，可擴展多個方法
    Decorator.prototype = {
        init: function () {
           this.$element.width(this.options.width);
           this.$element.height(this.options.height);
           this.$element.css({"background-color": this.options.bgColor});
        }
    };
    //定義插件
    $.fn.btnDecorator = function(options) {
        //this指代引用插件的元素
        var decorator = new Decorator(this, options);
        //調用其方法
        return decorator.init();
    };

})(jQuery, window, document);

使用插件

$(function () {
    $('#btn1').btnDecorator({
        bgColor: '#ff0000'
    });
    $('#btn2').btnDecorator({
        width: 80,
        height: 40,
        bgColor: '#00ff00'
    });
    $('#btn3').btnDecorator({
        width: 60
    });
});

效果：

其他

最後，可以用webpack打包多個插件，還可以壓縮和混淆代碼。




參考資料：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html