唐霜的博客

前两天做了一个视频，聊了前端框架的话题，包括上一期robust也聊了前端框架的话题。对前端框架的发展的梳理，我觉得已经做的不错了。

本文再简单总结一下。

我把整个前端框架的发展，分为3个大阶段，其中黄色的框是jquery为王的阶段，典型框架有angularjs, backbone等，这一阶段的框架实际上也是数据驱动，比如angularjs和backbone，所以，我们不能用数据驱动来划分它们和后来的react、vue的区别。

绿色的框这一阶段有两个特征，一个是react、vue大行其道，另一个是类似babel、webpack这样的工具是开发工作的基础。在16、17年时，流行起来一句话，叫“学不动了”，意思是前端发展太快，冒出来很多东西，其中包括了对新框架的谈笑。但是，从上图可以看出，其实在这一阶段（上图中没有列举出类似cyclejs这类框架），并没有像上一个阶段一样那么多框架林立，而是被react、vue、angular统治，所以，有的时候，我们的感觉和实际的情况有一些差别。和上一个阶段不同，这一个阶段react作为主导框架，追求的是某种极客层面的快发体验，特别是react，在runtime上探索出了时间切片等。但是，react持续在runtime上下功夫，或许会错过下一个阶段。

蓝色框是第三个阶段，也是我们当下正所处的阶段。这一阶段的特征是基于编译的框架开始大行其道。以svelte为典型，vue3跟进，框架们都在想办法，让开发者在源码中使用比较特殊且体验更好的语法来写组件，然后通过编译器，把这一写法转化为运行时放到浏览器中跑。甚至，像alpine这类框架，直接在运行时进行解析和运行。这种基于编译的模式（实际上，angular2+的模板语法也是这种模式），可能是接下来这段时间前端框架的主要方式。

今天公司给装了一个新的500G的盘，导致我电脑瞬间多出很大一块空间。而看着越来越小的C盘，想到我以前也有拿D盘补C盘的操作，这次我索性把整个D盘干掉，来一个500G的C盘，岂不是爽歪歪。网上搜索了一下方法，windows自带的磁盘管理工具就可以满足，于是开开心心的打开磁盘管理，把D盘删了，然后按照指示，右键C盘扩展卷，然后，M的，这个选项是灰色的，用不了……

这么尴尬吗？我一看，在C盘后面还有一个很小的分区，写着“恢复分区”，大概是系统故障的时候跑一个特殊的小系统来做引导的吧。这个我没意见，但是你为啥插在C盘和D盘之间？？磁盘管理工具又不能把它和D盘调换个位置。难道就这么卡住了？

又搜索了一下，https://www.diskgenius.cn/ 这个工具可以调整磁盘，于是下载下来试试。折腾了一下，发现可以采用一种变通的方法来处理。它可以调整磁盘大小，而且很诡异的是，调整磁盘大小时使用拖拽的形式，两边都可以拖，这就可以直接通过这个能力，把哪个“恢复分区”搞到最后面，把空出来没有的部分和C盘连在一起。

通过上面这个地方调整“恢复分区”大小，进入之后可以看到如下界面：

通过拖动的方式，把这个分区搞到最后面去，这样把空的空间留了下来。

这样愉快的调整完“恢复分区”之后，我想，继续用这个软件调整C盘的大小，结果，同样的方法提示这个磁盘加密，没法搞。难道没办法了？

这时，我又突然想到，回磁盘管理工具试试，在磁盘管理工具中使用右键扩展卷功能，竟然成功了。于是，我就有了一个接近500G的C盘，爽歪歪~

多态的简单解释是，调用相同的接口传入相同的参数，由于被调用的设备不同产生了不同的副作用/效果。例如同样是console.error，在chrome浏览器里面和在nodejs的command inline interface里面，效果就不同。基于这一特性，我们可以对接口进行抽象，简单的例子如下：

interface Person {
  sing(song: object): string;
}

function sing(person: Person, song: object): string {
  return person.sing(song)
}

上面的代码里面，我们创建了一个sing函数，它接收person这个对象，并调用它的sing方法。由于类型的约束，接收的person一定会有sing方法。但是，这个person.sing这个方法会做什么事呢？对于sing这个函数它并不知道，它只是调用了person的sing方法而已。所以，我们基于多态实现person。

class Person1 implement Person {
  sing(song: object) {
    const { lyric } = song
    console.log(lyric) // 打印到屏幕上
    return lyric
  }
}

class Person2 implement Person {
  sing(song: object) {
    const { lyric } = song
    Audio.paly(lyric) // 播放声音
    return lyric
  }
}

两个类实现了相同的Person接口，但是在实现的时候，又使用了不同的副作用，这就是多态。

那么，多态有什么用呢？对前端有什么影响呢？

第一点，是代码写法上的变化。

以前我们喜欢extends来得到一个具体的类，比如 class Person 有一个 sing 方法，我们通过 extends 来覆盖这个方法。这也就意味着，你的代码里面，一定会引入原来的 Person，并且原来的 Person 里面的 sing 方法一定会在最终打包的代码里面，虽然它永远都用不到。而新的写法是在调用函数的时候，把类的实例传入进去，这把引入模块的工作交给函数外部去做，这就让到处这个函数的模块的代码瞬间减少了。

第二点，是架构设计上的变化。

以前我在架设react项目时，会以View作为入口，应用的一切都是先有View，在View中去引入需要用到的Model等其他模块，这也就意味着，应用以View为顶层入口，所有的代码层层引入，绑定在了一起。现在，我们利用多态，换一个角度。我们让开发者自己写入口，这个入口我们称为Controller，我们提供的框架不是让View去使用Model，而是反过来，让Controller去使用View，让Model去使用View。这个场景下面，View必须按照接口约束提供接口给Model使用，这个时候，我们写Model就可以反过来考虑控制View（这里的Model是指ViewModel）。这种转变非常神奇，从框架层面，它颠覆了传统前端的开发方式。