亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

方法鏈式調用的實現

      jQuery的核心理念是Write less,Do more(寫的更少,做的更多),那么鏈式方法的設計與這個核心理念不謀而合。那么從深層次考慮這種設計其實就是一種Internal DSL。

DSL是指Domain Specific Language,也就是用于描述和解決特定領域問題的語言。

我們看一段鏈式代碼:

$('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的Internal DSL形式帶來的好處——編寫代碼時,讓代碼更貼近作者的思維模式;閱讀代碼時,讓讀者更容易理解代碼的含義;應用DSL可以有效的提高系統的可維護性(縮小了實現模型和領域模型的距離,提高了實現的可讀性)和靈活性,并且提供開發的效率。

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,從而又可以訪問自己的原型了,這樣的就節省代碼量,提高代碼的效率,代碼看起來更優雅。但是這種方法有一個問題是:所有對象的方法返回的都是對象本身,也就是說沒有返回值,所以這種方法不一定在任何環境下都適合。

      雖然Javascript是無阻塞語言,但是他并不是沒阻塞,而是不能阻塞,所以他需要通過事件來驅動,異步來完成一些本需要阻塞進程的操作,這樣處理只是同步鏈式,除了同步鏈式還有異步鏈式,異步鏈式jQuery從1.5開始就引入了Promise,jQuery.Deferred后期再討論。

 

任務

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?