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

Zoom 发布于2019-08-23 11:39 / 1333人阅读

摘要：上一篇写了实现框架的一些基本概念本篇用代码来实现一个完整的框架思考假设有如下代码，里面的会和试图中的一一映射，修改的值，会直接引起试图中对应数据的变化如何实现上述呢回想下这篇讲的观察者模式和数据监听主题是什么观察者是什么观察者何时订阅主题主

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

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

思考

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


{{name}}

如何实现上述 MVVM 呢？

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

主题（subject）是什么？

观察者（observer）是什么？

观察者何时订阅主题？

主题何时通知更新？

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

单向绑定

有如下 HTML


    {{name}}"is age is {{age}}

从上面 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    //正则或者可以写称/{{(.+?)}}/g
    let match
    while(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")return
    for(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 = newVal
                subject.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 = vm
        this.key = key
        this.cb = cb
        this.value = this.getValue()
    }
    getValue(){
        currentObserver = this
        let value = this.vm.data[this.key]
        currentObserver = null
        return 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.value
    let value = this.getValue()
    if(value !== oldVal){
        this.value = value
        this.cb.call(this.vm,value,oldVal)
    }
}

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

function observe(data){
    if(!data || typeof data !== "object")return
    for(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 = newVal
                subject.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 = vm
        this.key = key
        this.cb = cb
        this.value = this.getValue()
    }
    update(){
        let oldVal = this.value
        let value = this.getValue()
        if(value !== oldVal){
            this.value = value
            this.cb.call(this.vm,value,oldVal)
        }
    }
    subscribeTo(subject){
        if(!this.subjects[subject.id]){
            subject.addObserver(this)
            this.subjects[subject.id] = subject
        }
    }
    getValue(){
        currentObserver = this
        let value = this.vm.data[this.key]
        currentObserver = null
        return 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 = /{{([^}]*)}}/g
        let match
        while(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——观察者模式和数据监控

GPU云服务器云服务器 js 单向数据绑定原生js实现 ajax原生js实现原生js实现addclass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97279.html

【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇

摘要：模块则负责维护，以及各个模块间的调度思考题了解了的实现机制，你能否自己动手也试着用百来行代码实现一个库呢好了本教程第一部分设计篇就写到这里，具体请移步下一篇教学向行代码教你实现一个低配版的库代码篇我会用给出一版实现。适读人群本文适合对MVVM有一定了解（如有主流框架ng，vue等使用经验配合本文服用则效果更佳），虽然会用这类框架，但是对框架底层核心实现又不太清楚，或者能说出个所以然...

selfimpr 2019-08-21 12:01 评论0 收藏0
使用 Proxy 实现简单的 MVVM 模型

摘要：绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试，在中引入。挣扎了一段时间后谷歌团队宣布收回的提议，并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。绑定实现的历史绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

BetaRabbit 2019-08-01 17:17 评论0 收藏0
使用 Proxy 实现简单的 MVVM 模型

摘要：绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试，在中引入。挣扎了一段时间后谷歌团队宣布收回的提议，并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。绑定实现的历史绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

MarvinZhang 2019-08-20 18:26 评论0 收藏0
React 可视化开发工具 Shadow Widget 非正经入门（之四：flux、mvc、mvvm

摘要：是分发器，是数据与逻辑处理器，会在注册针对各个命令字的响应回调函数。当按如下方式触发回调时，回调函数具备事件的特性。本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇解释 Shadow Widget 在 MVC、MVVM、Flux 框架之间如何做选择。 showImg(https://segmentfault.com/img/bVOODj?w=380&h...

msup 2019-08-20 17:16 评论0 收藏0