VueJS双向数据绑定实现 VueJS双向数据绑定实现

2018-05-28 22:36:44 织梦安装使用
  • 文章介绍
珠峰培训

Object.defineProperty简单应用

var obj = {};

Object.defineProperty(obj, hello, {

    get: function() {

        console.log(get方法获取值);

    },

    set: function(val) {

        console.log(set方法设置的值为: + val);

    }

});

obj.hello; // get方法获取值

obj.hello = Hello World;

实现数据和视图的联动,即实现双向绑定,听起来是不是很牛叉?并且Vue.js和Avalon.js 都是通过它实现双向绑定的。是不是有点小激动呢?所以更有必要了解一下了几行代码看它怎么用?

基本用法

var a = {};

Object.defineProperty(a, b, {

    value: 123

});

console.log(a.b); // 123

很简单,它接受三个参数,而且都是必填的。

参数介绍:

  • 第一个参数:目标对象

  • 第二个参数:需要定义的属性或方法的名字。

  • 第三个参数:目标属性所拥有的特性。

前两个参数不多说了,一看代码就懂,主要看第三个参数,看看有哪些取值。

  • value :属性的值。

  • writable :如果为 false ,属性的值就不能被重写,只能为只读了。

  • configurable :总开关,一旦为 false ,就不能再设置他的( value , writable , configurable )。

enumerable :是否能在 for…in 循环中遍历出来或在 Object.keys 中列举出来。

  • get :见下面例子。

  • set :见下面例子。

接下来,该是到了用实例说话的时候了。

var a = {};

Object.defineProperty(a, b, {

    value: 123

});

console.log(a.b); // 123

我们只设置了 value ,别的并没有设置,但是 第一次的时候 可以简单的理解为(暂时这样理解)它会默认帮我们把 writable 、 configurable 、 enumerable 、都设上值,而且值还都是 false 。也就是说,上面代码和下面是等价的的( 仅限于第一次设置的时候):

var a = {};

Object.defineProperty(a, b, {

    value: 123,

    writable: false,

    enumerable: false,

    configurable: false

});

console.log(a.b); //123
configurable

总开关,第一次设置 false 之后,,第二次什么设置也不行了,比如说:

var a = {};

Object.defineProperty(a, b, {

    configurable: false

});

Object.defineProperty(a, b, { // Uncaught TypeError: Cannot redefine property: b(…)

    configurable: true

});

如果第一次不设置,第二次再设置同样会报错。

writable

如果设置为 fasle ,就变成只读了。。

var a = {};

Object.defineProperty(a, b, {

    value: 123,

    writable: false

});

console.log(a.b); // 打印 123

a.b = 124; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)

console.log(a.b); // 打印 123, 赋值不起作用。
enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。

var a = {};

Object.defineProperty(a, "b", {

    value: 3445,

    enumerable: true

});

console.log(Object.keys(a)); // 打印["b"]

改为 false

var a = {};

Object.defineProperty(a, "b", {

    value: 3445,

    enumerable: false //注意咯这里改了

});

console.log(Object.keys(a)); // 打印[]
for…in 类似,不赘述了。
set 和 get

在参数中不能 同时 设置访问器 ( get 和 set ) 和 wriable 或 value ,否则会错,就是说想用( get 和 set ),就不能用( wriable 或 value 中的任何一个)

set 和 get ,他俩干啥用的的?

var a = {};

Object.defineProperty(a, b, {

    set: function(newValue) {

        console.log(你要赋值给我,我的新值是:+ newValue);

    },

    get: function() {

        console.log("你取我的值");

        return 2; //注意这里,我硬编码返回2

    }

});

a.b = 1; //打印 你要赋值给我,我的新值是1

console.log(a.b); //打印 你取我的值 2

简单来说,这个 b 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

现在开始使用 Object.defineProperty 实现数据和视图的联动。

<!-- HTML -->

<div>

    你好,<span id=nickName></span>

    <div id="introduce"></div>

</div>

// JavaScript

// 视图控制器

var userInfo = {};

Object.defineProperty(userInfo, "nickName", {

    get: function() {

        return document.getElementById(nickName).innerHTML;

    },

    set: function(nick) {

        document.getElementById(nickName).innerHTML = nick;

    }

});

Object.defineProperty(userInfo, "introduce", {

    get: function() {

        return document.getElementById(introduce).innerHTML;

    },

    set: function(introduce) {

        document.getElementById(introduce).innerHTML = introduce;

    }

});

userInfo.nickName = "xxx";

userInfo.introduce = "我是xxx,我来自云南,..."

设置 userInfo 的 nickName 属性时会调用 set 方法,更新DOM节点的HTML。

Vue 事件驱动和依赖追踪

在之前 实现一个自己的MVVM中 ,用 setter 来观测 model ,将界面上所有的 viewModel 绑定到 model 上。 当 model 改变,更新所有的 viewModel ,将新值渲染到界面上 。同时监听界面上通过 v-model 绑定的所有 input ,并通过 addEventListener 事件将新值更新到 model 上,以此来完成双向绑定 。

为数据定义 getter & setter

class Observer {

    constructor(data) {

        this._data = data;

        this.walk(this._data);

    }

    walk(data) {

        Object.keys(data).forEach((key) => {

            this.defineRective(data, key, data[key])

        })

    };

    defineRective(vm, key, value) {

        var self = this;

        if (value && typeof value === "object") {

            this.walk(value);

        }

        Object.defineProperty(vm, key, {

            get: function() {

                return value;

            },

            set: function(newVal) {

                if (value != newVal) {

                    if (newVal && typeof newVal === "object") {

                        self.walk(newVal);

                    }

                    value = newVal;

                }

            }

        })

    }

}

module.exports = Observer;

这样,就为每个属性添加了 getter 和 setter ,当属性是一个对象,那么就递归添加。

一旦获取属性值或者为属性赋值就会触发 get 或 set ,当触发了 set ,即 model 变化,就可以发布一个消息,通知所有 viewModel 更新。

defineRective(vm, key, value) {

    // 将这个属性的依赖表达式存储在闭包中。

    var dep = new Dep();

    var self = this;

    if (value && typeof value === "object") {

        this.walk(value);

    }

    Object.defineProperty(vm, key, {

        get: function() {

            return value;

        },

        set: function(newVal) {

            if (value != newVal) {

                if (newVal && typeof newVal === "object") {

                    self.walk(newVal);

                }

                value = newVal;

                // 通知所有的 viewModel 更新

                dep.notify();

            }

        }

    })

}

那么怎么定义 Dep 呢??

class Dep {

    constructor() {

        // 依赖列表

        this.dependences = [];

    }

    // 添加依赖

    addDep(watcher) {

        if (watcher) {

            this.dependences.push(watcher);

        }

    }

    // 通知所有依赖更新

    notify() {

        this.dependences.forEach((watcher) => {

            watcher.update();

        })

    }

}

module.exports = Dep;

这里的每个依赖就是一个 Watcher 。看看如何定义 Watcher 。这里每一个 Watcher 都会有一个唯一的 id 号,它拥有一个表达式和一个回调函数 。

比如 表达式 a +b ; 会在 get 计算时 访问 a 与 b , 由于 JavaScript是单线程,任一时刻只有一处JavaScript代码在执行, 用 Dep.target 作为一个全局变量来表示当前 Watcher 的表达式,然后通过 compute 访问 a , b ,触发 a 与 b 的 getter ,在 getter 里面将 Dep.target 添加为依赖 。

一旦 a 与 b 的 set 触发,调用 update 函数,更新依赖的值 。

var uid = 0;

class Watcher {

    constructor(viewModel, exp, callback) {

        this.viewModel = viewModel;

        this.id = uid++;

        this.exp = exp;

        this.callback = callback;

        this.oldValue = "";

        this.update();

    }

    get() {

        Dep.target = this;

        var res = this.compute(this.viewModel, this.exp);

        Dep.target = null;

        return res;

    }

    update() {

        var newValue = this.get();

        if (this.oldValue === newValue) {

            return;

        }

        // callback 里进行Dom 的更新操作

        this.callback(newValue, this.oldValue);

        this.oldValue = newValue;

    }

    compute(viewModel, exp) {

        var res = replaceWith(viewModel, exp);

        return res;

    }

}

module.exports = Watcher;

由于当前表达式需要在 当前的 model 下面执行,所以 采用 replaceWith 函数来代替 with

通过 get 添加依赖:

Object.defineProperty(vm, key, {

    get: function() {

        var watcher = Dep.target;

        if (watcher && !dep.dependences[watcher.id]) {

            dep.addDep(watcher);

        }

        return value;

    },

    set: function(newVal) {

        if (value != newVal) {

            if (newVal && typeof newVal === "object") {

                self.walk(newVal);

            }

            value = newVal;

            dep.notify();

        }

    }

})

    上一篇:Vuejs 中使用 markdown

    下一篇:Vuejs 生成二维码

    相关文档推荐

    精品模板推荐

     2020-07-29   18166  0金币下载

     2020-07-27   65338  0金币下载

     2020-07-27   65333  0金币下载

     2020-06-22   57995  0金币下载

     2020-06-13   62585  0金币下载

     2020-06-13   62587  0金币下载

    专业的织梦模板定制下载站,在线购买后即可下载!

    商业源码

    跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

    立刻开启你的建站之旅
    
    QQ在线客服

    服务热线

    织梦建站咨询