jquery插件的開發

插件實例:將指定標籤文字顏色改爲紅色

一、第一個分號作用:
本來別人的代碼也正常工作,只是最後定義的那個函數沒有用分號結尾而以,然後當頁面中引入我們的插件時,報錯了,我們的代碼無法正常執行。
原因是我們用來充當自調用匿名函數的第一對括號與上面別人定義的函數相連,因爲中間沒有分號嘛,總之我們的代碼無法正常解析了,所以報錯。所以好的做法是我們在代碼開頭加一個分號,這在任何時候都是一個好的習慣
二、用自調用匿名函數包裹你的代碼
JavaScript中無法用花括號方便地創建作用域,但函數卻可以形成一個作用域,域內的代碼是無法被外界訪問的。如果我們將自己的代碼放入一個函數中,那麼就不會污染全局命名空間,同時不會和別的代碼衝突。可以防止與同名全局變量衝突。
(function() {
//內容
})()
三、傳參(傳系統參數)
將系統變量以參數形式傳遞到插件內部也是個不錯的實踐。
  當我們這樣做之後,window等系統變量在插件內部就有了一個局部的引用,可以提高訪問速度,會有些許性能的提升
  最後我們得到一個非常安全結構良好的代碼:
;(function($,window,document,undefined){    //我們的代碼。。    //blah blah blah...})(jQuery,window,document);
至於這個undefined,稍微有意思一點,爲了得到沒有被修改的undefined,我們並沒有傳遞這個參數,但卻在接收時接收了它,因爲實際並沒有傳,所以‘undefined’那個位置接收到的就是真實的'undefined'了。是不是有點hack的味道,值得細細體會的技術,當然不是我發明的,都是從前人的經驗中學習。
四、插件開發方法
jQuery插件開發方式主要有三種:
  1. 通過$.extend()來擴展jQuery:方式太簡單,僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以
  2. 通過$.fn 向jQuery添加新的方法:常用方法
  3. 通過$.widget()應用jQuery UI的部件工廠方式創建:用來開發更高級jQuery部件的,該模式開發出來的部件帶有很多jQuery內建的特性,比如插件的狀態信息自動保存,各種關於插件的常用方法等
五:支持鏈式調用
jQuery一個時常優雅的特性是支持鏈式調用,選擇好DOM元素後可以不斷地調用其他方法。
  要讓插件不打破這種鏈式調用,只需return一下即可。
$.fn.myPlugin = function() {    //在這裏面,this指的是用jQuery選中的元素    this.css('color', 'red');    return this.each(function() {        //對每個元素進行操作        $(this).append(' ' + $(this).attr('href'));    }))}
六:接收參數
this.options = $.extend({},this.defaults,opt)
將一個新的空對象做爲$.extend的第一個參數,defaults和用戶傳遞的參數對象緊隨其後,這樣做的好處是所有值被合併到這個空對象上,保護了插件裏面的默認值。
七:面向對象的插件開發
將需要的重要變量定義到對象的屬性上,函數變成對象的方法,當我們需要的時候通過對象來獲取,一來方便管理,二來不會影響外部命名空間,因爲所有這些變量名還有方法名都是在對象內部。
所以上述實例新建了一個對象命名爲Beautifier,然後我們在插件裏使用這個對象來編碼。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章