前面几节都是jquery界面方面的东西,从这节开始研究些数据方面的东西,最近vue比较火,使用的是MVVM模型。
MVVM由三部分组成:Model <=> ViewModel <=> View,当Model数据改变时,通知所有与Model关联的View进行数据更新。
以vuejs一个简单例子实现为例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
显示效果如下
现在模拟实现这一过程,ES语法以前也没怎么接触,在网上翻看大神的资料,看到一篇实现相对较完整的
https://segmentfault.com/a/1190000016236834
根据他的实现原理本文进行了简化,只模拟实现绑定过程(不能拿来用于生产环境),稍微有点javascript基础的应该都能看懂。
<body> <div id="app"> <p>{{ message }}</p> <p>{{ message1 }}</p> </div> <div id="log"></div> <script> class JMVVM { constructor(p_obj) { this.init(p_obj); } init(p_obj) { $("#log").append("获取绑定对象初始化数据信息</br>"); this.element = document.querySelector(p_obj.el); this.data = p_obj.data; $("#log").append("el:" + this.element.id + "</br>"); for (let key in this.data) { let val = this.data[key]; $("#log").append("key:" + key + "</br>"); $("#log").append("1、给对象创建get,set方法</br>"); let element=this.element; Object.defineProperty(this.data, key, { configurable: true, enumerable: true, get() { return val; }, set(newVal) { val = newVal; let reg = eval("/{{([^}]*) "+key+" }}/g"); // let reg1 = /{{([^}]*) +key+ }}/g; let match; $("#log").append("2、替换模板</br>"); element.childNodes.forEach(childNode=>{ while ((match = reg.exec(childNode.textContent))) { childNode.textContent=val; } }) // $("#log").append("2、替换模板</br>"); // for(let children in element.childNodes) // while ((match = reg.exec(children.textContent))) { // children.textContent=val; // } } });
//触发set this.data[key] =val; } } } </script> <script> // new Vue({ // el: "#app", // data: { // message: "Hello Vue.js!" // } // }); new JMVVM({ el: "#app", data: { message1: "Hello JMVVM.js!" } }); </script> </body>
执行结果如下
演示地址:www.jgui.com
注释:
ES6 新增了let
命令,用来声明局部变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效,而且有暂时性死区的约束。