鏈式代碼
$('input[type="button"]') .eq(0).click(function() { alert('點擊我!');}).end().eq(1).click(function() { $('input[type="button"]:eq(0)').trigger('click');}).end().eq(2).toggle(function() { $('.aa').hide('slow');}, function() { $('.aa').show('slow');});找出type類型為button的input元素找到第一個按鈕,并綁定click事件處理函數
返回所有按鈕,再找到第二個
為第二個按鈕綁定click事件處理函數
為第三個按鈕綁定toggle事件處理函數
jQuery的這種管道風格的DSL鏈式代碼,總的來說:
節約JS代碼;
所返回的都是同一個對象,可以提高代碼的效率。
通過簡單擴展原型方法并通過
return this
的形式來實現跨瀏覽器的鏈式調用。利用JS下的簡單工廠方法模式,來將所有對于同一個DOM對象的操作指定同一個實例。這個原理就超簡單了,如下代碼:
aQuery().init().name()分解:
a = aQuery();a.init()a.name()把代碼分解一下,很明顯實現鏈式的基本條件就是要實例對象先創建好,調用自己的方法。
aQuery.PRototype = { init: function() { return this; }, name: function() { return this }}所以我們如果需要鏈式的處理,只需要在方法內部方法當前的這個實例對象this就可以了,因為返回當前實例的this,從而又可以訪問自己的原型了,這樣的就節省代碼量,提高代碼的效率,代碼看起來更優雅。但是這種方法有一個問題是:所有對象的方法返回的都是對象本身,也就是說沒有返回值,所以這種方法不一定在任何環境下都適合。http://www.imooc.com/code/3402
新聞熱點
疑難解答