jquey插件學習
1:這種方式主要應用在不需要調用dom元素和沒有鏈式結構:
$.extend({ sayhello:function () { console.log(‘hello‘) }, dosomething:function () { console.log(‘dosomething‘) } }); $.sayhello()
2:鏈式結構,使用場景最多的方式
$.fn.myPlugin = function() { // 非鏈式 //在這裏面,this指的是用jQuery選中的元素 //example :$(‘a‘),則this=$(‘a‘) this.css(‘color‘, ‘red‘); }
$.fn.myPlugin = function() { //在這裏面,this指的是用jQuery選中的元素 this.css(‘color‘, ‘red‘); return this.each(function() { //用return 返回鏈式結構 //對每個元素進行操作 $(this).append(‘ ‘ + $(this).attr(‘href‘)); })) } $.fn.myPlugin = function(options) { var defaults = { ‘color‘: ‘red‘, ‘fontSize‘: ‘12px‘ }; var settings = $.extend(defaults, options); // 傳參,但是這種情況改變了defaults的參數 var settings = $.extend({},defaults, options); // 是否該創建一個空對象?事實證明並不會影響defaults return this.css({ ‘color‘: settings.color, ‘fontSize‘: settings.fontSize }); }
3:面向對象的插件開發 參考文章
好的做法是我們在代碼開頭加一個分號,這在任何時候都是一個好的習慣。
同時,將系統變量以參數形式傳遞到插件內部也是個不錯的實踐。
當我們這樣做之後,window等系統變量在插件內部就有了一個局部的引用,可以提高訪問速度,會有些許性能的提升
最後我們得到一個非常安全結構良好的代碼:
;(function($,window,document,undefined){ //我們的代碼。。 //blah blah blah... })(jQuery,window,document);
而至於這個undefined,稍微有意思一點,為了得到沒有被修改的undefined,我們並沒有傳遞這個參數,但卻在接收時接收了它,因為實際並沒有傳,所以‘undefined’那個位置接收到的就是真實的‘undefined‘了。是不是有點hack的味道,值得細細體會的技術,當然不是我發明的,都是從前人的經驗中學習。
所以最後我們的插件成了這樣:
;(function($, window, document,undefined) { //定義Beautifier的構造函數 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { ‘color‘: ‘red‘, ‘fontSize‘: ‘12px‘, ‘textDecoration‘: ‘none‘ }, this.options = $.extend({}, this.defaults, opt) } //定義Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ ‘color‘: this.options.color, ‘fontSize‘: this.options.fontSize, ‘textDecoration‘: this.options.textDecoration }); } } //在插件中使用Beautifier對象 $.fn.myPlugin = function(options) { //創建Beautifier的實體 var beautifier = new Beautifier(this, options); //調用其方法 return beautifier.beautify(); } })(jQuery, window, document);
一個安全,結構良好,組織有序的插件編寫完成。
關於變量定義及命名
現在談談關於變量及方法等的命名,沒有硬性規定,但為了規範,遵循一些約定還是很有必要的。
變量定義:好的做法是把將要使用的變量名用一個var關鍵字一並定義在代碼開頭,變量名間用逗號隔開。原因有二:
- 一是便於理解,知道下面的代碼會用到哪些變量,同時代碼顯得整潔且有規律,也方便管理,變量定義與邏輯代碼分開;
- 二是因為JavaScript中所有變量及函數名會自動提升,也稱之為JavaScript的Hoist特性,即使你將變量的定義穿插在邏輯代碼中,在代碼解析運行期間,這些變量的聲明還是被提升到了當前作用域最頂端的,所以我們將變量定義在一個作用域的開頭是更符合邏輯的一種做法。當然,再次說明這只是一種約定,不是必需的。
變量及函數命名 一般使用駝峰命名法(CamelCase),即首個單詞的首字母小寫,後面單詞首字母大寫,比如resultArray,requestAnimationFrame。對於常量,所有字母采用大寫,多個單詞用下劃線隔開,比如WIDTH=100,BRUSH_COLOR=‘#00ff00‘。當變量是jQuery類型時,建議以$開頭,開始會不習慣,但經常用了之後會感覺很方便,因為可以很方便地將它與普通變量區別開來,一看到以$開頭我們就知道它是jQuery類型可以直接在其身上調用jQuery相關的方法,比如var $element=$(‘a‘); 之後就可以在後面的代碼中很方便地使用它,並且與其他變量容易區分開來。
引號的使用:既然都扯了這些與插件主題無關的了,這裏再多說一句,一般HTML代碼裏面使用雙引號,而在JavaScript中多用單引號,比如下面代碼所示:
var name = ‘Wayou‘; document.getElementById(‘example’).innerHTML = ‘< a href="http: //wayouliu.duapp.com/">‘+name+‘</a>‘; //href=".." HTML中保持雙引號,JavaScript中保持單引號
一方面,HTML代碼中本來就使用的是雙引號,另一方面,在JavaScript中引號中還需要引號的時候,要求我們單雙引號間隔著寫才是合法的語句,除非你使用轉意符那也是可以的。再者,堅持這樣的統一可以保持代碼風格的一致,不會出現這裏字符串用雙引號包著,另外的地方就在用單引號。
;(function ($,window,document,undefined
) { function Beauty(ele,opt) { this.$ele = ele; this.defaults = { ‘color‘:‘#fe473c‘ }, this.opt = opt; this.options = $.extend({},this.defaults,this.opt); };// 插件的方法 Beauty.prototype.setattr = function () { //return 出鏈式結構 return this.$ele.css({ ‘color‘:this.options.color }) }; $.fn.myPlugin = function () { var buff = new Beauty(this,{‘color‘:‘green‘}); //return 出鏈式結構 return buff.setattr() } })(jQuery,window,document)
jquey插件學習