首頁 >web前端 >js教程 >詳解Vue中的MVVM原理與實作方法

詳解Vue中的MVVM原理與實作方法

青灯夜游
青灯夜游轉載
2020-07-15 16:44:062728瀏覽

詳解Vue中的MVVM原理與實作方法

對Vue中的MVVM原理解析與實作

首先你對Vue需要有一定的了解,知道MVVM。這樣才能更有助於你順利的完成下面原理的閱讀學習和編寫

#下面由我阿巴阿巴的詳細走一遍Vue中MVVM原理的實現,這篇文章大家可以學習到:

1.Vue資料雙向綁定核心程式碼模組以及實作原理

2.訂閱者-發布者模式是如何做到讓資料驅動視圖、視圖驅動資料再驅動視圖

#3.如何解析元素節點上的指令並且關聯訂閱者實作視圖更新

1、思路整理

實作的流程圖:

詳解Vue中的MVVM原理與實作方法

我們要實作一個類別MVVM簡單版本的Vue框架,就需要實作一下幾點:

1、實作一個資料監聽Observer,對資料物件的所有屬性進行監聽,資料發生變化可以取得到最新值通知訂閱者。

2、實作一個解析器Compile解析頁面節點指令,初始化視圖。

3、實作一個觀察者Watcher,訂閱資料變化同時綁定相關更新函數。並將自己放入觀察者集合Dep中。 Dep是Observer和Watcher的橋樑,資料改變通知到Dep,然後Dep通知對應的Watcher去更新視圖。

2、實作

#以下採用ES6的寫法,比較簡潔,所以大概在300多行程式碼實現了一個簡單的MVVM框架

1、實作html頁面

#按Vue的寫法在頁面定義好一些資料跟指令,引入了兩個JS文件。先實例化一個MVue的對象,傳入我們的el,data,methods這些參數。待會再看Mvue.js檔案是什麼?

html

<body>
  <div id="app">
    <h2>{{person.name}} --- {{person.age}}</h2>
    <h3>{{person.fav}}</h3>
    <h3>{{person.a.b}}</h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <h3>{{msg}}</h3>
    <div v-text="msg"></div>
    <div v-text="person.fav"></div>
    <div v-html="htmlStr"></div>
    <input type="text" v-model="msg">
    <button v-on:click="click111">按钮on</button>
    <button @click="click111">按钮@</button>
  </div>
  <script src="./MVue.js"></script>
  <script src="./Observer.js"></script>
  <script>
    let vm = new MVue({
      el: &#39;#app&#39;,
      data: {
        person: {
          name: &#39;星哥&#39;,
          age: 18,
          fav: &#39;姑娘&#39;,
          a: {
            b: &#39;787878&#39;
          }
        },
        msg: &#39;学习MVVM实现原理&#39;,
        htmlStr: &#39;<h4>大家学的怎么样</h4>&#39;,
      },
      methods: {
        click111() {
          console.log(this)
          this.person.name = &#39;学习MVVM&#39;
          // this.$data.person.name = &#39;学习MVVM&#39;
        }
      }
    })
  </script>

</body>

#2、實作解析器與觀察者

##MVue .js

// 先创建一个MVue类,它是一个入口
Class MVue {
    construction(options) {
        this.$el = options.el
        this.$data = options.data
        this.$options = options
    }
    if(this.$el) {
        // 1.实现一个数据的观察者     --先看解析器,再看Obeserver
        new Observer(this.$data)
        // 2.实现一个指令解析器
        new Compile(this.$el,this)
    }
}
?
// 定义一个Compile类解析元素节点和指令
class Compile {
    constructor(el,vm) {
        // 判断el是否是元素节点对象,不是就通过DOM获取
        this.el = this.isElementNode(el) ? el : document.querySelector(el)
        this.vm = vm
        // 1.获取文档碎片对象,放入内存中可以减少页面的回流和重绘
        const fragment = this.node2Fragment(this.el)

        // 2.编辑模板
        this.compile(fragment)

        // 3.追加子元素到根元素(还原页面)
        this.el.appendChild(fragment)
    }

    // 将元素插入到文档碎片中
    node2Fragment(el) {
        const f = document.createDocumnetFragment();
        let firstChild
        while(firstChild = el.firstChild) {
            // appendChild
            // 将已经存在的节点再次插入,那么原来位置的节点自动删除,并在新的位置重新插入。
            f.appendChild(firstChild)
        }
        // 此处执行完,页面已经没有元素节点了
        return f
    }

    // 解析模板
    compile(frafment) {
        // 1.获取子节点
        conts childNodes = fragment.childNodes;
        [...childNodes].forEach(child => {
            if(this.isElementNode(child)) {
                // 是元素节点
                // 编译元素节点
                this.compileElement(child)
            } else {
                // 文本节点
                // 编译文本节点
                this.compileText(child)
            }

            // 嵌套子节点进行遍历解析
            if(child.childNodes && child.childNodes.length) {
                this.compule(child)
            }
        })
    }

    // 判断是元素节点还是属性节点
    isElementNode(node) {
        // nodeType属性返回 以数字值返回指定节点的节点类型。1-元素节点 2-属性节点
        return node.nodeType === 1
    }

    // 编译元素节点
    compileElement(node) {
        // 获得元素属性集合
        const attributes = node.attributes
        [...attributes].forEach(attr => {
            const {name, value} = attr
            if(this.isDirective(name)) { // 判断属性是不是以v-开头的指令
                // 解析指令(v-mode v-text v-on:click 等...)
                const [, dirctive] = name.split('-')
                const [dirName, eventName] = dirctive.split(':')
                // 初始化视图 将数据渲染到视图上
                compileUtil[dirName](node, value, this.vm, eventName)

                // 删除有指令的标签上的属性
                node.removeAttribute('v-' + dirctive)
            } else if (this.isEventName(name)) { //判断属性是不是以@开头的指令
                // 解析指令
                let [, eventName] = name.split('@')
                compileUtil['on'](node,val,this.vm, eventName)

                // 删除有指令的标签上的属性
                node.removeAttribute('@' + eventName)
            } else if(this.isBindName(name)) { //判断属性是不是以:开头的指令
                // 解析指令
                let [, attrName] = name.split(':')
                compileUtil['bind'](node,val,this.vm, attrName)

                // 删除有指令的标签上的属性
                node.removeAttribute(':' + attrName)
            }
        })
    }

    // 编译文本节点
    compileText(node) {
        const content = node.textContent
        if(/\{\{(.+?)\}\}/.test(content)) {
            compileUtil['text'](node, content, this.vm)
        }
    }

    // 判断属性是不是指令
    isDirective(attrName) {
        return attrName.startsWith('v-')
    }
    // 判断属性是不是以@开头的事件指令
    isEventName(attrName) {
        return attrName.startsWith('@')
    }
    // 判断属性是不是以:开头的事件指令
    isBindName(attrName) {
        return attrName.startsWith(':')
    }
}
?
?
// 定义一个对象,针对不同指令执行不同操作
const compileUtil = {
    // 解析参数(包含嵌套参数解析),获取其对应的值
    getVal(expre, vm) {
        return expre.split('.').reduce((data, currentVal) => {
            return data[currentVal]
        }, vm.$data)
    },
    // 获取当前节点内参数对应的值
    getgetContentVal(expre,vm) {
        return expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {
            return this.getVal(arges[1], vm)
        })
    },
    // 设置新值
    setVal(expre, vm, inputVal) {
        return expre.split('.').reduce((data, currentVal) => {
            return data[currentVal] = inputVal
        }, vm.$data)
    },

    // 指令解析:v-test
    test(node, expre, vm) {
        let value;
        if(expre.indexOf('{{') !== -1) {
            // 正则匹配{{}}里的内容
            value = expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {

                // new watcher这里相关的先可以不看,等后面讲解写到观察者再回头看。这里是绑定观察者实现     的效果是通过改变数据会触发视图,即数据=》视图。
                // 没有new watcher 不影响视图初始化(页面参数的替换渲染)。
                // 订阅数据变化,绑定更新函数。
                new watcher(vm, arges[1], () => {
                    // 确保 {{person.name}}----{{person.fav}} 不会因为一个参数变化都被成新值
                    this.updater.textUpdater(node, this.getgetContentVal(expre,vm))
                })

                return this.getVal(arges[1],vm)
            })
        } else {
            // 同上,先不看
            // 数据=》视图
            new watcher(vm, expre, (newVal) => {
            // 找不到{}说明是test指令,所以当前节点只有一个参数变化,直接用回调函数传入的新值
        this.updater.textUpdater(node, newVal)
          })

            value = this.getVal(expre,vm)
        }

        // 将数据替换,更新到视图上
        this.updater.textUpdater(node,value)
    },
    //指令解析: v-html
    html(node, expre, vm) {
        const value = this.getVal(expre, vm)

        // 同上,先不看
        // 绑定观察者 数据=》视图
        new watcher(vm, expre (newVal) => {
            this.updater.htmlUpdater(node, newVal)
        })

        // 将数据替换,更新到视图上
        this.updater.htmlUpdater(node, newVal)
    },
    // 指令解析:v-mode
    model(node,expre, vm) {
        const value = this.getVal(expre, vm)

        // 同上,先不看
        // 绑定观察者 数据=》视图
        new watcher(vm, expre, (newVal) => {
            this.updater.modelUpdater(node, newVal)
        })

        // input框  视图=》数据=》视图
        node.addEventListener('input', (e) => {
            //设置新值 - 将input值赋值到v-model绑定的参数上
            this.setVal(expre, vm, e.traget.value)
        })
        // 将数据替换,更新到视图上
        this.updater.modelUpdater(node, value)
    },
    // 指令解析: v-on
    on(node, expre, vm, eventName) {
        // 或者指令绑定的事件函数
        let fn = vm.$option.methods && vm.$options.methods[expre]
        // 监听函数并调用
        node.addEventListener(eventName,fn.bind(vm),false)
    },
    // 指令解析: v-bind
    bind(node, expre, vm, attrName) {
        const value = this.getVal(expre,vm)
        this.updater.bindUpdate(node, attrName, value)
    }

// updater对象,管理不同指令对应的更新方法
updater: {
        // v-text指令对应更新方法
        textUpdater(node, value) {
            node.textContent = value
        },
        // v-html指令对应更新方法
        htmlUpdater(node, value) {
            node.innerHTML = value
        },
        // v-model指令对应更新方法
        modelUpdater(node,value) {
            node.value = value
        },
        // v-bind指令对应更新方法
        bindUpdate(node, attrName, value) {
            node[attrName] = value
        }
    },
}

3、實作資料劫持監聽

我們有了資料監聽,還需要一個觀察者可以觸發更新視圖。因為需要資料改變才能觸發更新,所有還需要一個橋樑Dep收集所有觀察者(觀察者集合),連接Observer和Watcher。資料改變通知Dep,Dep通知對應的觀察者進行視圖更新。

Observer.js

// 定义一个观察者
class watcher {
    constructor(vm, expre, cb) {
        this.vm = vm
        this.expre = expre
        this.cb =cb
        // 把旧值保存起来
        this.oldVal = this.getOldVal()
    }
    // 获取旧值
    getOldVal() {
        // 将watcher放到targe值中
        Dep.target = this
        // 获取旧值
        const oldVal = compileUtil.getVal(this.expre, this.vm)
        // 将target值清空
        Dep.target = null
        return oldVal
    }
    // 更新函数
    update() {
        const newVal =  compileUtil.getVal(this.expre, this.vm)
        if(newVal !== this.oldVal) {
            this.cb(newVal)
        }
    }
}
// 定义一个观察者集合
class Dep {
    constructor() {
        this.subs = []
    }
    // 收集观察者
    addSub(watcher) {
        this.subs.push(watcher)
    }
    //通知观察者去更新
    notify() {
        this.subs.forEach(w => w.update())
    }
}
// 定义一个Observer类通过gettr,setter实现数据的监听绑定
class Observer {
    constructor(data) {
        this.observer(data)
    }

    // 定义函数解析data,实现数据劫持
    observer (data) {
        if(data && typeof data === 'object') {
            // 是对象遍历对象写入getter,setter方法
            Reflect.ownKeys(data).forEach(key => {
                this.defineReactive(data, key, data[key]);
            })
        }
    }

    // 数据劫持方法
    defineReactive(obj,key, value) {
        // 递归遍历
        this.observer(data)
        // 实例化一个dep对象
        const dep = new Dep()
        // 通过ES5的API实现数据劫持
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: false,
            get() {
                // 当读当前值的时候,会触发。
                // 订阅数据变化时,往Dep中添加观察者
                Dep.target && dep.addSub(Dep.target)
                return value
            },
            set: (newValue) => {
                // 对新数据进行劫持监听
                this.observer(newValue)
                if(newValue !== value) {
                    value = newValue
                }
                // 告诉dep通知变化
                dep.notify()
            }
        })
    }

}
推薦教學:《

JavaScript影片教學

以上是詳解Vue中的MVVM原理與實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除