下面我们就来简单的分析下我们这个函数的作用以及用法
//初始化 class MiniMVVM { constructor(options) { this.$el = options.el; this.$data = options.data; //判断是否有模板，如果有模板的话，就执行编译和数据劫持 if (this.$el) { //1,数据劫持 this.$data = (new Observer()).observe(this.$data); //2,模板编译 new TemplateCompile(this.$el, this); } } }
这里我们主要是为了获取我们模板信息以及数据
下一步我们来看一下我们数据劫持监听
//数据劫持类，响应式 class Observer { constructor(data) { this.data = data; this.observe(this.data); } observe(data) { //验证是否存在，是否是对象 if (!data || typeof data !== 'object') { return; } //使用proxy 代理拦截监听 let that = this; //初始化发布订阅 let emitter = new Emitter(); let handler = { get(target, key) { //递归当前target[key] 是否是对象 if (typeof target[key] === 'object' && target[key] !== null) { return new Proxy(target[key], handler); } //判断当前key下面的watcher是否存在 if (Emitter.watcher) { emitter.addSub(Emitter.watcher); } return target[key]; }, set(target, key, newVal) { if (target[key] !== newVal) { target[key] = newVal; emitter.notify(); } } } //创建proxy代理 let pdata = new Proxy(data, handler); return pdata; } }
Proxy语法和用例
let p = new Proxy(target, handler);
将目标和处理程序传递给Proxy构造函数，这样就创建了一个proxy对象。
//模板编译类 class TemplateCompile { constructor(el, vm) { //1,获取元素 this.el = (el.nodeType === 1 ? el : document.querySelector(el)); //2，获取vm实例 this.vm = vm; //如果元素存在，然后我们进行编译 if (this.el) { //获取模板 let fragment = this.nodeToFragment(this.el); //模板语法解析 this.cpmpile(fragment); //把最后生成的文档结构重新append到我们页面中去 this.el.appendChild(fragment); } } //获取模板 nodeToFragment(el) { let fragment = document.createDocumentFragment(); let firstChild = null; while (firstChild = el.firstChild) { fragment.appendChild(firstChild); } return fragment; } //解析文档碎片，编译模板中的变量 cpmpile(fragment) { //1，获取所有的子节点（包括元素解点） let childNodes = fragment.childNodes; //2,遍历循环每个节点 Array.from(childNodes).forEach(node => { //如果是元素节点 if (node.nodeType === 1) { //递归遍历子节点 this.cpmpile(node); //处理我们的元素节点 this.complieElement(node); } else { //处理我们的文本节点 this.complieText(node); } }) } //编译处理 complieText(nodeText) { //获取文本节点的内容 let exp = nodeText.textContent; //这里我们通过正则获取{{}}里面的数据 let re = /{{[^}]+}}/g; if (re.test(exp)) { //渲染页面数据 CompileTool.text(nodeText, this.vm, exp) } } //编译处理元素节点 complieElement(node) { console.log(node); //取出所有的属性 let attrs = node.attributes; //边里属性 检测是否具备‘-v’ Array.from(attrs).forEach(attr => { console.log(attr.name); if (attr.name.includes('v-')) { //如果是v-attr 这样的指令 我们去我们对应的寻找属性值字符串所对应的值 let exp = attr.value; let type = exp.split('-')[1]; //调用model指令对应的方法，渲染页面数据 CompileTool.model(node, this.vm, exp); } }) } }
这是我们模板类代码，这里主要是解析我们定义好的模板语法，下面我们再来看下我们观察者类
//观察者 class Watcher { constructor(vm, exp, callback) { this.vm = vm; this.exp = exp; this.callback = callback; //获取当前的值 this.oldValue = this.get(); } get() { //初始化发布订阅状态值 Emitter.watcher = this; //获取这个data上面的值 let val = CompileTool.getVal(this.vm, this.exp) //清空一下发布状态置 Emitter.watcher = null; //返回当前值 return val; } update() { //获取当前值 let newVal = CompileTool.getVal(this.vm, this.exp) //拿到旧的值 let oldVal = this.oldValue; //比较两次的值，是否保持一致，如果不一致就执行回调 if (newVal != oldVal) { this.callback(newVal); } } }
观察者见名思义，看过或者学习过设计模式的都应该知道观察者模式,这里就不做过多的解释，有兴趣的朋友可以百度一下。
剩下的就是我们的发布订阅
//发布订阅类 自定义事件 class Emitter { constructor() { this.subs = []; } //添加一个订阅 addSub(watcher) { this.subs.push(watcher); } //通知执行订阅 notify() { this.subs.forEach(v => v.update()); } }
通过以上不到300的行的代码，我们就实现了简单的双向数据绑定
有朋友会说你现在没有其他的文件以及配置，是的，不需要我们也是能实现数据的双向绑定，这里的剩下的webpack打包，webpack打包这个算是比较简单了，对于学习前端vue来说，那是再熟悉不过的了，这里就不过多的介绍了，下一章节我们在继续探讨webpack打包脚本详细介绍。
下面提供几个学习es地址大家可以去看一下，中英文都有。
ES5地址
中文版：中文地址
英文版：英文地址
ES6地址
中文版：中文地址
英文版：英文地址
ES6的浏览器兼容性问题:地址
非常感谢您能抽出时间来阅读，如果对你有所帮助，欢迎转发分享，您的转发分享就是对我最大的鼓励和支持。
有兴趣的朋友欢迎加入交流！！！
