本文章信息点
 
双向数据绑定原理（vue）
如何设计搭建自己的框架
代码暂略，详见，github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo
什么是单向什么是双向？
 
单向指是数据从model流向view
 
双向是在单向的基础上数据再从view 流向model。
 
双向数据绑定原理
 
相信很多人看过很多双向数据绑定原理相关文章，多半看的一头雾水，看完仍然写不出一个简单的demo 框架，根本不知道为什么要这样做？主要原因是因为没有整理清楚双向数据绑定的需求，因为所有的代码逻辑实现都是围绕需求展开，所以下面会围绕需求展开，再细解如何实现这些需求，从整体逻辑上打通每一环最终实现双向数据绑定框架。所谓万剑归宗、殊途同归，需求是一样的，所以最终的实现也都将大同小异，原理自然而然显现。
 
简单的说是这样的，
 
初次模板与数据渲染时，监听数据每个属性的每次调用（通过getter实现），并给其属性添加观察者。监听数据的每个属性变更(通过setter实现)，并通知与其相关的观察者，观察者调用自身的更新方法更新view。扫描模板时，找到双向绑定指令，并绑上指定事件，事件触发后更新数据，数据更新触发单向绑定逻辑 view  更新。
 
说的太简单很多人对细节不清楚，说的细了就是后面的长篇大论了。
 
相信很多人的疑问有像下面这些的：
 
观察者只是抽象概念，
 
它具体实现是什么？
为什么同一个属性不只一个观察者？
又在什么时候添加的？
观察者添加到哪了？
每个观察者的更新方法又是怎么确定的？
 
 
 
 
如何设计实现
 
单向、双向数据绑定是如何实现的呢？假如现在要写一个双向绑定框架要如何设计呢？
 
单向数据绑定需求可以简单的抽象为：将数据和模板进行某种绑定，数据中的某个属性值发生变化时，属性对应的模板和新值进行处理更新UI(移除旧的UI插入新的UI)。
 
双向数据绑定需求可以简单的抽象为：在单向的基础上，给特定元素（input 、textarea等）绑定指定事件，并将新值更新到数据，数据更改触发单向数据绑定逻辑，更新UI中相关属性绑定。
 
通过上面的简单分析，就可以发现"模板"相关需求需要用节点操作来实现，因为需要给特定元素绑定事件，要处理元素中的指令，必定要对模板中每一个节点进行遍历，并对每个节点的属性进行遍历。
 
下面会逐步分析需求，再将每个需求再细化就可以得到完整的需求，最后实现这些需求。
 
需求点分析
 
将数据的每一个属性与相对应的模板建立联系，数据属性值变更时view进行更新 
  
监听数据所有属性的修改包括值的属性的修改
如何找到属性对应的模板
如何将数据属性与其对应模板建立链接
将数据新值更新到view
将特定元素的指定事件回馈到数据，数据被修改，同时与些数据相关view更新 
  
监听指定元素的指定事件，并将新值赋值给数据，数据被修改触发view更新逻辑
【1.1解决思路】
 
数据属性的读写可以通过设置getter setter实现，通过Object.defineProperty()方法设置。 写一个方法递归的处理数据的每个属性不是什么难事。代码暂略，详见，github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo
 
【1.2解决思路】
 
我们需要一个compiler 对模板的每一个节点进行扫描分析，分板当前节点是否有指令（插值表达式、单向数据绑定、双向数据绑定，事件绑定等）。如果有指令，找到当前指令相关的数据属性，当前节点即为'模板'(ps:数据更新时更样的节点)。
 
【1.3解决思路】
 
当compiler 对节点分析时如果找到指令，则给该指令相关的属性的更新列表，添加一个watcher实例，该实例包含渲染相关‘模板’（ps:当前扫描到的节点） 
 
【1.4解决思路】
 
在1.1中对所有数据属性进行监听时，为每一个属性挂载一个对象（实际上是闭包），该对象拥有一个notify方法，还拥有一个值为数组的list 属性，list 中存放的是当前属性相关的 watcher实例，该实例在1.3（模板解析） 时生成并添加进来，该实例拥有一个update 方法，用来更新view; 当属性值变化时，调用相关必包中的notify 方法，该方法遍历list 中的每一个watcher 实例，并调用该实例的update 方法，upadate方法会在1.3（模板解析）时根据指令生成相关update 方法。本demo 中闭包对象是watcher 类来构造，也可以分开。
 
以上只是粗枝大叶的整个逻辑分析，细节还有很多，比如：指令解析，管道符解析，指令表达式解析，插槽（用以标记更新时插入点），需要销毁节点等，后续整理出来，计划搞一个系列文章，比如模板指令解析如何进行等，本demo 也有点粗造有时间吧整理一下，以后像虚拟dom的可以搞一搞，像生命周期钩子有了大框架要加也不是很困难，等以后细化再更新。
 
因精力有限。。。今日到此（未完待续）
 
 
 
 
 
 
 
 
 
 

      vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
 
      
 
 
 
 
 
 vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。在面试中如何应对？面试官：说一下VUE双向绑定的原理？答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示：defineProperty的用法var obj = { };var name;//第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。
 
Object.defineProperty(obj, "data", {
 
//获取值
 
get: function ()
 
{  return name;  },
 
//设置值
 
set: function (val) {
 
name = val;console.log(val)}})
 
//赋值调用
 
setobj.data = 'aaa';
 
//取值调用
 
getconsole.log(obj.data);
 
代码演示：defineProperty的双向绑定var obj={};Object.defineProperty(obj, 'val',{set:function (newVal) {document.getElementById("a").value =newVal==undefined?'':newVal;document.getElementById("b").innerHTML=newVal==undefined?'':newVal;}});document.getElementById("a").addEventListener("keyup",function (e) {obj.val = e.target.value;})
 
 
 
 

在react中是单向数据绑定，而在vue中的特色是双向数据绑定。但是其实就我个人的理解是：
 其实无论是vue还是react其实还是提倡单向数据流去管理状态，这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件提供了双向数据绑定的方式，在一些需要实时反应用户输入的场合会非常方便。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。
 
1.单向数据流
 
示意图：
 
 state：驱动应用的数据源。view：以声明方式将 state 映射到视图 。 actions：响应在 view 上的用户输入导致的状态变化
 
单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，如下图所示。一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的值并不会发生改变，这正是因为Vue中的机制是单向数据流，子组件不能直接改变父组件的状态。但反过来，如果是父组件中的name修改了，当然两个子组件中的name也就改变了。
 
1.1 单向数据流过程：
 
简单的单向数据流（unidirectional data flow）是指用户访问View，View发出用户交互的Action，在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动，便于维护并且可以预测。
 
1.2 vuex和redux解决什么问题：
 
虽然vue和react框架本身有自己状态管理，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
 
(1)多个视图依赖于同一状态
(2)来自不同视图的行为需要变更同一状态
 
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
 对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
 因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
 另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。
 1.3 特点：
 （1） 所有状态的改变可记录、可跟踪，源头易追溯;
 （2） 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
 （3） 一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data);
 （4） 如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
 
2.双向数据绑定
 
主要是由MVVM框架实现：
 
 
Model与ViewModel之间的双向关系
 Model通过Ajax通信，发送数据给ViewModel。
 ViewModel也可以通过Ajax通信，发送请求给Model。
ViewModel与View之间的双向关系
 ViewModel中的数据改变，可以同时改变View上的显示内容。
 View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。
 
双向数据绑定，带来双向数据流。ViewModel中的data部分和View之间的双向关系。。
 
ng 里的 ng-model 和 vue 里的 v-model。
 
双向数据流/双向数据绑定：
 
1）js内存属性改变，影响页面变化

2）页面的改变硬性js 内存属性的改变
 
当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
 
文章参考博客：https://www.jianshu.com/p/810464f1a576
 参考 mvvm的介绍： https://www.jianshu.com/p/e4e3519a58a6

初衷
 
之前我们要在js域更新model，需要这样：
 
model.set('name', 'sub');
 
这实在太土了。。。 
 我们希望像angularjs一样，直接：
 
$scope.name = 'sub';
 
然后bong, 视图就会更新！这样的黑科技必定是极好的。
 
目标
 
完成model更新黑科技
200行以内完成 
 我们希望html长成这样：
 
<head>
    <title>avalon like mvvm framework</title>
    <script src="frame.js"></script>
    <script src="app.js"></script>
  </head>
  <body isi-controller="MainController">
    <h1> avalon lik mvvm framework </h1>
    <p id="my-p">{{width}}</p>
  </body>
 
{{width}}即绑到p里面，又绑到isi-css-width里面，又绑了个isi-click 
 不用写data-bind=xxx属性了，很像angularjs有没有！ 
 js我们希望长这样：
 
var model = MVVM.define("MainController", function(vm) {
    vm.width = 150;
    vm.click = function() {
        vm.width = parseFloat(vm.w) + 10;
    };
});

MVVM.scanTag();
 
想要改变model数据，直接vm.property = xxx就好，不用去model.set(‘property’,xxx)了！
 
实现
 
今次主要借鉴avalon“劫持”setter,getter的方法，链接：avalon简化版解读
 
虽说是简化过的avalon，还是挺难读的。 
 整理下思路，主要两大点： 
 1. vm对象 –> vModel对象，劫持vm各个属性的set,get方法 
 2. scanTag() –> 遍历dom树找关键字，去vModel找求值函数，注册到订阅者列表
 
其中去vModel这一点不是很清楚，这几天一定要搞清，自己mock一个出来
 
第一版，劫持getter, setter
 
之前提到，关键步骤有两个， 
 1. 劫持vm中各个属性的getter, setter 
 2. scanTag，在这个过程中对vm对象求值，对vm对象handler(一般是去改视图)
 
贴一下关键代码和注释：
 
    /*----------- define ------------------*/
    var MVVM = function() {};
    MVVM.define = function(name, factory) {
        var scope = {};
        factory(scope);
        var model = modelFactory(scope);
        factory(model);
        model.$id = name;
        return vModels[name] = model;
    }
    /* @param scope {object}: vm工厂方法生成的对象
     * @return vModel {object}: scope各property的set,get方法被劫持了后的对象。
     */
    function modelFactory(scope) {
        var vModel = {},
            originalModel = {},
            accessingProperties = {};
        // originalModel保存vm的属性, accessingProperties保存属性的accessor(及属性的订阅者)
        for(var prop in scope) {
            resolveAccess(prop, scope[prop], originalModel, accessingProperties);
        }
        // 关键！劫持需要access的属性的set,get方法！
        vModel = Object.defineProperties(vModel,withValue(accessingProperties));
        //
        vModel.$id = generateId();
        vModel.$accessors = accessingProperties;
        vModel.$originalModel = originalModel;
        vModel[SUB_NAME] = [];
        return vModel;
    }
 
    MVVM.scanTag = function(element, vModel) {
        // 假使通过parse, 取到了包含{{}}的元素<p>
        var myP = document.getElementById('my-p');
        executeBindings([{
            filters: undefined,
            element: myP,
            nodeType: 3,
            type: "text",
            value: "width"
        }], vModels["MainController"]);
    };
    /* @param bindings {array} : bindings
     * @param vModel {object} : vModel
     * @func: exec bindingHandlers of text
     */
    function executeBindings(bindings, vModel) {
        bindings.forEach( function(data){
            bindingHandlers[data.type](data,vModel); 
            //bindingHandlers往下较长，就不贴了
            //主要功能是生成binding object的求值函数，handler函数，注册事件
        });
    }    
 
第二版
 
第一版有问题，没有事件啊，click不支持的话就太土了。 
 所以第二版引入事件注册。 
 简单的说，给每个vm的属性的setter,getter里，都搞一个subscriber数组，记录set这个属性时得通知哪些人，同时，在get这个属性时，收集订阅者。 
 这个过程有点绕，我也是一步步设断点才知道怎么运行的： 
 scanTag的时候，要生成每个属性的求值函数和handler函数，生成完之后，做注册。 
 注册的时候，是对整个binding object操作，首先去调用求值函数，这样有两个作用： 
 1. 调用了get方法，从而把这个binding object加到这个属性的subscribers数组里了 
 2. get到值之后去set, 从而在scanTag的过程中把vm里的property搞到各个html里去
 
理清这些思路后，我们来重构avalon的代码，因为原码命名实在太乱了，词不达意，导致读码的时候思路也很乱。 代码写完我会上传到github
 
代码写完了，主要是以binding object和accessor为中心，accessor保有有关的bindings，setter,getter里用到binding.evaluter与binding.handler来处理view更新。binding.evalutor, handler有scanTag()过程获取
 
代码： github.com/victorisildur/javascript