The basic implementation principle MVVM, MVC, VUE's

What is mvvm?

m: model data layer;

v: view view of the layer;

vm: a bridge viewModel view data layer with the layer

Explain: m is passed over the rear end of the data, v is seen a front end render backend data page;

vm to achieve data through data binding -> View, View -> Data, vm monitor changes in the data with a view to implement the event by Dom update data with a view;

When listening to the data changes, the view layer automatically updated when the user operates the view layer, vm to monitor changes in view of the notification of data updates. Actually achieve the two-way data binding.

In addition, vm layer can communicate with each other with v layer.

As shown in FIG;

We can simulate what the basic realization of mvvm:

html:

<input type="text" id="input1"/>
<span id="span1"></span>

js:

There are m = {a ''};
var v = {};
where vm = {
  init(){
    input1.onkeyup=function(){
      m.a=this.value;
      vm.observer(m,"a"); 
    }
  },
  observer(obj,attr){
    was choice obj = [could];
    Object.defineProperty(obj,attr,{
        get(){
          return val;
        },
        set(v){
          input1.value=span1.innerHML=val=v;  
       }
    })
  }

};

vm.init();

What is mvc?

m: model data layer (model)

v: view view layer

c: controller Controller

Explanation:

M and V refers to the meaning and MVVM M and V mean the same. C Controller refers to the page that is business logic. MVC is the purpose M and V code separation. ' The MVC is one-way communication. That is, with the View Model, must be the nexus by Controller,

The user interface and business logic rational organization together, since the effect of the adhesive. So the contents of the Controller can be as little less, so as to provide maximum flexibility.

As shown above, we can simulate what the basic realization of the mvc;

html:

<input type="text" id="input1"/>
<span id="span1"></span>

js:

var m={
 a:'',
 Set(val){
  m.a=val;
  v.render();
 },
 Get(){
   return m.a;
 } 
};
var v={
 init(){
  input1.onkeyup=c.Keyup;
 },
 render(){
  span1.innerHTML=m.Get();
 } 
};
var c={
  Keyup(){
    m.Set(this.value)
  }
}

v.init();

vue的基本实现原理

关于Object.defineProperty();

Object.defineProperty()可以在对象中再定义或者修改属性,可以对该属性的读写性,可行性等进行操作;

三个必须参数:

obj(目标对象),attr(属性),desc(描述)

obj: 需要进行定义或修改属性的对象；
attr: 需要进行定义或者修改的属性；

value: 设定该属性的值；
writable: 布尔，该属性是否可写入（是否可改变其value）；
enumerable: 布尔，该属性是否可被遍历得到（for...in， Object.keys等）；
configurable: 布尔，设定该属性是否可被删除，且除writable外的其他描述符是否可被修改；
get: 函数，该属性的值被获取时执行的回调函数（例如console.log(prop)），默认为undefined；
set: 函数，该属性的值被设置时执行的回调函数，默认为undefined；

话不多说,上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model  | v-text 基本实现</title>
</head>
<body>
    <input type="text" v-model="a"> 
    <span v-text="a"></span> 
    <br>
     {{a}}

     <script>

        //  console.log(Object.defineProperty)
     
       var m={
         a:''
       };
     
       var v={

       };
     
       var vm={
         nodeList:{}, 
         init(){
           var nodes=document.body.childNodes;        
        //    console.log(nodes)
            for(var i=0;i<nodes.length;i++){
                var node=nodes[i];
                vm.compile(node)
            }
            // console.log(vm.nodeList)
        //    vm.observer()

         }, 
         compile(node){
             var name="";
            //  console.log(node+" --"+node.attributes)
            //    console.log(node+":  "+node.nodeType) 
            if(node.nodeType===1){
                //元素节点
                var attrs=node.attributes;  
                for(var i=0;i<attrs.length;i++){
                    //   console.log(attrs[i])
                    var nodeName=attrs[i].nodeName; 
                    var nodeValue=attrs[i].nodeValue;
                    // console.log(nodeName,nodeValue)
                   if(nodeName==='v-model'){
                        name=nodeValue;
                       node.addEventListener('keyup',function(){
                           m[name]=this.value;
                       })
                      vm.observer(m,name);
                   }
                   if(nodeName==='v-text'){
                        name=nodeValue; 
                   }  

                }
            }; 
            if(node.nodeType===3){
                //文本节点
                // console.log(node.nodeValue)
                var arr=node.nodeValue.match(/{{(.+)}}/);
                if(arr){
                    // console.log(arr)
                    name=arr[1];
                } 
            }
            // console.log(name,node)
           if(name){
             if(vm.nodeList[name]==undefined){
                 vm.nodeList[name]=[];
             }
                 vm.nodeList[name].push(node);
           }

         },

         observer(obj,attr){
             var val=obj[attr];   
             Object.defineProperty(obj,attr,{
                 get(){
                    return val;
                 },
                 set(v){
                   val=v;                 
                   var arr=vm.nodeList[attr];
                //    console.log(arr)
                   for(var i=0;i<arr.length;i++){
                        var node=arr[i];
                       if(node.nodeType===1){
                        if(node instanceof HTMLInputElement){
                             node.value=v;
                        }else{
                             node.innerHTML=v;
                        }
                       }
                       if(node.nodeType===3){
                           node.nodeValue=v;
                       }

                   }


                 }

             }) 

         }

       }     

       vm.init();
     
     </script> 



</body>
</html>