JS 回调模式

oliverhuang 发布于2019-08-22 11:18 / 2221人阅读

摘要：对这种问题的解决方法是采用回调模式。可以将节点隐藏逻辑以回调函数的方式传递给并委托执行检查参数是否为可调用复杂逻辑，筛选出符合的元素那么现在回调函数可选，重构后加入回调函数参数的仍然可以像以前一样使用，而不会破坏旧的原始代码。

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循环回调

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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