设计模式 - 桥接模式 - JavaScript

桥接模式:将抽象部分和具体实现部分分离,两者可独立变化,也可以一起工作。

专注前端与算法的系列干货分享,转载请声明出处:原文链接: xxoo521.com

什么是桥接模式

桥接模式:将抽象部分和具体实现部分分离,两者可独立变化,也可以一起工作。

在这种模式的实现上,需要一个对象担任“桥”的角色,起到连接的作用。

应用场景

在封装开源库的组件时候,经常会用到这种设计模式。

例如,对外提供暴露一个afterFinish函数,
如果用户有传入此函数, 那么就会在某一段代码逻辑中调用。

这个过程中,组件起到了“桥”的作用,而具体实现是用户自定义。

多语言实现

ES6 实现

JavaScript 中桥接模式的典型应用是:Array对象上的forEach函数。

此函数负责循环遍历数组每个元素,是抽象部分;
而回调函数callback就是具体实现部分。

下方是模拟forEach方法:

const forEach = (arr, callback) => {
    if (!Array.isArray(arr)) return;

    const length = arr.length;
    for (let i = 0; i < length; ++i) {
        callback(arr[i], i);
    }
};

// 以下是测试代码
let arr = ["a", "b"];
forEach(arr, (el, index) => console.log("元素是", el, "位于", index));

python3 实现

和 Js 一样,这里也是模拟一个for_each函数:
它会循环遍历所有的元素,并且对每个元素执行指定的函数。

from inspect import isfunction

# for_each 起到了“桥”的作用
def for_each(arr, callback):
  if isinstance(arr, list) == False or isfunction(callback) == False:
    return

  for (index, item) in enumerate(arr):
    callback(item, index)

# 具体实现部分
def callback(item, index):
  print('元素是', item, '; 它的位置是', index)

# 以下是测试代码
if __name__ == '__main__':
  arr = ['a', 'b']

  for_each(arr, callback)

扫描下方二维码,回复「博客文章」获取解锁验证码

步骤:打开微信 => 扫描二维码 => 关注「心谭博客」公众号 => 发送「博客文章」即可解锁博客全部文章

输入验证码:
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×