用原生 JS 实现 MVVM 框架2—

上一篇写了实现 MVVM 框架的一些基本概念

本篇用代码来实现一个完整的 MVVM 框架

思考

假设有如下代码，data里面的name会和试图中的{{name}}——一一映射，修改data的值，会直接引起试图中对应数据的变化

<body>
<div id='app'>{{name}}</div>
<script>
function MVVM(){//todo...
}
var vm = new MVVM({el:'#app',data:{name:'zhangsan'}
})
</script>
</body>

如何实现上述 MVVM 呢？

回想下这篇讲的观察者模式和数据监听：

主题（subject）是什么？
观察者（observer）是什么？
观察者何时订阅主题？
主题何时通知更新？

简单回答下：
上面例子中，主题应该是data的name属性，观察者是试图里的{{name}}，当一开始执行 MVVM 初始化（根据el解析模板发现{{name}}）的时候订阅主题，当data.name发生改变的时候，通知观察者更新内容，我们可以在一开始监控data.name，当用户修改data.name的时候调用主题的subject.ontify。

单向绑定

有如下 HTML

<div id="app"><h1>{{name}}'is age is {{age}}</h1>
</div>

从上面 HTML 中我们看出，操作的节点是div#app，需要的数据是name和age，所以实例化 MVVM 可以需要传递两个参数element和data

let vm = MVVM({element:'#app',data:{name:'zhangsan',age:20}
})
setInterval(function(){vm.data.age++
},2000)

我们 MVVM 的构造函数应该怎么写呢？我们只需要做两件事情：

我们需要观察这些数据，当以后这些数据变动时，会做一些事情去调用
需要解析这个模板，把模板中的一些符号替换成对应的数据

初始化是必须做的，将实例化的数据存在自身上面，后面要用，这里就不叙述了。

class MVVM{constructor(options){init(options)observe(this.data)this.compile()}init(options){this.element = document.querySelector(options.element)this.data = options.data}
}

先看compile这个方法，它就是在编译页面中的节点，如果节点里还有孩子，需要再去遍历这些孩子，如果遍历到文本，就进行下一步文本替换。

compile(){    //虽然这里可以直接对节点进行遍历，但最好还是分开来比较好点this.traverse(this.el)
}
traverse(node){        //对节点进行遍历，如果遇到元素节点，用递归继续遍历直到遍历到都是文本为止，进行下一步页面渲染node.childNodes.forEach(childNode=>{if(childNode.nodeType === 1){this.traverse(childNode)}else if(childNode.nodeType === 3){this.renderText(childNode)}})
}
renderText(textNode){    //到这一步，已经获取到页面中的文本了，用正则去匹配let reg = /{{([^}]*)}}/g    //正则或者可以写称/{{(.+?)}}/glet matchwhile(match = reg.exec(textNode.textContent)){    //将匹配到的内容赋值给match，match是一个数组let raw = match[0]    let key = match[1].trim() textNode.textContent = textNode.textContent.replace(raw,this.data[key])    //页面渲染new Observer(this,key,function(val,oldVal){textNode.textContent = textNode.textContent.replace(oldVal,val)})    //创建一个观察者}
}

假设用户去修改数据时，那数据该如何进行实时的变动呢？

这里就引入了观察者和主题的概念，我们在解析的过程中创建一个个观察者，这个观察者就观察这个属性，解析到下个属性在创建一个观察者，并观察这个属性。

观察这个属性就是订阅这个主题，我们在this.compile()解析完后创建一个观察者，它有个方法，如果这个属性变动，我就会修改页面。

function observe(data){if(!data || typeof data !== 'object')returnfor(let key in data){let val = data[key]let subject = new Subject()    //创建主题if(typeof val === 'object'){observe(val)}Object.defineProperty(data,key,{configurable:true,enumerable:true,get(){return val},set(newVal){val = newValsubject.notify()}})}
}

问题是创建了观察者后什么时候去观察这个主题？

在创建后立刻观察这个主题，可是主题在哪？观察者有了，就是刚刚new的时候。主题是在observe遍历属性时创建的。主题存在在observe局部变量中，外面是访问不到的，那观察者怎样订阅这个主题呢？

思考到这里发现行不通了，就需要换种思路了。

当创建观察者时，会调用getValue()，它做什么事情呢，把我设置为场上权限最高的观察者，因为页面中有很多观察者，此时this.key，就是我要订阅的主题，当我调用this.vm.data[this.key]就等于调用了observe的get方法，因为刚刚我已经把观察者设置为场上权限最高者，此时currentObserver是存在的，这时观察者就开始订阅主题，订阅的之后在把权限去掉

let currentObserver = null
class Observer{constructor(vm,key,cb){this.subjects = {}this.vm = vmthis.key = keythis.cb = cbthis.value = this.getValue()}getValue(){currentObserver = thislet value = this.vm.data[this.key]currentObserver = nullreturn value}
}

通过currentObserver去订阅主题，因为在创建观察者时调用了getValue方法，把currentObserver设置为Observer，通过它去订阅主题

get:function(){if(currentObserver){currentObserver.subscribeTo(subject)}
}

主题的构造函数

let id = 0
class Subject{constructor(){this.id = id++this.observers = []}addObserver(observer){this.observers.push(observer)}notify(){this.observers.forEach(observer=>{observer.update()})}
}

添加观察者

subscribeTo(subject){if(!this.subjects[subject.id]){subject.addObserver(this)this.subjects[subject.id] = subject}
}

更新页面数据，旧值通过自身属性获取，新值通过getValue方法获取

update(){let oldVal = this.valuelet value = this.getValue()if(value !== oldVal){this.value = valuethis.cb.call(this.vm,value,oldVal)}
}

最后贴上完整的单向绑定的代码

function observe(data){if(!data || typeof data !== 'object')returnfor(let key in data){let val = data[key]let subject = new Subject()if(typeof val === 'object'){observe(val)}Object.defineProperty(data,key,{configurable:true,enumerable:true,get(){if(currentObserver){currentObserver.subscribeTo(subject)}return val},set(newVal){val = newValsubject.notify()}})}
}
let id = 0
class Subject{constructor(){this.id = id++this.observers = []}addObserver(observer){this.observers.push(observer)}notify(){this.observers.forEach(observer=>{observer.update()})}
}
let currentObserver = null
class Observer{constructor(vm,key,cb){this.subjects = {}this.vm = vmthis.key = keythis.cb = cbthis.value = this.getValue()}update(){let oldVal = this.valuelet value = this.getValue()if(value !== oldVal){this.value = valuethis.cb.call(this.vm,value,oldVal)}}subscribeTo(subject){if(!this.subjects[subject.id]){subject.addObserver(this)this.subjects[subject.id] = subject}}getValue(){currentObserver = thislet value = this.vm.data[this.key]currentObserver = nullreturn value}
}
class mvvm{constructor(options){this.init(options)observe(this.data)this.compile()}init(options){this.el = document.querySelector(options.el)this.data = options.data}compile(){this.traverse(this.el)}traverse(node){node.childNodes.forEach(childNode=>{if(childNode.nodeType === 1){this.traverse(childNode)}else if(childNode.nodeType === 3){this.renderText(childNode)}})}renderText(textNode){let reg = /{{([^}]*)}}/glet matchwhile(match = reg.exec(textNode.textContent)){let raw = match[0]let key = match[1].trim()textNode.textContent = textNode.textContent.replace(raw,this.data[key])new Observer(this,key,function(val,oldVal){textNode.textContent = textNode.textContent.replace(oldVal,val)})}}
}
let vm = new mvvm({el:'#app',data:{name:'uccs',age:20}
})
setInterval(function(){vm.data.age++
},2000)

本篇详细讲述了 MVVM 单项绑定的原理，下一篇讲述双向绑定

用原生 JS 实现 MVVM 框架MVVM 框架系列：
用原生 JS 实现 MVVM 框架1——观察者模式和数据监控

用原生 JS 实现 MVVM 框架2——单向绑定相关推荐

【原生js实现MVVM核心框架】
MVC是一种框架模式,也是在学习前端时最先接触的框架模式,而MVP与MVVM都是在MVC的基础之上演化而来,三者各有优劣,本文主要按照下面思维导图进行介绍. 一.mvc mvp mvvm设计理念 1. ...
原生JS封装运动框架。
//获取非行内样式function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return ...
原生JS修改html内容不影响绑定的点击事件请认准insertAdjacentHTML、insertAdjacentText方法
insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过是插入纯文本,参数相同参数说明: elementDOM.insertAdjacentHTML(wher ...
仿照vue实现简易的MVVM框架（一）
代码github地址: https://github.com/susantong/myMVVM 主要的方法有: compile 深度遍历前端界面的节点,将其复制进一个addQuene队列中 paser ...
单向绑定和双向绑定的区别
单向绑定,我改了js里面的数据然后页面的数据就变了.这是单向绑定. 双向绑定,我可以改变页面的数据然后改变js里面的内容,进而影响其它页面使用js数据的内容. 单向绑定当我们改view的时候,mode ...
SPARROW-JS 从0开始写 0依赖，原生JS框架
SPARROW-JS 前端JS框架变幻莫测,但原生js 接口不会变,所以以不变应万变,需要对前端js的原生api熟练掌握.为减少学习成本,将sparrow js 开放,支持大部分网站开发常用组件,代码 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
WEB前端从原生JavaScript到MVVM
在了解MVVM之前,我们先回顾一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回顾历史,由于网上就可查不少资料,但都篇幅很长,晦涩难懂. 所以我引用了廖雪峰老师网站总结的一段话,言简意骇, ...
滴滴重磅开源跨平台统一 MVVM 框架 Chameleon
近日,滴滴在 GitHub 上开源了跨端解决方案 Chameleon,简写 CML,中文名卡梅龙:中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案,具有易用.开发快.高性能等特点. ...

用原生 JS 实现 MVVM 框架2——单向绑定

思考

单向绑定

用原生 JS 实现 MVVM 框架2——单向绑定相关推荐

最新文章

热门文章