創建jq插件步驟

無意看了這篇《jQuery插件開發精品教程，讓你的jQuery提升一個臺階》文章，現在做一下總結。

一、jQuery插件的創建可以有三種方法

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

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

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

方法1太簡單，創建後通過$.myfunction()方式調用，不能對指定元素調用。

方法3相對於方法2太複雜。

方法2就是常用的創建jq插件的方法。可以對指定元素進行操作。例如$('#title').myfunction();

二、jQuery插件創建格式

$.fn.myfunction = function() {
    //在這裡面,this指的是用jQuery選中的元素
    //example :$('a'),則this=$('a')
    this.css('color', 'red');
}

如果想要支持鏈式調用只需return一下即可。

$.fn.myfunction = function() {
    //在這裡面,this指的是用jQuery選中的元素
    //example :$('a'),則this=$('a')
    return this.css('color', 'red');
}

三、讓插件接受參數，使用$.extend方法

$.fn.myPlugin = function(options) {
    var defaults = {//設置預設值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//這種方法會使第一個參數會被修改，為了保持變數defaults的值不變應該使用以下代碼
    //var settings = $.extend({},defaults, options);//在extend方法的第一個參數添加一個空對象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

四、面向對象的插件開發

為了以後代碼維護和可讀性我們可以進行面向對象的方法開發插件。

var Beautifier = function(ele, opt) {
    this.$element = ele,  //獲取當前選中的jq對象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定義Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier對象
$.fn.myPlugin = function(options) {
    //創建Beautifier的實體
    var beautifier = new Beautifier(this, options);
    //調用其方法
    return beautifier.beautify();
}