审核中~
溜忙之道
首页
溜忙手册
offer之道
项目Git
写文章
登录
·
注册
登录
没有账号,去注册
注册
已有账号,去登录
博客
50行代码的MVVM,感受闭包的艺术
南易_站长
阅读量:3773
关注
50行代码的MVVM,感受闭包的艺术
我们来看一下最小化的 MVVM 的源码 ``` class Vue{ constructor(opt){ this.opt = opt this.observe(opt.data) let root = document.querySelector(opt.el) this.compile(root) } // 为响应式对象 data 里的每一个 key 绑定一个观察者对象 observe(data){ Object.keys(data).forEach(key => { let obv = new Observer() data["_"+key] = data[key] // 通过 getter setter 暴露 for 循环中作用域下的 obv,闭包产生 Object.defineProperty(data, key, { get(){ Observer.target && obv.addSubNode(Observer.target); return data['_'+key] }, set(newVal){ obv.update(newVal) data['_'+key] = newVal } }) }) } // 初始化页面,遍历 DOM,收集每一个key变化时,随之调整的位置,以观察者方法存放起来 compile(node){ [].forEach.call(node.childNodes, child =>{ if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){ let key = RegExp.$1.trim() child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) Observer.target = child this.opt.data[key] Observer.target = null } else if (child.firstElementChild) this.compile(child) }) } } // 常规观察者类 class Observer{ constructor(){ this.subNode = [] } addSubNode(node){ this.subNode.push(node) } update(newVal){ this.subNode.forEach(node=>{ node.innerHTML = newVal }) } } 复制代码 ``` #### 【重点分析】接下来梳理一下这段代码的思路,顺便了解一下 MVVM 闭包的艺术: * [observe 函数]:首先我们会对需要响应式的 `data` 对象进行 for 循环遍历,为 `data` 的每一个 `key` 映射一个观察者对象 * 在 ES6 中,for 循环每次执行,都可以形成闭包,因此这个观察者对象就存放在闭包中 * 闭包形成的本质是 **内层作用域中堆地址暴露**,这里我们巧妙的用 getter/setter 函数暴露了 for 循环里的观察者 * [compile 函数]:我们从根节点向下遍历 DOM,遇到 mustache 形式的文本,则映射成 data.key 对应的值,同时记录到观察者中 * 当遍历到 {{xxx}} 形式的文本,我们正则匹配出其中的变量,将它替换成 data 中的值 * 为了满足后续响应式的更新,将该节点存储在 key 对应的观察者对象中,我们用 getter 函数巧妙的操作了闭包 * 在页面初次渲染之后,后续的 `eventLoop` 中,如果修改了 `key` 的值,实际会通过 setter 触发观察者的 update 函数,完成响应式更新 ```
姓名
{{name}}
年龄
{{age}}
```
评论
表情
发送
0
评论