如何构建类似Vue的极简前端框架
文章目录
在开始之前,我们做一些前提设置,这个极简框架的目标是让我们避免去写一些常规的html和JavaScript代码,比如:
|
|
这个极简框架是让我们可以写一些神奇的HTML和JavaScript,就像Vue一样:
|
|
或者像React一样:
|
|
这样的一个框架的好处是显而易见的,写代码的时候问题要记住多章节的内置变量和方法是困难的,如document、innerText、getElementById,而且也不利于软件的扩展。
我们的极简框架有两个特点:响应式和组合式。
响应式
在Vue和React代码中,数据和UI元素的显示内容有一个绑定,只要我们修改了数据,html元素的innerText值就会自动进行更新。这被称作响应式(Reactivity)
组合式
可以定义一个组件并重复使用它,而无需每次使用到它的时候还要再次定义它,这被称为可组合性。普通的HTML + JavaScript并不具备这个特性。因此,下面的代码并没有达到预期效果(仅仅是做了定义而,这有点类似Web Components的做法):
|
|
响应式和组合式是现代前端框架的两个主要特性,例如Vue, React等待。
要利用这些抽象概念(例如框架和库),我们需要先学习很多特定的概念。当这些东西以某种神奇的方式运作时,我们还要处理它们可能产生的问题。更不用说,我们还要处理一大堆容易出错的依赖关系。
但事实上,使用现代 Web API 来实现这两件事并不困难。而且,在大多数情况下,我们可能并不需要大而全的框架及其纷繁复杂的特性…
响应式(Reactivity)
一个句话解释响应式就是:当数据更新时,自动更新 UI。
首先,我们需要知道数据何时更新。不幸的是,这不是一个普通对象可以做到的。我们不能简单地附加一个名为 ondataupdate 的监听器来监听数据更新事件。
幸运的是,JavaScript 有一个可以实现这个功能的东西,它叫做代理(Proxy)。
代理对象(Proxy Objects)
Proxy
允许我们在常规对象上创建一个代理对象:
|
|
这个代理对象可以被用来监听数据的变化。
在上面的例子当中,我们有了一个代理对象,但是当 name
属性发生变化的时候,不会发生任何额外的事情。
因此,我们需要一个 handler
,用来告诉代理对象,当数据发生变化的时候需要做些什么。
|
|
现在,任何时候修改 name
的值时,我们都会得到一个 name is being updated.
的消息。
你可能会想,这有什么的,我可以通过对象的 set
方法来实现这一点,但是我想跟你说:
- 代理方法更加通用,handlers方法可以被重用,这意味着……
- 你在对象上设置的任何值,都可以被递归的转换为代理,这意味着……
- 你将拥有一个神奇的对象,任何嵌套的数据更新,都是会被监听的。
除了这些,你还可以处理其他一些访问事件,比如当一个属性被读取、更新、删除等。现在我们已经有能力监听操作,我们需要实际响应这些事件了。
更新UI
如果你还记得,响应式的第二部分是自动更新UI。为些,我们需要知道被更新的UI元素。在这之前,我们需要首先标记这个UI元素,当数据更新的时候可以找到这个UI元素。为了做到这一点,我们将使用数据属性,这是一个允许我们在元素上设置任意值的特性:
|
|
数据属性的便利之处在于,我们可以使用以下方法找到所有适当的元素:
|
|
现在我们只需设置所有适当元素的 innerText:
|
|
就这些,这就是响应式的核心!
由于我们的处理程序具有通用性,用户设置的任何属性都会更新所有适当的 UI 元素。
这就是 JavaScript 代理功能如此强大的原因,不需要任何依赖,只需一些巧妙的方法,它就可以为我们提供这些神奇的反应性对象。
现在我们来说第二个主要内容…
组合式(Composibility)
结果发现,浏览器已经为这个功能专门推出了一个叫做 Web Components 的功能,谁能想到!
很少有人使用它是因为它有点让人头疼(而且也因为大多数人在开始一个项目时,默认选择常用的框架,而不考虑项目的范围)。
为了实现组件的可组合性,我们首先需要定义组件。
使用template和slot定义组件
<template>
标签用于包含浏览器不渲染的标记。例如,您可以在 HTML 中添加以下标记:
|
|
这个组件暂时不会渲染。你可以认为这是一个不可见的组件容器。
下一个构建块是 <slot>
元素,它定义了组件内容的放置位置。这使得组件可以重复使用不同的内容,也就是说,它变得可组合。
举个例子,这是一个红色内容的h1
元素:
|
|
在我们使用组件之前 - 比如上面的红色 h1,我们需要先注册它们。
注册组件
在我们注册红色 h1 组件之前,我们需要一个名称来注册它。我们可以使用 name 属性来实现这一点:
|
|
现在,使用一些JavaScript代码来获取组件及它的名称:
|
|
然后使用 [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
来注册:
|
|
在上面的代码块中发生了很多事情:
- 我们正在调用 customElements.define 函数并传入两个参数。
- 第一个参数是组件名称(即 “red-h1”)。
- 第二个参数是一个定义我们自定义组件为 HTMLElement 的类。
在类构造函数中,我们使用 red-h1 模板的副本来设置 shadow DOM 树。
调用 customElements.define
将使我们能够像使用普通 HTML 元素一样使用定义好的组件。
|
|
接下来,我们将把这两个概念结合起来!
响应式 + 组合式
快速回顾一下,我们做了两件事:
- 我们创建了一个响应式数据结构,即代理对象,当设置一个值时,可以更新我们标记为合适的任何元素。
- 我们定义了一个自定义组件 red-h1,它将渲染其内容为一个红色 h1。
现在我们可以把它们放在一起:
|
|
让自定义组件渲染我们的数据,并在我们更改数据时更新界面。
总结
当然,常规的前端框架不只做到这一步,它们有专门的语法,如 Vue 中的模板语法和 React 中的 JSX,这些语法使得编写复杂的前端页面相对于其他方式更加简洁。
由于这种专门的语法不是常规的 JavaScript 或 HTML,浏览器无法解析它们,因此它们都需要专门的工具将它们编译成常规的 JavaScript、HTML 和 CSS,以便浏览器能够理解。因此,现在没有人再写 JavaScript 了。
即使没有专门的语法,你仍然可以通过使用Proxy
和 Web Components
来实现常规前端框架的大部分功能,并且具有类似的简洁性。