理解mvvm原理

最新推荐文章于 2024-05-13 20:59:10 发布
最新推荐文章于 2024-05-13 20:59:10 发布
阅读量1.2w 收藏 15
点赞数 3
分类专栏： javascript知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33768153/article/details/79257763
版权 
通过以下demo，深入理解mvvm的原理，实现数据劫持，数据双向绑定，数据驱动页面，数据双向绑定，计算属性computed！
注意：为了方便理解，我会在每个函数内部把执行顺序和执行思路用文字注释，望知晓...

基本文档结构

  • HTML

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vm的demo</title>
</head>
<body>
<div id="app">
    <div>a的值是：{{a.a}}</div>
    <p>b的值是：{{b}}</p>
    <input type="text" v-model="b">
    <p>computed: {{hello}}</p>
</div>
<script src="./lvm2.js"></script>
<script>
var lvm = new Lvm({
    el: '#app',
    data: {
        a: {a:3},
        b: '2',
        c: 10
    },
    computed: {
        hello (){
            console.log('computed')
            return this.c + this.b
        }
    }
})
</script>
</body>
</html>

    ​

  • 新建js文件 

    //新建一个vm对象
function Lvm (opt = {}) {}

    ​

    ​

初始化对象实现

  • 1.对象初始化

  • 2.数据劫持

  • 3.this代理data对象 

    function Lvm (opt = {}) {
//1.拿到opt对象，保存到this下边
this.$options = opt;
var data = this._data = this.$options.data;
//2.进行数据劫持
createObj (data)
//3.this代理this._data对象
for (let key in data) {
    Object.defineProperty(this, key, {
        enumerable: true,
        get: () => this._data[key],
        set: (newVal) =>this._data[key] = newVal
    })
}
}
/**
* @desc 数据劫持方法
* 为了方便递归调用Objserver方法封装，返回值是Objserver的一个实例
*/
function createObj (data) {
if (typeof data !== 'object') return;
return new Objserver(data)
}

/**
* @desc 创建对象函数
* @param {object} data 创建对象时传入的data对象
* 1.遍历data对象，拿到左右的对象名和属性值
* 2.使用Object.defineProperty创建对象
* 3.加入遍历出来的val是一个对象，调用自己，实现递归调用
* Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
*/
function Objserver (data) {
for(let key in data) {
    let val  = data[key];
    createObj(val) 
    //使用Object.defineProperty 进行数据劫持
    Object.defineProperty(data, key, {
        enumerable: true,
        get: function () {
            return val
        },
        set: function (newVal) {
            //如果用户输入的新值和原先的值完全相同，则不进行操作直接返回
            if (newVal === val) return;
            val = newVal
            //跟新属性值以后重新监听数据
            createObj(val) 
        }
    })
}
}

实现页面渲染

  • 1.dom移动到内存
  • 2.对字符模板替换
  • 3.页面重绘
function Lvm (opt = {}) {
    //1.拿到opt对象，保存到this下边
    this.$options = opt;
    var data = this._data = this.$options.data;
    //2.进行数据劫持
    createObj (data)
    //3.this代理this._data对象
    for (let key in data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get: () => this._data[key],
            set: newVal =>this._data[key] = newVal
        })
    }
    //4.编译页面
    new Compile(this.$options.el, this);
}
/**
 * @desc 数据劫持方法
 */
function createObj (data) {
    if (typeof data !== 'object') return;
    return new Objserver(data)
}

/**
 * @desc 创建对象函数
 * @param {object} data 创建对象时传入的data对象
 * 1.遍历data对象，拿到左右的对象名和属性值
 * 2.使用Object.defineProperty创建对象
 * 3.加入遍历出来的val是一个对象，调用自己，实现递归调用
 * Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
 */
function Objserver (data) {

    for(let key in data) {
        let val  = data[key];

        createObj(val) 

        //使用Object.defineProperty 进行数据劫持
        Object.defineProperty(data, key, {
            enumerable: true,
            get: function () {
                return val
            },
            set: function (newVal) {
                //如果用户输入的新值和原先的值完全相同，则不进行操作直接返回
                if (newVal === val) return;
                val = newVal
                //跟新属性值以后重新监听数据
                createObj(val) 
            }
        })
    }
}

/**
 * @desc 编译模板
 * @param {string} el 包裹元素选择器
 * @param {object} vm 我们的lvm实例对象
 * 
 * 1.拿到我们初始化的el元素
 * 2.新建一个文档随便，用来缓存dom
 * 3.遍历el元素的所有子元素节点，添加到文档碎片
 * 4.进行表达式里的值替换
 * 5.添加到dom，更新页面
 */
function Compile (el, vm) {
    vm.$el = document.querySelector(el);
    var frag = document.createDocumentFragment(), node = null;
    //把app的dom移动到内存中进行操作
    while(node = vm.$el.firstChild) {
        frag.appendChild(node)
    }
    //替换变量
    replice (frag)


    /**
     * @descrtion 替换内容
     * @param  {dom} node html dom标签
     * @return {null}   没有返回值
     *
     * 1.传入所有的dom的元素节点
     * 2.使用Array.form转换为数组以后遍历处理
     * 3.新建reg对象，匹配和捕获表达式里的
     * 4.拿到每一个节点的文本节点(如果是元素，则递归调用自己)
     * 5.通过nodeType判断是不是文本节点，并且使用正则对象验证是否包含大括号表达式
     * 6.如果有大括号表达式，则进行替换赋值操作
     * 7.数据监听(接下来实现)
     * 8.数据双向绑定(稍后实现)
     * 9.添加到dom
     */
    function replice (node) {
        // 把node类数组转换为数组遍历
        Array.from(node.childNodes).forEach(item => {
            var reg = /\{\{(.*)\}\}/,
                text = item.textContent;//拿到文本节点
            if(item.nodeType == 3 && reg.test(text)) {
                reg.exec(text)
                var key, arr = RegExp.$1.split('.'), //如果拿到的是对象的深层属性(a.a.b)，在下边进行遍历 
                    val = vm;//这里设置为vm => this 对象以后就可以直接访问得到数据

                arr.forEach(key => {
                    //得到数据 遍历拿到对象属性的属性，主要操作多层数据
                    val = val[key]
                })
                //替换赋值操作
                item.textContent = text.replace(/\{\{(.*)\}\}/, val)
                val = null;
            }
            //如果node不是文本节点，继续循环
            if (item.childNodes) {
                replice (item)
            }
        })
    }
    //把操作过的数据添加到dom
    vm.$el.appendChild(frag)
    frag = null
}

实现数据监听动态更新页面

  • 模拟监听事件池
  • 监听函数weacher

function Lvm (opt = {}) {
    //1.拿到opt对象，保存到this下边
    this.$options = opt;
    var data = this._data = this.$options.data;
    //2.进行数据劫持
    createObj (data)
    //3.this代理this._data对象
    for (let key in data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get: () => this._data[key],
            set: newVal =>this._data[key] = newVal
        })
    }
    //4.编译页面
    new Compile(this.$options.el, this);
}
/**
 * @desc 数据劫持方法
 */
function createObj (data) {
    if (typeof data !== 'object') return;
    return new Objserver(data)
}

/**
 * @desc 创建对象函数
 * @param {object} data 创建对象时传入的data对象
 * 1.遍历data对象，拿到左右的对象名和属性值
 * 2.使用Object.defineProperty创建对象
 * 3.加入遍历出来的val是一个对象，调用自己，实现递归调用
 * 4.新建一个事件池dep
 * Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
 */
function Objserver (data) {
    let dep = new Dep();
    for(let key in data) {
        let val  = data[key];

        createObj(val) 

        //使用Object.defineProperty 进行数据劫持
        Object.defineProperty(data, key, {
            enumerable: true,
            get: function () {
                //如果存在target属性的话添加到事件池dep
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set: function (newVal) {
                //如果用户输入的新值和原先的值完全相同，则不进行操作直接返回
                if (newVal === val) return;
                val = newVal
                //跟新属性值以后重新监听数据
                createObj(val) 
                //调用事件池通知方法 提醒更新时视图
                dep.notify()
            }
        })
    }
}

/**
 * @desc 编译模板
 * @param {string} el 包裹元素选择器
 * @param {object} vm 我们的lvm实例对象
 * 
 * 1.拿到我们初始化的el元素
 * 2.新建一个文档随便，用来缓存dom
 * 3.遍历el元素的所有子元素节点，添加到文档碎片
 * 4.进行表达式里的值替换
 * 5.添加到dom，更新页面
 */
function Compile (el, vm) {
    vm.$el = document.querySelector(el);
    var frag = document.createDocumentFragment(), node = null;
    //把app的dom移动到内存中进行操作
    while(node = vm.$el.firstChild) {
        frag.appendChild(node)
    }
    //替换变量
    replice (frag)


    /**
     * @descrtion 替换内容
     * @param  {dom} node html dom标签
     * @return {null}   没有返回值
     *
     * 1.传入所有的dom的元素节点
     * 2.使用Array.form转换为数组以后遍历处理
     * 3.新建reg对象，匹配和捕获表达式里的
     * 4.拿到每一个节点的文本节点(如果是元素，则递归调用自己)
     * 5.通过nodeType判断是不是文本节点，并且使用正则对象验证是否包含大括号表达式
     * 6.如果有大括号表达式，则进行替换赋值操作
     * 7.数据监听(接下来实现)
     * 8.数据双向绑定(稍后实现)
     * 9.添加到dom
     */
    function replice (node) {

        // 把node类数组转换为数组遍历
        Array.from(node.childNodes).forEach(item => {
            var reg = /\{\{(.*)\}\}/,
                text = item.textContent;//拿到文本节点
            if(item.nodeType == 3 && reg.test(text)) {
                reg.exec(text)
                var key, arr = RegExp.$1.split('.'), //如果拿到的是对象的深层属性(a.a.b)，在下边进行遍历 
                    val = vm;//这里设置为vm => this 对象以后就可以直接访问得到数据

                arr.forEach(key => {
                    //得到数据 遍历拿到对象属性的属性，主要操作多层数据
                    val = val[key]
                })
                //创建监听小函数
                new Wetcher(vm, arr, function(newVal){
                    item.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
                })
                //替换赋值操作
                item.textContent = text.replace(/\{\{(.*)\}\}/, val)
                val = null;
            }
            //如果node不是文本节点，继续循环
            if (item.childNodes) {
                replice (item)
            }
        })
    }
    //把操作过的数据添加到dom
    vm.$el.appendChild(frag)
    frag = null
}

/**
 * 新建一个dep 实现模拟事件池
 * subs 保存所有需要监听的对象
 * addSub 将监听事件添加到事件池
 * notify当数据发生变化的时候调用，通知更新数据
 * notify触发的时候，遍历执行subs里的所有事件
 */
function Dep () {
    this.subs = [];
}

/**
 * @desc 事件池添加方法
 * @param {Function} fn 添加事件到事件池
 */
Dep.prototype.addSub = function (fn) {
    this.subs.push(fn)
}
/**
 * @desc 数据更新时刷新页面
 * @return {[type]} [description]
 */
Dep.prototype.notify = function () {
    this.subs.forEach(fn => {
        fn.update()
    })
}

/**
 * @desc 监听小函数 每个需要监听的对象的实例对象
 * @param {object}   vm  当前this的实例
 * @param {string}   exp 监听的属性 a|a.a 
 * @param {Function} fn  数据更改以后执行的回调函数
 *
 * 1.我们在创建一个wecher监听对象的实例，传入上述的参数
 * 2.为了方便加入事件池，在初始化函数的过程中给Dep一个target属性，
 * 然后在触发属性的get方法，在哪里判断是否存在target属性，存在就加入，不存在则不操作
 * 3.在操作完成以后Dep.target属性制空
 */
function Wetcher (vm, exp, fn){
    this.fn = fn;
    this.vm = vm;
    this.exp = exp;
    Dep.target = this;
    let val = this.vm;
    let arr = this.exp;

    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })

    Dep.target = null;
}
/**
 * @description 监听小函数在数据变更以后调用
 * @return {[type]} [description]
 * 1.在这里我们拿到更新后的数据
 * 2.调用调用回调函数fn，并将新值传入
 */
Wetcher.prototype.update = function () {
    let val = this.vm
    let arr = this.exp
    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })
    //执行创建实例时的回调函数，并且传入新值替换
    this.fn(val)
}

实现数据双向绑定

  • input赋值
  • input绑定事件
  • input的value更新的时候更新数据

function Lvm (opt = {}) {
    //1.拿到opt对象，保存到this下边
    this.$options = opt;
    var data = this._data = this.$options.data;
    //2.进行数据劫持
    createObj (data)
    //3.this代理this._data对象
    for (let key in data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get: () => this._data[key],
            set: newVal =>this._data[key] = newVal
        })
    }
    //4.编译页面
    new Compile(this.$options.el, this);
}
/**
 * @desc 数据劫持方法
 */
function createObj (data) {
    if (typeof data !== 'object') return;
    return new Objserver(data)
}

/**
 * @desc 创建对象函数
 * @param {object} data 创建对象时传入的data对象
 * 1.遍历data对象，拿到左右的对象名和属性值
 * 2.使用Object.defineProperty创建对象
 * 3.加入遍历出来的val是一个对象，调用自己，实现递归调用
 * 4.新建一个事件池dep
 * Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
 */
function Objserver (data) {
    let dep = new Dep();
    for(let key in data) {
        let val  = data[key];

        createObj(val) 

        //使用Object.defineProperty 进行数据劫持
        Object.defineProperty(data, key, {
            enumerable: true,
            get: function () {
                //如果存在target属性的话添加到事件池dep
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set: function (newVal) {
                //如果用户输入的新值和原先的值完全相同，则不进行操作直接返回
                if (newVal === val) return;
                val = newVal
                //跟新属性值以后重新监听数据
                createObj(val) 
                //调用事件池通知方法 提醒更新时视图
                dep.notify()
            }
        })
    }
}

/**
 * @desc 编译模板
 * @param {string} el 包裹元素选择器
 * @param {object} vm 我们的lvm实例对象
 * 
 * 1.拿到我们初始化的el元素
 * 2.新建一个文档随便，用来缓存dom
 * 3.遍历el元素的所有子元素节点，添加到文档碎片
 * 4.进行表达式里的值替换
 * 5.添加到dom，更新页面
 */
function Compile (el, vm) {
    vm.$el = document.querySelector(el);
    var frag = document.createDocumentFragment(), node = null;
    //把app的dom移动到内存中进行操作
    while(node = vm.$el.firstChild) {
        frag.appendChild(node)
    }
    //替换变量
    replice (frag)


    /**
     * @descrtion 替换内容
     * @param  {dom} node html dom标签
     * @return {null}   没有返回值
     *
     * 1.传入所有的dom的元素节点
     * 2.使用Array.form转换为数组以后遍历处理
     * 3.新建reg对象，匹配和捕获表达式里的
     * 4.拿到每一个节点的文本节点(如果是元素，则递归调用自己)
     * 5.通过nodeType判断是不是文本节点，并且使用正则对象验证是否包含大括号表达式
     * 6.如果有大括号表达式，则进行替换赋值操作
     * 7.数据监听(接下来实现)
     * 8.数据双向绑定(稍后实现)
     * 9.添加到dom
     */
    function replice (node) {

        // 把node类数组转换为数组遍历
        Array.from(node.childNodes).forEach(item => {
            var reg = /\{\{(.*)\}\}/,
                text = item.textContent;//拿到文本节点
            if(item.nodeType == 3 && reg.test(text)) {
                reg.exec(text)
                var key, arr = RegExp.$1.split('.'), //如果拿到的是对象的深层属性(a.a.b)，在下边进行遍历 
                    val = vm;//这里设置为vm => this 对象以后就可以直接访问得到数据

                arr.forEach(key => {
                    //得到数据 遍历拿到对象属性的属性，主要操作多层数据
                    val = val[key]
                })
                //创建监听小函数
                new Wetcher(vm, arr, function(newVal){
                    item.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
                })
                //替换赋值操作
                item.textContent = text.replace(/\{\{(.*)\}\}/, val)
                val = null;
            }
            //实现数据双向绑定 
            //思路：
            //首先判断如果是元素，是否存在v-model属性，（拿到所有的attribute，然后遍历判断）
            //如果不存在就不操作，如果存在（v-model）属性则进行如下操作
            //拿到属性，遍历对象拿到val，赋值给元素
            //给input元素绑定事件，在数据变化的时候那导致，然后重新赋值
            //因为这里赋值如果说嵌套层级较多的时候需要进行特殊处理，我偷懒，没有做，只做了一级的，
            if (item.nodeType == 1) {
                let attrs = item.attributes;
                let reg = /v\-model/;
                //循环遍历属性 看有没有v-model
                Array.from(attrs).forEach(attr => {
                    let name = attr.name;
                    let exp = attr.value.split('.');
                    if (reg.test(name)) {
                        let val = vm;

                        exp.forEach(k => {
                                val = val[k]
                            })
                        item.value = val;

                        //监听数据变化 更新input的值
                        new Wetcher(vm, exp, function(newVal){
                            item.value = newVal
                        })

                        item.addEventListener('input', function (e) {
                            let val = e.target.value;
                            //还没有想到多层级的数据怎么设置，后期学了再补
                            vm[exp] = val
                        })
                    }
                })
            }
            //如果node不是文本节点，继续循环
            if (item.childNodes) {
                replice (item)
            }
        })
    }
    //把操作过的数据添加到dom
    vm.$el.appendChild(frag)
    frag = null
}

/**
 * 新建一个dep 实现模拟事件池
 * subs 保存所有需要监听的对象
 * addSub 将监听事件添加到事件池
 * notify当数据发生变化的时候调用，通知更新数据
 * notify触发的时候，遍历执行subs里的所有事件
 */
function Dep () {
    this.subs = [];
}

/**
 * @desc 事件池添加方法
 * @param {Function} fn 添加事件到事件池
 */
Dep.prototype.addSub = function (fn) {
    this.subs.push(fn)
}
/**
 * @desc 数据更新时刷新页面
 * @return {[type]} [description]
 */
Dep.prototype.notify = function () {
    this.subs.forEach(fn => {
        fn.update()
    })
}

/**
 * @desc 监听小函数 每个需要监听的对象的实例对象
 * @param {object}   vm  当前this的实例
 * @param {string}   exp 监听的属性 a|a.a 
 * @param {Function} fn  数据更改以后执行的回调函数
 *
 * 1.我们在创建一个wecher监听对象的实例，传入上述的参数
 * 2.为了方便加入事件池，在初始化函数的过程中给Dep一个target属性，
 * 然后在触发属性的get方法，在哪里判断是否存在target属性，存在就加入，不存在则不操作
 * 3.在操作完成以后Dep.target属性制空
 */
function Wetcher (vm, exp, fn){
    this.fn = fn;
    this.vm = vm;
    this.exp = exp;
    Dep.target = this;
    let val = this.vm;
    let arr = this.exp;
    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })

    Dep.target = null;
}
/**
 * @description 监听小函数在数据变更以后调用
 * @return {[type]} [description]
 * 1.在这里我们拿到更新后的数据
 * 2.调用调用回调函数fn，并将新值传入
 */
Wetcher.prototype.update = function () {
    let val = this.vm
    let arr = this.exp
    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })
    //执行创建实例时的回调函数，并且传入新值替换
    this.fn(val)
}

实现computed

  • 新建一个initComputed函数
  • 获取computed的的值进行操作

function Lvm (opt = {}) {
    //1.拿到opt对象，保存到this下边
    this.$options = opt;
    var data = this._data = this.$options.data;
    //2.进行数据劫持
    createObj (data)
    //3.this代理this._data对象
    for (let key in data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get: () => this._data[key],
            set: newVal =>this._data[key] = newVal
        })
    }
    //计算属性初始化 必须在compile之前调用 否则无效 
    initComputed.call(this)

    //5.编译页面
    new Compile(this.$options.el, this);
}
/**
 * @desc 数据劫持方法
 */
function createObj (data) {
    if (typeof data !== 'object') return;
    return new Objserver(data)
}

/**
 * @desc 创建对象函数
 * @param {object} data 创建对象时传入的data对象
 * 1.遍历data对象，拿到左右的对象名和属性值
 * 2.使用Object.defineProperty创建对象
 * 3.加入遍历出来的val是一个对象，调用自己，实现递归调用
 * 4.新建一个事件池dep
 * Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
 */
function Objserver (data) {
    let dep = new Dep();
    for(let key in data) {
        let val  = data[key];

        createObj(val) 

        //使用Object.defineProperty 进行数据劫持
        Object.defineProperty(data, key, {
            enumerable: true,
            get: function () {
                //如果存在target属性的话添加到事件池dep
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set: function (newVal) {
                //如果用户输入的新值和原先的值完全相同，则不进行操作直接返回
                if (newVal === val) return;
                val = newVal
                //跟新属性值以后重新监听数据
                createObj(val) 
                //调用事件池通知方法 提醒更新时视图
                dep.notify()
            }
        })
    }
}

/**
 * @desc 编译模板
 * @param {string} el 包裹元素选择器
 * @param {object} vm 我们的lvm实例对象
 * 
 * 1.拿到我们初始化的el元素
 * 2.新建一个文档随便，用来缓存dom
 * 3.遍历el元素的所有子元素节点，添加到文档碎片
 * 4.进行表达式里的值替换
 * 5.添加到dom，更新页面
 */
function Compile (el, vm) {
    vm.$el = document.querySelector(el);
    var frag = document.createDocumentFragment(), node = null;
    //把app的dom移动到内存中进行操作
    while(node = vm.$el.firstChild) {
        frag.appendChild(node)
    }
    //替换变量
    replice (frag)


    /**
     * @descrtion 替换内容
     * @param  {dom} node html dom标签
     * @return {null}   没有返回值
     *
     * 1.传入所有的dom的元素节点
     * 2.使用Array.form转换为数组以后遍历处理
     * 3.新建reg对象，匹配和捕获表达式里的
     * 4.拿到每一个节点的文本节点(如果是元素，则递归调用自己)
     * 5.通过nodeType判断是不是文本节点，并且使用正则对象验证是否包含大括号表达式
     * 6.如果有大括号表达式，则进行替换赋值操作
     * 7.数据监听(接下来实现)
     * 8.数据双向绑定(稍后实现)
     * 9.添加到dom
     */
    function replice (node) {

        // 把node类数组转换为数组遍历
        Array.from(node.childNodes).forEach(item => {
            var reg = /\{\{(.*)\}\}/,
                text = item.textContent;//拿到文本节点
            if(item.nodeType == 3 && reg.test(text)) {
                reg.exec(text)
                var key, arr = RegExp.$1.split('.'), //如果拿到的是对象的深层属性(a.a.b)，在下边进行遍历 
                    val = vm;//这里设置为vm => this 对象以后就可以直接访问得到数据

                arr.forEach(key => {
                    //得到数据 遍历拿到对象属性的属性，主要操作多层数据
                    val = val[key]
                })
                //创建监听小函数
                new Wetcher(vm, arr, function(newVal){
                    item.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
                })
                //替换赋值操作
                item.textContent = text.replace(/\{\{(.*)\}\}/, val)
                val = null;
            }
            //实现数据双向绑定 
            //思路：
            //首先判断如果是元素，是否存在v-model属性，（拿到所有的attribute，然后遍历判断）
            //如果不存在就不操作，如果存在（v-model）属性则进行如下操作
            //拿到属性，遍历对象拿到val，赋值给元素
            //给input元素绑定事件，在数据变化的时候那导致，然后重新赋值
            //因为这里赋值如果说嵌套层级较多的时候需要进行特殊处理，我偷懒，没有做，只做了一级的，
            if (item.nodeType == 1) {
                let attrs = item.attributes;
                let reg = /v\-model/;
                //循环遍历属性 看有没有v-model
                Array.from(attrs).forEach(attr => {
                    let name = attr.name;
                    let exp = attr.value.split('.');
                    if (reg.test(name)) {
                        let val = vm;

                        exp.forEach(k => {
                                val = val[k]
                            })
                        item.value = val;

                        //监听数据变化 更新input的值
                        new Wetcher(vm, exp, function(newVal){
                            item.value = newVal
                        })

                        item.addEventListener('input', function (e) {
                            let val = e.target.value;
                            //还没有想到多层级的数据怎么设置，后期学了再补
                            vm[exp] = val
                        })
                    }
                })
            }
            //如果node不是文本节点，继续循环
            if (item.childNodes) {
                replice (item)
            }
        })
    }
    //把操作过的数据添加到dom
    vm.$el.appendChild(frag)
    frag = null
}

/**
 * 新建一个dep 实现模拟事件池
 * subs 保存所有需要监听的对象
 * addSub 将监听事件添加到事件池
 * notify当数据发生变化的时候调用，通知更新数据
 * notify触发的时候，遍历执行subs里的所有事件
 */
function Dep () {
    this.subs = [];
}

/**
 * @desc 事件池添加方法
 * @param {Function} fn 添加事件到事件池
 */
Dep.prototype.addSub = function (fn) {
    this.subs.push(fn)
}
/**
 * @desc 数据更新时刷新页面
 * @return {[type]} [description]
 */
Dep.prototype.notify = function () {
    this.subs.forEach(fn => {
        fn.update()
    })
}

/**
 * @desc 监听小函数 每个需要监听的对象的实例对象
 * @param {object}   vm  当前this的实例
 * @param {string}   exp 监听的属性 a|a.a 
 * @param {Function} fn  数据更改以后执行的回调函数
 *
 * 1.我们在创建一个wecher监听对象的实例，传入上述的参数
 * 2.为了方便加入事件池，在初始化函数的过程中给Dep一个target属性，
 * 然后在触发属性的get方法，在哪里判断是否存在target属性，存在就加入，不存在则不操作
 * 3.在操作完成以后Dep.target属性制空
 */
function Wetcher (vm, exp, fn){
    this.fn = fn;
    this.vm = vm;
    this.exp = exp;
    Dep.target = this;
    let val = this.vm;
    let arr = this.exp;
    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })

    Dep.target = null;
}
/**
 * @description 监听小函数在数据变更以后调用
 * @return {[type]} [description]
 * 1.在这里我们拿到更新后的数据
 * 2.调用调用回调函数fn，并将新值传入
 */
Wetcher.prototype.update = function () {
    let val = this.vm
    let arr = this.exp
    //获取值 会调用get方法
    arr.forEach(k => {
        val = val[k]
    })
    //执行创建实例时的回调函数，并且传入新值替换
    this.fn(val)
}

/**
 * @description 计算属性函数
 * @return {} [description]
 */
function initComputed () {
    let vm = this
    let computed = vm.$options.computed

    //拿到所有的computed属性，进行遍历操作
    //Object.keys(computed) => 返回computed对象的所有属性的name的数组
    //判断如果val是一个函数，则直接返回这个函数，如果是一个变量，则调用变量的get方法
    Object.keys(computed).forEach(key => {

        //建立数据劫持
        Object.defineProperty(vm, key, {
            get: typeof computed[key] === 'function' ? computed[key] 
                : computed[key].get,
            set: function() {}
        })
    })
}
Corner1990
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何理解MVVM原理
可以叫我啪叽的石头
12-21 8025
一、什么是MVVM？ MVVM是Model-View-ViewModel的简写 Model：数据模型层，用来处理业务逻辑和与数据库交互 View：视图层，DOM ViewModel：视图模型层，用来处理Model层和View层的交互 在MVVM框架中，将View层的状态和行为抽象化，视图 UI 和业务逻辑分开，ViewModel层通过双向绑定，把View层和Model层联系起来。ViewModel会自动的来处理这些事情 二、MVVM的优点 MVVM模式和MVC模式一样，目的是分离视图（View）和模型（
MVVM的理解
weixin_47227886的博客
04-14 4395
MVVM 是 Model-View-ViewModel 的缩写。 Model:代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View: 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过Vie...
MVVM模型的简单理解
最新发布
zimugua的博客
05-13 756
Vue的学习中，关于MVVM模型的理解。MVVM（Model-View-ViewModel）是一种软件架构模式，它主要用于构建用户界面。
react的mvvm
海阔天空
01-17 1235
MVVM是什么？ MVVM是Model-View-ViewModel的简写 它本质上是MVC 的改进版 MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter） 模式与WPF结合的应用方式时发展演变过来的一种新型架构框架 #2、MVVM优点 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点 低耦合：视图（View）可以独立于Model变化和修改， 一个ViewModel可以绑定到不同的"View"上，当V
关于对Vue的MVVM的理解
weixin_45687036的博客
02-28 4348
关于对Vue的MVVM的理解
System.arrayCopy用法总结
清宵尚温的博客
09-30 464
1. 背景 拼接二进制数据的数据和协议的时候需要System.arrayCopy，对使用方法进行归纳总结 2. 方法说明 public static void arraycopy(Object src,int srcPos,Object dest,int destPos,int length) 作用：将指定源数组中的数组从指定位置复制到目标数组的指定位置。 参数： src - 源数组。 srcPos - 源数组中的起始位置。 dest - 目标数组。 destPos - 目的地数据中的起始位置。 lengt
MVVM框架理解及其原理实现
01-27
说起这个MVVM模型，就不得不说MVC框架。将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。整个过程看起来是行云流水...
详解Vue中的MVVM原理和实现方法
10-15
主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
手写实现vue中mvvm原理
08-14
本篇文章将深入探讨如何手写实现Vue中的MVVM原理，帮助你更深入理解这个框架的工作机制。 MVVM模式源于微软的WPF（Windows Presentation Foundation）框架，它的主要目的是在视图（View）和模型（Model）之间建立一...
如何实现双向绑定mvvm的原理实现
12-09
不过这些并不会影响大家的阅读和理解，相信看完本文后对大家 在阅读vue源码的时候会更有帮助 本文所有相关代码均在github上面可找到 github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，...
mvvm双向绑定机制的原理和实现代码(推荐)
09-02
在本文中，我们将深入探讨MVVM双向绑定的原理，并通过简单的JavaScript代码实现这一机制。 首先，我们要理解双向绑定的基本概念：当模型的数据发生变化时，视图会自动更新；同样，当用户在视图中进行交互导致数据...
MVVM模式的深入理解与应用
07-31
MVVM模式的深入理解与应用
MVVM原理
XIAO_YuBaby的博客
11-04 1414
首先了解一下MVC Model：数据模型，用来存储数据 View：视图界面，用来展示UI界面和响应用户交互 Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互 接下来介绍MVVM MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）， 优点简白点说就是开发越来越简单 下图是MVVM原理图： 三者之间交流原理： 数据访问层(Mode...
对MVVM模式的理解和原理
qq_45645051的博客
12-09 1121
谈谈对MVVM模式的理解和原理 1.首先：MVVM分为view ，model ,viewmodel view: 视图模型 。其实就是一个增强版的html ，可以支持变量，一些程序的要素。 model：数据模型。其实就是一个保存所有页面所需的变量的对象——data={…} viewmodel : 就是将视图模型和数据模型给绑定起来，以后只要数据模型中的数据改变了，页面中也会跟着自动改变。 MVVM的...
MVVM是什么？谈谈你对MVVM的理解？
泗水六年的博客
12-28 6850
MVVM是什么？谈谈你对MVVM的理解？ 我的理解MVVM它就是一种前端开发的架构模式，作用就是为了让前端业务逻辑和HTML代码更加分离。它的核心思想就是把每个页面分成了M（Model数据模型）、V（View视图）、VM（ViewModel视图模型）。其中VM是核心，时M和V之间的调度者。M和V不直接关联，通过中间的VM。VM还提供了数据双向绑定功能，也就说V发生改变M也跟这边，M发生改变V也会跟这变。这就是我对MVVM的简单理解。 ...
是的，你没看错！这才是MVVM原理实现的正规军
weixin_33695450的博客
05-07 994
来看看目前最火的MVVM 今天面试又被问到什么是MVVM? 光靠说理论已经糊弄不过去了? 什么!MVVM的实现不止一种啊? 往下看~ 亲手带你剖析MVVM原理! 怕你走开文章末尾有惊喜的！偷偷的告诉你这篇文章是有配套视频的哦！ 先来总结下MVVM的实现方式 传统的MVC中通过发布订阅来进行数据和视图的绑定监听 angular1.x中通过脏值检测来实现MVVM模式 目前主流Vue的模式:数据劫...
MVVM在react、vue中的理解
qq_45700583的博客
08-31 754
一：什么是MVC、为什么不用MVC 1：MVC的含义： M（modal）：是应用程序中处理数据逻辑的部分。 V （view） ：是应用程序中数据显示的部分。 C（controller）：是应用程序中处理用户交互的地方（Controller是MVC中的数据和视图的协调者，也就是在Controller里面把Model的数据赋值给View来显示（或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器）） M-V-C之间的关系可以用下面这张图直观展示： 2
对于MVVM的理解
Dlg1992的博客
01-06 2104
参考：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 一、MVVM 分为3个模块 1.View   2.ViewModel  3.Model 关系为： 注意：View和ViewModel之间是双向绑定的，即View的变动将自动反映在ViewModel上，ViewModel的变动自动反映在View上。 二、M
Android MVC MVP MVVM原理和区别
冯旭的博客
11-25 592
MVC是指Modle，View和Controller，将界面，业务逻辑和控制器分开，是一种低耦合的设计方式，适用于简单的应用开发。 这种设计模式最简单，但问题有三： （1）、View和Model相互可见，耦合度高。 （2）、如果程序复杂，那么Activity这个Controller将十分繁琐复杂，不容易维护。 （3）、Activity角色模糊，View或Model。 MVP：P是指Presenter，即实现者，功能与Controller类似。Presenter实质为Interface类的运用，用于
React 35 道面试题及答案.docx
07-08
综上所述，通过这篇总结，我们了解了MVVM架构模式以及Vue2.x和Vue3.x的响应式数据原理，并对React面试题及答案有了一个初步的了解。这些内容对于前端开发者来说是非常重要的，可以帮助他们更好地应对面试和提升自己...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值