JavaScript 链式调用设计模式

Vue :从 createApp 开始的链式调用

代码示例

1
import { createApp } from "vue";
2

3
// 创建一个 Vue 应用实例
4
const app = createApp({
5
  data() {
6
    return {
7
      message: "Hello, Vue!",
8
    };
9
  },
10
  methods: {
11
    handleClick() {
12
      alert("Button clicked!");
13
    },
14
  },
15
});
16

17
// 链式调用：配置应用并绑定事件
18
app
19
  .component("MyButton", {
20
    template: `<button @click="handleClick">Click Me</button>`,
21
    methods: {
22
      handleClick() {
23
        this.$emit("custom-click");
24
      },
25
    },
26
  })
27
  .directive("highlight", {
28
    mounted(el) {
29
      el.style.backgroundColor = "yellow";
30
    },
31
  })
32
  .mixin({
33
    created() {
34
      console.log("Mixin created hook");
35
    },
36
  })
37
  .mount("#app"); // 挂载到 DOM

解释

createApp:创建一个 Vue 应用实例。传入一个根组件配置对象，包含 data 和 methods。

链式调用

.component(): 注册一个全局组件 MyButton，组件中定义了一个按钮，点击按钮时会触发 custom-click 事件。
.directive(): 注册一个全局指令 highlight，当元素挂载时，背景颜色会变为黄色。
.mixin(): 添加一个全局混入，在组件的 created 生命周期钩子中输出日志。
.mount(): 将应用挂载到 DOM 中，挂载点为 #app。

事件绑定

在 MyButton 组件中，通过 @click 绑定了一个点击事件，触发时会调用 handleClick 方法，并通过 $emit 触发 custom-click 事件。

在父组件中，可以通过监听 custom-click 事件来处理按钮点击逻辑。

use 方法

use 方法是 Vue 应用实例的一个方法，用于安装插件。插件可以是一个对象（必须提供 install 方法），也可以是一个函数（会被直接调用）。Vue 会调用插件的 install 方法，并将 Vue 应用实例作为参数传递给它。

语法

1
app.use(plugin, options);

plugin: 要安装的插件，可以是一个对象或函数。
options: 可选的配置对象，传递给插件的 install 方法。

实现 use

use 的逻辑

1
function use(plugin, options) {
2
  if (typeof plugin.install === "function") {
3
    // 如果插件是一个对象，并且提供了 install 方法
4
    plugin.install(this, options);
5
  } else if (typeof plugin === "function") {
6
    // 如果插件是一个函数
7
    plugin(this, options);
8
  } else {
9
    throw new Error(
10
      "Plugin must be a function or an object with an install method.",
11
    );
12
  }
13
  return this; // 返回应用实例，支持链式调用
14
}

使用

1
// 自定义插件
2
const myPlugin = {
3
  install(app, options) {
4
    console.log("My plugin is installed with options:", options);
5
    // 添加全局方法或属性
6
    app.config.globalProperties.$myMethod = () => {
7
      console.log("Hello from my plugin!");
8
    };
9
    // 注册全局组件
10
    app.component("my-component", {
11
      template: "<div>My Custom Component</div>",
12
    });
13
  },
14
};
15

16
// 使用插件
17
createApp(App)
18
  .use(myPlugin, { someOption: true }) // 安装自定义插件
19
  .mount("#app");

Promise 中的链式调用

手写 Promise 方法

Promise A+规范

PromiseA+规范详细描述了 JavaScript 中 Promise 的行为标准，确保不同的 Promise 实现可以相互兼容。

术语

promise：先是一个对象或函数，其具有，然后是方法，其行为符合本规范。 thenable：先用一个具有，再用方法的对象或函数。 value：任何合法的脚本值(包括未定义，一个已启用，或一个 Promise)。 exception：一个使用抛出语句抛出的值。 reason：一个表示 Promise 被拒绝的原因

要求

Promise 状态

一个 promise 必须处于以下三种状态之一：pending(等待态），fulfilled(执行态)，或 rejected(拒绝态)。

pending：可以迁移到 fulfilled 或 rejected 状态。 fulfilled：不可迁移到其他状态，必须有一个 value。 rejected：不可迁移到其他状态，必须有一个 reason。

then 方法

一个 promise 必须提供一个 then 方法来访问其当前或最终的 value 或 reason。 promise.then(onFulfilled, onRejected)

onFulfilled 和 onRejected 都是可选参数。
如果 onFulfilled 不是函数，必须忽略它。
如果 onRejected 不是函数，必须忽略它。

onFulfilled 的执行

onFulfilled 必须在 promise 完成后被调用，且 promise 的 value 作为其第一个参数。
onFulfilled 不得在 promise 完成前被调用。
onFulfilled 必须只被调用一次。

onRejected 的执行

onRejected 必须在 promise 被拒绝后被调用，且 promise 的 reason 作为其第一个参数。
onRejected 不得在 promise 被拒绝前被调用。
onRejected 必须只被调用一次。

then 方法必须返回一个 promise

1
promise2 = promise1.then(onFulfilled, onRejected);

promise2 必须是一个新的 promise。

处理返回的值

如果 onFulfilled 或 onRejected 返回一个值，则运行 Promise 解决程序Resolve(promise2, x)。
如果 onFulfilled 或 onRejected 抛出一个异常，则 promise2 必须以作为拒绝原因。
如果 onFulfilled 不是一个函数且 promise1 完成，promise2 必须以 promise1 的 value 作为其 value。
如果 onRejected 不是一个函数且 promise1 被拒绝，promise2 必须以 promise1 的 reason 作为其 reason。

代码示例

1
const PENDING = "pending";
2
const FULFILLED = "fulfilled";
3
const REJECTED = "rejected";
4

5
function isFunction(fn) {
6
  return Object.prototype.toString.call(fn) === "[object Function]";
7
}
8

9
function myPromise(fn) {
10
  if (!this || this.constructor !== myPromise) {
11
    throw new TypeError("Promise must be called with new");
12
  }
13
  if (!isFunction(fn)) {
14
    throw new TypeError("Promise resolver undefined is not a function");
15
  }
16

17
  this.status = PENDING;
18
  this.value = void 0;
19
  this.reason = void 0;
20
  this.onFulfilledCallbacks = [];
21
  this.onRejectedCallbacks = [];
22

23
  const resolve = (value) => {
24
    if (this.status === PENDING) {
25
      this.status = FULFILLED;
26
      this.value = value;
27

28
      // 发布
29
      this.onFulfilledCallbacks.forEach((fn) => fn());
30
    }
31
  };
32

33
  const reject = (reason) => {
34
    if (this.status === PENDING) {
35
      this.status = REJECTED;
36
      this.reason = reason;
37

38
      // 发布
39
      this.onRejectedCallbacks.forEach((fn) => fn());
40
    }
41
  };
42

43
  try {
44
    fn(resolve, reject);
45
  } catch (e) {
46
    reject(e);
47
  }
48
}
49

50
// 添加 then 原型方法
51
myPromise.prototype.then = function (onFulfilled, onRejected) {
52
  // 处理边界
53
  onFulfilled = isFunction(onFulfilled) ? onFulfilled : (value) => value;
54
  onRejected = isFunction(onRejected)
55
    ? onRejected
56
    : (reason) => {
57
        throw reason;
58
      };
59

60
  // 返回一个新的 Promise
61
  const promise2 = new myPromise((resolve, reject) => {
62
    if (this.status === FULFILLED) {
63
      setTimeout(() => {
64
        try {
65
          const x = onFulfilled(this.value);
66
          resolve(x);
67
        } catch (e) {
68
          reject(e);
69
        }
70
      }, 0);
71
    } else if (this.status === REJECTED) {
72
      setTimeout(() => {
73
        try {
74
          const x = onRejected(this.reason);
75
          resolve(x);
76
        } catch (e) {
77
          reject(e);
78
        }
79
      }, 0);
80
    } else if (this.status === PENDING) {
81
      // 订阅
82
      this.onFulfilledCallbacks.push(() => {
83
        setTimeout(() => {
84
          try {
85
            const x = onFulfilled(this.value);
86
            resolve(x);
87
          } catch (e) {
88
            reject(e);
89
          }
90
        }, 0);
91
      });
92

93
      this.onRejectedCallbacks.push(() => {
94
        setTimeout(() => {
95
          try {
96
            const x = onRejected(this.reason);
97
            resolve(x);
98
          } catch (e) {
99
            reject(e);
100
          }
101
        }, 0);
102
      });
103
    }
104
  });
105

106
  return promise2;
107
};
108

109
// 测试
110
const promise = new myPromise((resolve, reject) => {
111
  setTimeout(() => {
112
    resolve("success");
113
  }, 1000);
114
});
115

116
promise
117
  .then((value) => {
118
    console.log(value);
119
    return "msg from then1";
120
  })
121
  .then((value) => {
122
    console.log(value);
123
    return "msg from then2";
124
  })
125
  .then((value) => {
126
    console.log(value);
127
  });

实现链式调用

例题

限制用 JavaScript 实现：

1
Student("Alice"); // 输出 I am Alice
2

3
Student("Alice").rest(10).learn("computer");
4
/* 输出
5
I am Alice
6
经过10秒后
7
After 10 seconds
8
Learning computer
9
*/
10

11
Student("Alice").restFirst(5).learn("Math");
12
/* 输出
13
I am Alice
14
经过5秒后
15
After 5 seconds
16
Learning Math
17
*/

代码

1
class Student {
2
  constructor(name) {
3
    this.name = name;
4
    this.tasks = []; // 任务队列
5
    this.tasks.push(() => {
6
      console.log(`I am ${this.name}`);
7
      this.next(); // 执行下一个任务
8
    });
9
    setTimeout(() => this.next(), 0); // 异步启动任务队列
10
  }
11

12
  next() {
13
    const task = this.tasks.shift(); // 取出队列中的第一个任务
14
    task && task(); // 如果任务存在，则执行
15
  }
16

17
  rest(seconds) {
18
    this.tasks.push(() => {
19
      setTimeout(() => {
20
        console.log(`After ${seconds} seconds`);
21
        this.next(); // 执行下一个任务
22
      }, seconds * 1000);
23
    });
24
    return this; // 返回this以支持链式调用
25
  }
26

27
  restFirst(seconds) {
28
    this.tasks.unshift(() => {
29
      setTimeout(() => {
30
        console.log(`After ${seconds} seconds`);
31
        this.next(); // 执行下一个任务
32
      }, seconds * 1000);
33
    });
34
    return this; // 返回this以支持链式调用
35
  }
36

37
  learn(subject) {
38
    this.tasks.push(() => {
39
      console.log(`Learning ${subject}`);
40
      this.next(); // 执行下一个任务
41
    });
42
    return this; // 返回this以支持链式调用
43
  }
44
}
45

46
// 测试用例
47
new Student("Alice"); // 输出 I am Alice
48

49
new Student("Alice").rest(10).learn("computer");
50
/* 输出
51
I am Alice
52
经过10秒后
53
After 10 seconds
54
Learning computer
55
*/
56

57
new Student("Alice").restFirst(5).learn("Math");
58
/* 输出
59
I am Alice
60
经过5秒后
61
After 5 seconds
62
Learning Math
63
*/

发布订阅模式 vs 观察者模式

发布-订阅模式（Pub-Sub）和观察者模式（Observer）是两种常见的设计模式，它们都用于处理对象之间的通信和事件处理。

观察者模式（Observer Pattern）

观察者模式定义了一种一对多的依赖关系，当一个对象（称为Subject，主题）的状态发生变化时，所有依赖于它的对象（称为Observers，观察者）都会收到通知并自动更新。

Subject

维护一个观察者列表。
提供注册（attach）和注销（detach）观察者的方法。
在状态变化时通知所有观察者（notify）。

Observer（观察者）

定义一个更新接口（update），用于接收主题的通知。

代码示例

1
class Subject {
2
  constructor() {
3
    this.observers = [];
4
  }
5

6
  attach(observer) {
7
    this.observers.push(observer);
8
  }
9

10
  detach(observer) {
11
    this.observers = this.observers.filter((obs) => obs !== observer);
12
  }
13

14
  notify() {
15
    this.observers.forEach((observer) => observer.update());
16
  }
17
}
18

19
class Observer {
20
  constructor(name) {
21
    this.name = name;
22
  }
23

24
  update() {
25
    console.log(`${this.name} received an update!`);
26
  }
27
}
28

29
// 使用
30
const subject = new Subject();
31
const observer1 = new Observer("Observer 1");
32
const observer2 = new Observer("Observer 2");
33

34
subject.attach(observer1);
35
subject.attach(observer2);
36

37
subject.notify(); // Observer 1 received an update! Observer 2 received an update!

发布-订阅模式（Pub-Sub Pattern）

发布-订阅模式通过一个事件中心（Event Bus）来解耦发布者和订阅者。发布者将消息发布到事件中心，订阅者从事件中心订阅感兴趣的消息。发布者和订阅者之间没有直接的依赖关系。

关键角色

Publisher（发布者）：负责发布消息到事件中心。

Subscriber（订阅者）：向事件中心订阅感兴趣的消息。

Event Bus（事件中心）：维护一个消息队列和订阅者列表；负责将消息分发给订阅者。

代码示例

1
class EventBus {
2
  constructor() {
3
    this.events = {};
4
  }
5

6
  subscribe(event, callback) {
7
    if (!this.events[event]) {
8
      this.events[event] = []; // 初始化事件队列
9
    }
10
    this.events[event].push(callback);
11
  }
12

13
  publish(event, data) {
14
    // 边界检查
15
    if (!this.events[event]) {
16
      return;
17
    }
18
    if (this.events[event]) {
19
      this.events[event].forEach((callback) => callback(data));
20
    }
21
  }
22
}
23

24
// 使用
25
const eventBus = new EventBus();
26

27
// 订阅者
28
eventBus.subscribe("news", (data) => {
29
  console.log(`Subscriber 1 received news: ${data}`);
30
});
31

32
eventBus.subscribe("news", (data) => {
33
  console.log(`Subscriber 2 received news: ${data}`);
34
});
35

36
// 发布者
37
eventBus.publish("news", "Breaking news!");
38
// 输出：
39
// Subscriber 1 received news: Breaking news!
40
// Subscriber 2 received news: Breaking news!

主要区别

特性	观察者模式	发布-订阅模式
通信方式	直接通信（主题直接通知观察者）	间接通信（通过事件中心）
耦合度	强耦合（观察者和主题直接关联）	松耦合（发布者和订阅者解耦）
角色	主题（Subject）和观察者（Observer）	发布者（Publisher）、订阅者（Subscriber）、事件中心（Event Bus）
适用场景	简单的对象间通信	复杂的系统，需要解耦的场景
实现复杂度	简单	相对复杂
同步/异步	通常是同步的	可以是异步的