The zhehuaxuan.github.io from zhehuaxuan

MVVM原理

目的：

理解MVVM的概念和原理，理解常用的双向绑定的方法，手动实现模型和视图的双向绑定。

什么是MVVM？

MVVM的概念可以参考很多文章，简单的讲就是实现前端模型和数据的双向绑定。那么目前主流的实现方式是什么呢？
下面先来讲讲双向绑定在Vue的实现，Vue的双向绑定主要使用数据劫持和通知订阅
下面来看一个Object中的一个方法 defineProperties，Object.defineProperties(obj, props)简称对象定义属性，在JS中我们一般使用如下：

var person = {};    
person.name = "xuan";

当然在IE8以上浏览器也可以这么用：

 var person = {};
 Object.defineProperties(person, {            
     "name": {
           value: "xuan"
      }
 });

打印结果如下：

我现在加一行代码：

 var person = {};
 Object.defineProperties(person, {            
     "name": {
           value: "xuan"
      }
 });
delete person.name;

看一下结果，结果没变，如下:

这个使用引出了defineProperties函数中的props的配置项，现在添加一个配置：

 var person = {};
 Object.defineProperties(person, {            
     "name": {
           configurable: true, //可配置的
           value: "xuan"
      }
 });
delete person.name;

现在可以顺利的删除了，那我们再来修改一下这个属性，看看效果

    var person = {};
        Object.defineProperties(person, {
            "name":
            {
                value: "xuan",
                configurable: true
            }
        });
        person.name = "xuan";
        console.log(person)
        person.name = "xue";
        console.log(person);

结果改不了...，这里引出另一个配置项writable，如下：

    var person = {};
        Object.defineProperties(person, {
            "name":
            {
                value: "xuan",
                configurable: true,
                writable:true
            }
        });
        person.name = "xuan";
        console.log(person)
        person.name = "xue";
        console.log(person);

结果如下：

在添加一个配置项enumerable：

 var person = {};
 Object.defineProperties(person, {
      "name": {
              value: "xuan",
              configurable: true,
              writable:true,
             enumerable:true
            }
        });
person.name = "xuan";
for(let key in person){
     console.log(key)
 }

 var person = {};
        Object.defineProperties(person, {
            "name":
            {
                configurable: true,
                enumerable:true,
                get:function(){
                    console.log("获取name属性:"+this.value);
                    return this.value
                },
                set:function(val){
                    console.log("设置name属性:"+val);
                    this.value = val;
                }
            }
        });
        person.name = "xuan";
        console.log(person);
        console.log(person.name)
        person.name = "xue";
        console.log(person);
        console.log(person.name)

此处我们缺少了value和write的属性配置。value就是取值，writable就是可以配置，get和set属性用于配置方法，此处的作用也是用于获取和设置值。如上所示，在设置和获取值的时候我都加了一个console.log打印值，结果在我一旦修改和获取对象的值时，就会打印，这就是数据劫持。

zhehuaxuan / zhehuaxuan.github.io Goto Github PK

zhehuaxuan.github.io's People

Contributors

Watchers

zhehuaxuan.github.io's Issues

MVVM原理

目的：

什么是MVVM？

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent