2020 vuejs 数据驱动(Zig)

vuejs-logo.png

数据驱动

Vue.js 的核心思想就是数据驱动。那么什么是数据驱动呢? 数据驱动就是视图由数据决定，数据作为主动。如我们谈到TDD 测试驱动开发，也就是以测试为主动开发。只需我们定义好了视图与数据的关系，那么我们前台开发人员即可以更专注数据。无需花更多时间在数据升级后如何去升级视图。接下我们就去实现一个通过模板将数据生成为 DOM 的过程。其实我们先研究的就是所谓单向绑定，随后我们再谈双向绑定。

<div id="app">    <div>{{message}}</div></div>

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

上面的代码可能是我们在学习 vuejs 时，第一个接触的 vue 的代码，实现第一个 vue 应用， 用 data 的 message 来替换 {{message}} 。
下面我们用代码来实现一下上面功能，我们先将注意力放置如何解析模板获取占位符，而后将其进行替换。

const bracketReg = /\{\{(.+?)\}\}/gconst appNode = document.querySelector("#app");let data = {    message: "hello zidea"}

首先我们需要得到 dom 元素，可以通过 querySelector 获取 dom 元素，querySelector 让我们远离 jquery，尽管还是很怀念 jquery 给我们带来惊喜，但是昨天毕竟已经是昨天了。别来 jquery 了，尽管时常还会不知不觉用到他。

const copyAppNode = appNode.cloneNode(true)

由于我们节点是引用类型，所以我们使用 cloneNode(ture)复制出一份，而后在复制出节点上进行操作。而后就开始写 compile 函数，compile 接收 dom 元素和数据 data 作为参数，而后通过正则表达式将 textNode 的占位符进行替换。

function compile(template, data) {    let children = template.childNodes;    //NodeList(3) [text, div, text]    children.forEach(element => {        let type = element.nodeType;        if (type == 3) { // text node case            let content = element.nodeValue;            console.log(content)            content = content.replace(bracketReg, function (_, g) {                // console.log(g)                const key = g.trim()                const value = data[key]                return value            })            element.nodeValue = content;        } else if (type == 1) {            compile(element, data);        }    });}

而后调用函数 compile 对dom 元素的中文本进行替换，过程这里可以了解为编译，而后编译后的节点替换原有的节点。这里用了需要 native js 方法，大家平常写多了 react 、vue 可能都很少写 native js 除了解决少量逻辑时会用到 native js。

compile(copyAppNode, data);console.log(app)app.parentNode.replaceChild(app, copyAppNode)

const bracketReg = /\{\{(.+?)\}\}/gfunction compile(template, data) {    let children = template.childNodes;    //NodeList(3) [text, div, text]    children.forEach(element => {        let type = element.nodeType;        if (type == 3) { // text node case            let content = element.nodeValue;            console.log(content)            content = content.replace(bracketReg, function (_, g) {                // console.log(g)                const key = g.trim()                const value = data[key]                return value            })            element.nodeValue = content;        } else if (type == 1) {            compile(element, data);        }    });}

接下来我们工作就是，整理代码将将我们代码写的更像点 vue

class Zig {    constructor(options) {        this._el = options.el;        this._data = options.data;        this.$el = this._templateDOM = document.querySelector(this._el);        this._parent = this._templateDOM.parentNode;        //将数据渲染到界面上        this.render();    }    //将模板和数据编译为 html     render() {        this.compile();    }    //编译将模板和数据结合得到真正的 DOM    compile() {        let htmlDOM = this._templateDOM.cloneNode(true);        compile(htmlDOM, this._data);        this.update(htmlDOM);    }    //将 DOM 挂载到页面的元素    update(htmlDOM) {        this._parent.replaceChild(htmlDOM, document.querySelector("#app"))    }}

const app = new Zig({    el: "#app",    data: {        message: "hello zidea"    }})

这里为什么叫 Zig 呢? Zi 源于 zidea 而 g 源于 go，也就是这个我这个 zig 框架部门代码是通过 go 写 wasm 来提供性能，所以叫 Zig