JS 回調模式

oliverhuang 發布于2019-08-22 11:18 / 2304人閱讀

摘要：對這種問題的解決方法是采用回調模式。可以將節點隱藏邏輯以回調函數的方式傳遞給并委托執行檢查參數是否為可調用復雜邏輯，篩選出符合的元素那么現在回調函數可選，重構后加入回調函數參數的仍然可以像以前一樣使用，而不會破壞舊的原始代碼。

1. 回調示例

如果有個模塊 findeNodes() ，任務是找到期望的 DOM 元素并使用 hide() 處理：

function findNodes() {
    var i = 10000, nodes = [], found
    while (i--) {
        // ...復雜邏輯，篩選出符合的元素 found
        nodes.push(found)
    }
    return nodes
}

function hide(nodes) {
    for (let i = 0, max = nodes.length; i < max; i++) {
        nodes[i].style.display = "none"
    }
}
hide(findNodes())

2. 改進

可以看到函數 findNodes() 和 hide() 分別兩次進行了循環，這是十分低效的，如果要避免這種重復循環，并且只要在 findNodes() 中選擇的時候就進行 hide() 那么將是高效的實現方式。如果在 findNodes() 中實現修改邏輯，由于檢索和修改邏輯耦合，那么它將不再是一個通用函數。對這種問題的解決方法是采用回調模式。

可以將節點隱藏邏輯以回調函數的方式傳遞給 findNodes() 并委托執行：

function findNodes(callback) {
    var i = 10000, nodes = [], found

    if (typeof callback !== "function") {    // 檢查參數是否為可調用
        callback = false
    }

    while (i--) {
        // ...復雜邏輯，篩選出符合的元素 found
        if (callback) {
            callback(found)
        }
        nodes.push(found)
    }
    return nodes
}

function hide(nodes) {
    nodes[i].style.display = "none"
}

findNodes(hide)

那么現在回調函數可選，重構后加入回調函數參數的 findNodes() 仍然可以像以前一樣使用，而不會破壞舊 API 的原始代碼。

3. 回調與作用域

前面的例子中，回調執行的語句：callback(para)，在多數情況下有效，但是如果傳遞的函數是對象的方法且有 this 那么回調方法里的 this 將指向的是全局對象，從而發生意外。

解決這個問題的方法是傳遞回調函數，并且還傳遞該回調函數所屬的對象：

function findNodes (callback, callback_obj){
    ...
    if (typeof callback === "function"){
        callback.call(callback_obj, found)
    }
    ...
}
findNodes (obj.sayName, obj)

當然，可以把方法作為字符串來傳遞，避免重復兩次輸入該對象的名稱：

findNodes (callback, callback_obj){
    if (typeof callback === "string"){
        callback = callback_obj[callback]
    }
    if (typeof callback === "function"){
        callback.call(callback_obj, found)
    }
}
findNodes("sayName", Obj)

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考： P65

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器 js回調函數 js回調函數視頻 js循環等待回調 js for循環回調

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92143.html

《Node.js設計模式》Node.js基本模式

摘要：回調函數是在異步操作完成后傳播其操作結果的函數，總是用來替代同步操作的返回指令。下面的圖片顯示了中事件循環過程當異步操作完成時，執行權就會交給這個異步操作開始的地方，即回調函數。本系列文章為《Node.js Design Patterns Second Edition》的原文翻譯和讀書筆記，在GitHub連載更新，同步翻譯版鏈接。歡迎關注我的專欄，之后的博文將在專欄同步： Enc...

Seay 2019-08-21 17:46 評論0 收藏0
異步

摘要：在異步機制中，任務隊列就是用來維護異步任務回調函數的隊列。四對象對象是工作組提出的一種規范，目的是為異步編程提供統一接口。異步 1.JavaScript單線程的理解 Javascript語言的執行環境是單線程（single thread）。所謂單線程，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面一個任務，以此類推。 2.JavaScript單線...

goji 2019-08-23 13:54 評論0 收藏0
[ JS 進階 ] 異步編程 promise模式的簡單實現

摘要：為了降低異步編程的復雜性，所以。難理解請參考的誤區以及實踐異步編程的模式異步編程的種方法異步編程 javascript異步編程, web2.0時代比較熱門的編程方式，我們平時碼的時候也或多或少用到，最典型的就是異步ajax，發送異步請求，綁定回調函數，請求響應之后調用指定的回調函數，沒有阻塞其他代碼的執行。還有像setTimeout方法同樣也是異步執行回調的方法。如果對異步編程...

svtter 2019-08-21 10:35 評論0 收藏0
JS 建造者模式

摘要：如何應對這種變化如何提供一種封裝機制來隔離出復雜對象的各個部分的變化，從而保持系統中的穩定構建算法不隨著需求改變而改變這就是要說的建造者模式。建造者模式，將一個復雜對象的構建層與其表示層相互分離，使得同樣的構建過程可以采用不同的表示。 1. 簡介在軟件系統中，有時候面臨著一個復雜對象的創建工作，其通常由各個部分的子對象用一定的算法構成；由于需求的變化，這個復雜對象的各個部分經常面臨著...

channg 2019-08-22 11:17 評論0 收藏0
詳解JavaScript函數模式

摘要：函數表達式又名匿名函數為變量賦的值是函數定義本身。在語言里任何匿名函數都是屬于對象。這種情況下，就叫做回調函數。如上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調函數的特別適用于事件驅動編程，因為回調模式支持程序以異步方式運行。 JavaScript設計模式的作用是提高代碼的重用性，可讀性，使代碼更容易的維護和擴展在javascript中，函數是一類對象，這表示他可以作為參數傳遞...

wwolf 2019-08-21 10:20 評論0 收藏0