DIV CSS 佈局教程網

如何用jQuery封裝插件
編輯:JQuery特效代碼     

引子


現在網上關於js和jquery封裝的插件很多,我剛剛接觸前端的時候,就很敬佩那些自己寫插件的大牛們!因為是他們給網站開發更多的便利,很多網頁效果,網上很多現成的插件!那麼這些插件是如何寫的呢?首先是有扎實的js和jquery技術基礎,其次還有一些寫插件的方法和技巧。關於js和jquery的技術基礎,那是一個慢慢積累的過程。但是關於寫插件的一些注意和技巧,本文可以略微介紹一下,方便以後寫插件的時候用得到。

要說jQuery 最成功的地方,我認為是它的可擴展性吸引了眾多開發者為其開發插件,從而建立起了一個生態系統。這好比大公司們爭相做平台一樣,得平台者得天下。蘋果,微軟,谷歌等巨頭,都有各自的平台及生態圈。

學會使用jQuery並不難,因為它簡單易學,並且相信你接觸jQuery後肯定也使用或熟悉了不少其插件。如果要將能力上升一個台階,編寫一個屬於自己的插件是個不錯的選擇。

 

jquery插件開發模式


軟件開發過程中是需要一定的設計模式來指導開發的,有了模式,我們就能更好地組織我們的代碼,並且從這些前人總結出來的模式中學到很多好的實踐。

根據《jQuery高級編程》的描述,jquery插件一般有三種開發方式:

通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建

通常我們使用第二種方法來進行簡單插件開發,說簡單是相對於第三種方式。第三種方式是用來開發更高級jQuery部件的,該模式開發出來的部件帶有很多jQuery內建的特性,比如插件的狀態信息自動保存,各種關於插件的常用方法等,非常貼心,這裡不細說。

而第一種方式又太簡單,僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。所以我們調用通過$.extend()添加的函數時直接通過$符號調用($.myfunction())而不需要選中DOM元素($('#example').myfunction())。

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //調用
$.sayHello('test'); //帶參調用

但這種方式無法利用jQuery強大的選擇器帶來的便利,要處理DOM元素以及將插件更好地運用於所選擇的元素身上,還是需要使用第二種開發方式。你所見到或使用的插件也大多是通過此種方式開發。

 

 

插件開發


 

第二種插件開發方式一般是如下定義

$.fn.pluginName = function() {
    //your code here
}

插件開發,我們一般運用面向對象的思維方式
例如定義一個對象

var testObj= function(el, opt) {
    this.$element = el,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定義testObj的方法
testObj.prototype = {
    changecss: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}

$.extend({}, this.defaults, opt)有{}主要是為了創建一個新對象,保留對象的默認值。

$.fn.myPlugin = function(options) {
    //創建haorooms的實體
    var testIndividual= new testObj(this, options);
    //調用其方法
    return testIndividual.changecss();
}

調用這個插件直接如下就可以

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
})

 

上述開發方法的問題


 

上面的開發方法存在一個嚴重的問題,就是定義了一個全局的testObj,這樣對於插件的兼容等等各個方面都不好。萬一別的地方用到了testObj,那麼你的代碼就悲催了!現在我們把上面的代碼包裝起來,用一個自調用匿名函數(有時又叫塊級作用域或者私有作用域)包裹,就不會出現這個問題了!包括js插件的開發,也是一樣的,我們用一個自調用匿名函數把自己寫的代碼包裹起來,就可以了!包裹方法如下:

(function(){

})()

用上面的這個包裹起來,就可以了。
但是還有一個問題,當我們研究大牛的代碼的時候,前面經常看到有“;”,那是為了避免代碼合並等不必要的錯誤。
例如,我們隨便定義一個函數:

var testFunction=function(){

}
(function(){

})()

由於testFunction()這個函數後面沒有加分號,導致代碼出錯,為了避免這類情況的發生,通常這麼寫!

;(function(){

})()

基本上可以說是完美了。但是為了讓你開發的插件應用更加廣泛,兼容性更加好,還要考慮到用插件的人的一些特殊的做法,例如,有些朋友為了避免jquery和zeptojs沖突,將jquery的前綴“$”,修改為“jQuery”,還有些朋友將默認的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運行,那麼我們的做法是,把代碼包裹在如下裡面:

;(function($,window,document,undefined){
    //我們的代碼。。
})(jQuery,window,document);

就可以避免上面的一些情況了!
至此,你開發的插件就算完美了!

 

補充


 

JQ插件標准的封裝---閉包

<script type="text/javascript">
    (function ($) {
        //這裡放入插件代碼 何問起 
    })(jQuery);
</script>

這是jQuery官方的插件開發規范,這樣寫是作用是:
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’

這段代碼在被解析時會形同如下代碼:

var jq = function($) {
    // Code goes here
}; 
jq(jQuery);

 

================更新於2016年2月4日=============

編寫插件

$(function () {
    $.fn.插件名稱 = function (options) {
        var defaults = {
            Event : "click", //觸發響應事件
            msg : "Holle word!" //顯示內容
        };
        var options = $.extend(defaults, options);
        var $this = $(this); //當然響應事件對象
        //功能代碼部分
        //綁定事件
        $this.live(options.Event, function (e) {
            alert(options.msg);
        });
    }
});

調用插件

$(function () {
    //綁定元素事件
    $("#test").插件名稱({
        Event : "click", //觸發響應事件
        msg : "插件原來就是這麼簡單!" //顯示內容
    });
});

布局

<input type = "button" id = "test" value = "這是一個簡單的插件調用" /  >
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved