npm包chalk中顺序无关链式调用的实现原理及使用的设计模式是什么

核心设计模式 #

这种实现的核心是构建器模式（Builder Pattern），搭配JavaScript的元编程特性（Proxy或属性访问器）完成，不需要提前定义所有属性排列组合的方法。

实现思路 #

1. 所有样式属性（比如green、bold）都不直接执行渲染逻辑，仅作为配置收集的入口：每访问一个属性，就把对应的样式标记存入内部的状态集合，同时返回实例本身，支撑链式调用。
2. 只有最后加括号执行函数的时候，才会把之前收集到的所有样式统一应用到传入的文本上。由于最终效果是所有样式的叠加，和样式收集的先后顺序无关，所以任意顺序的链式调用输出结果完全一致。

极简实现示例 #

// 预设样式与ANSI转义码映射表
const styleMap = {
  green: '\x1B[32m',
  bold: '\x1B[1m',
  underline: '\x1B[4m',
  reset: '\x1B[0m'
}

function createStyleTool() {
  // 存储用户选中的样式集合
  const enabledStyles = new Set()
  // 用Proxy拦截属性访问和函数调用
  const proxy = new Proxy(function (text) {
    // 调用时统一拼接样式、内容、重置符
    const stylePrefix = Array.from(enabledStyles).map(key => styleMap[key]).join('')
    return `${stylePrefix}${text}${styleMap.reset}`
  }, {
    get(target, prop) {
      // 如果访问的是预设样式，就加入启用集合，返回proxy继续支持链式调用
      if (Reflect.has(styleMap, prop)) {
        enabledStyles.add(prop)
        return proxy
      }
      return Reflect.get(target, prop)
    }
  })
  return proxy
}

// 测试
const myChalk = createStyleTool()
console.log(myChalk.green.bold('测试') === myChalk.bold.green('测试')) // 输出 true

为什么不需要定义所有排列组合 #

所有属性访问都是动态拦截处理的，只要维护一份样式映射表，新增样式只需要在映射表里加对应的配置即可，不需要为每个样式、每种组合单独写方法，扩展性极强。

内容的提问来源于stack exchange，提问作者NUMBART