前端框架设计

框架设计

框架设计的权衡

框架设计里面到处体现了权衡的艺术。

在框架设计之初，我们的最初的构想往往是“既要…又要…”，但是往往现实是非常残酷的， 因此我们需要处处作出权衡。

• 框架的设计应该将其设计为命令式还是声明式 ？
• 框架需要设计成纯运行时还是纯编译时，还是设计为运行时 + 编译时 ？

这里只是举了一部分例子，但是从这些例子也可以看出，处处都需要权衡。

范式的权衡

从编程范式来看，可以分为两大编程范式：

• 命令式编程

  • 强调的是 How (强调结果)
  • 入门门槛是比较低，这也是为什么最初流行都是命令式的编程语言

  // 计算数组中偶数的和
  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
       
    if (arr[i] % 2 === 0) {
       
      total += arr[i];
    }
  }
  console.log(total);
  

  • 随着项目规模的扩大，开发者使用命令式编程是非常痛苦

  /*
   * 需求：
   * 获取 id 为 app 的 div
   * 它的文本内容为 hello world
   * 为其绑定点击事件
   * 当点击时弹出提示 ok
   */
  const div = document.querySelector("#app");
  div.innerText = "hello world";
  div.addEventListener("click", () => alert("ok"));
  
  // 这样的编程范式，思路倒是非常清晰
  // 但是项目一大，使用起来非常痛苦
  

  • React 官网有一张关于命令式编程的一张非常形象的图

  

• 声明式编程

  • 强调的是 What
  • 入门门槛比较高

  // 计算数组中偶数的和
  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  console.log(arr.filter((i) => i % 2 === 0).reduce((a, b) => a + b));
  

  • 声明式虽然门槛比较高，但是一旦将声明背后的代码搭建好，开发者使用起来就非常的爽

  <div @click="()=>alert('ok')">hello world</div>
  

  • React 官网针对这种声明式也有一张图

  

目前看上去声明式相比命令式要好得多，但是命令式真的就是一无是处么 ？

非也。

声明式代码的性能不可能比命令式更高的，声明式的背后仍然是命令式。

举个具体的例子：我们要将 div 的文本内容修改为 hello vue3，命令式操作如下：

div.textContent = "hello vue3";

在命令式中，明确的知道了哪些地方发生变化，要做的事情仅仅是做必要的修改即可。

但是声明式就做不到这一点，因为声明描述的是结果：

<!-- 修改前 -->
<div @click="()=>alert('ok')