如今这个世道,作为一个有几年工作经验的前端,不学点框架源码都感觉要被抛弃了,react或vue要能吹吹牛吧,最好能造个轮子,听说vue3源码好学点,那么学学vue3,但是学起来还是那么费劲,感觉快放弃了,就在这个时候出现了petite-vue,害,这家伙比vue简单啊,拿它来重拾学习源码的信心岂不更好,能自己写一个petite-vue再学习vue3岂不是事半功倍。说了这么多,今天就开始迈出第一步吧。
petite-vue还算是比较新的一个框架,尤雨溪2021年6月30号才初始化项目,经过几天密集的代码提交后,有二十多天已经没有更新了,看得出已经比较稳定了,本文不打算详细介绍petite-vue是干嘛的,有啥优势,关于这些可以查看官方介绍,首先来看看怎么跑一个hello world吧。
<div v-scope>{{msg}}</div>
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp({ msg: 'hello world!' }).mount()
</script>
如果你熟悉vue,那么对petite-vue的用法就很熟悉了,毕竟师出同门,当然还有一些个性化的语法,如上面的v-scope;对petite-vue有了简单的认识后,我们就模仿上面的示例,来实现一个看起来一样的代码吧,其中我们要实现如下几个关键部分:
PetiteVue是一个全局对象,包含createApp这个重要的API,因此可以像下面这样声明:
const PetiteVue = {
createApp(scope) {
...
}
};
createApp是一个函数,入参可以接收一个表示组件数据值的对象,同时需要返回一个包含mount函数的对象,我们在上一步的基础上接着丰富createApp函数吧:
const PetiteVue = {
createApp(scope) {
const appContent = {
scope: scope,
};
const app = {
context: appContent,
mount() {
...
}
};
return app;
}
};
mount根据字面意思,就是挂载我们的组件了,这里我们只是简单的将msg渲染到页面上,要实现这一目标,我们要遍历div的DOM结构,找到{{插值}}的地方,然后用scope的值去填充文本,说完了思路,接下来就实现吧,这里我们新增两个遍历DOM的函数walk和walkChildren:
function walk(node, context) {
const { nodeType } = node;
if (nodeType === 1) { // Element
return walkChildren(node, context);
}
if (nodeType === 3) { // Text
...
}
}
function walkChildren(node) {
let child = node.firstChild;
while(!child) {
walk(child);
child = child.nextSibling;
}
}
const PetiteVue = {
createApp(scope) {
const appContent = {
scope: scope,
};
const app = {
context: appContent,
mount() {
const root = document.querySelector('[v-scope]');
if (!root) {
console.warn('请提供有v-scope属性的html标签');
return;
}
walk(root, appContent);
root.removeAttribute('v-scope');
}
};
return app;
}
};
通过walk和walkChildren递归,可以遍历所有DOM节点,这里我们只关心Text节点,上面的代码还没实现具体逻辑,先不急,把架子搭起来,后面再实现。
v-scope是标记根组件的自定义属性,petite-vue支持多个根组件节点,在本篇实现中就先实现一个吧,尽量保持简单些;通过document.querySelector获取到根节点引用,它就作为遍历DOM的起点,当然最后要把v-scope属性删除,上面的代码已经实现了,这里多废话几句。
{{}}是我们自定义的插值语法,因此需要在walk遍历过程中去识别和解析出来,识别还是很简单的,就判断文本是不是{{xx}}格式的,通过一个简单的正则/{{([^]+?)}}/
就可以判断,这里简单说一下正则表达式吧,[^]+?
表示匹配任意字符,但是尽量少匹配,外面的括号是一个分组,会提取出{{}}里面的表达式,最后前后需要有{{}}包裹住,还是比较好理解的,现在动手实现具体的逻辑吧:
const RE = /{{([^]+?)}}/;
function walk(node, context) {
const { nodeType } = node;
if (nodeType === 1) { // Element
return walkChildren(node, context);
}
if (nodeType === 3) { // Text
const text = node.textContent;
const match = text.match(RE);
if (match) {
const exp = match[1].trim(); // 删除表达式前后的空白字符
node.textContent = context.scope[exp];
}
}
}
function walkChildren(node) {
let child = node.firstChild;
while(!child) {
walk(child);
child = child.nextSibling;
}
}
const PetiteVue = {
createApp(scope) {
const appContent = {
scope: scope,
};
const app = {
context: appContent,
mount() {
const root = document.querySelector('[v-scope]');
if (!root) {
console.warn('请提供有v-scope属性的html标签');
return;
}
walk(root, appContent);
root.removeAttribute('v-scope');
}
};
return app;
}
};
现在可以在浏览器里面跑起来了,看下效果吧,嗯,跟petite-vue的例子看起来差不多了,到这里我们就基本达成了最初的目标了,实现了一版很简陋的看起来差不多的框架。
从实现来看当匹配到插值语法的时候,我们直接把文本节点的内容全部替换了,如果我们的文本是这样的格式呢:"this is content: {{msg}} is't over",那么最终渲染的还是只有msg的状态值,其他都丢失了,这样显得有点糟糕,我们就乘胜追击,再完善一下吧。首先分析一下为了实现文本完整的渲染,我们要将静态的文本和插值文本提取出来,然后再拼接起来才是最终符合预期的结果,从左到右依次解析文本,"this is content: {{msg}} is't over"需要分成三部分,分别是["this is content: ", "{{msg}}", " is't over"],msg经过转换后变成["this is content: ", "{hello world!", "is't over"],最后拼接起来回填到文本节点就可以了:
const RE = /{{([^]+?)}}/g;
function walk(node, context) {
const { nodeType } = node;
if (nodeType === 1) { // Element
return walkChildren(node, context);
}
if (nodeType === 3) { // Text
const text = node.textContent;
let i = 0; // 保存上一个匹配{{}}格式的字符结束索引
if (text.includes('{{')) { // 先判断是否有"{{"字符,有才进行下面的判断
let match = null;
const segments = []; // 保存所有截断的文本
while ((match = RE.exec(text))) {
segments.push(text.slice(i, match.index)); // {{之前的字符
i = match.index + match[0].length;
const exp = match[1].trim(); // 删除表达式前后的空白字符
segments.push(context.scope[exp]); // msg的值求得之后,放入数组中便于后面拼接
}
segments.push(text.slice(i)); // 最后一个}}后面的字符
node.textContent = segments.join('');
}
}
}
通过拼接字符串的方式我们完成了渲染的基本要求,但是熟悉vue语法的同学会说,双花括号内部是支持js表达式的,既然实现到这里了,我们就支持一下表达式吧,首先分析一下,表达式里面的标识符指向scope对象的属性值,一个还好说,那么两个怎么通过简单的方式去实现呢,挨个挨个去把标识符提取出来,然后计算再合并么,想想都麻烦,那有没有简单的方式呢,我都这么说了,当然是有的,先看下实现原理吧:
function createFunc(exp) {
return new Function(`scope`, `with(scope) { return (${exp}) }`)
}
const f = foo('a + b');
f({ a: 1, b: 2 });
通过createFunc创建一个新的函数,with将exp表达式的作用域限定在scope中,这样当执行a+b的时候,相当于scope.a + scope.b,最后将结果返回,最终执行的函数如下所示:
(function(scope) {
with(scope) {
return (a + b);
}
})({a: 1, b: 2})
知晓了原理之后,我们就补齐表达式的计算吧:
function createFunc(exp) {
return new Function(`scope`, `with(scope) { return (${exp}) }`);
}
...
function walk(node, context) {
const { nodeType } = node;
if (nodeType === 1) { // Element
return walkChildren(node, context);
}
if (nodeType === 3) { // Text
const text = node.textContent;
let i = 0;
if (text.includes('{{')) {
let match = null;
const segments = []; // 保存所有截断的文本
while ((match = RE.exec(text))) {
segments.push(text.slice(i, match.index));
i = match.index + match[0].length;
const exp = match[1].trim(); // 删除表达式前后的空白字符
segments.push(createFunc(exp)(context.scope)); // createFunc(exp)生成函数,再将scope传入执行
}
segments.push(text.slice(i));
node.textContent = segments.join('');
}
}
}
如果你也想开发小程序或者APP软件的话,可以通过第三方专业开发平台,来帮助你实现开发需求:厦门在乎科技-专注小程序开发、厦门APP开发、网站开发