【JavaScript】从事件驱动到数据驱动

批处理

　　在多年以前，计算机程序通常是以批处理的模式运行。所谓批处理，就是开发者事先写好一些代码，再将这些代码一次运行。这种处理方式有点类似于通过HTML代码直接编写的网页。浏览器只是将HTML代码逐行解析，并显示在浏览器窗口。
　　后来，在批处理模式中，开发者可以加入一些特定的代码，在程序批处理期间，可以停下来等待用户输入一些信息，并根据用户输入的信息来判断和执行某个程序分支，这就使程序有了初步的交互性。
　　随着鼠标、触摸屏等设备的出现，批处理时代就逐渐远去，取而代之的是事件驱动的时代。当然，批处理也还能使用，只是使用的范围和频率比事件驱动要少得多。以鼠标为例，在事件驱动中，用户可以使用鼠标单击等方式进行操作，程序则根据鼠标指针的位置以及单击的方式进行响应。JavaScript使用的就是这种事件驱动的程序设计方式。

事件驱动

　　JS是事件驱动（Event Driver）的编程语言。Dom元素上的事件绑定是用来驱动业务逻辑的主要手段。JS中的事件流分为两种：1.事件冒泡，2.事件捕获。事件冒泡个人的简单理解就是从确定到不确定，从小的元素到最后的document，事件捕获则恰巧相反，它是从不确定到确定，从大到小。
　　事件在实际的业务开发里面十分的重要，它不仅仅是业务逻辑的推动者也是与对象交互的入口。每个事件都会有一个event对象，对象里面包含了各种你所想得到的信息，一般来说我们实际里面需要的是绑定事件的这个dom元素本身，此时通过e.target就可以得到触发事件的元素本身了。
　　在实际开发里面，我们将会用两种事件绑定的形式，一是事件的绑定，它会直接绑定到具体的元素，只有这个元素的事件被触发的时候，事件才会进行，具体的代码如下（jquery）：

$('#id').click(function(){alert("hello");
});

　　这段代码为一个id为id的dom元素绑定了一个click事件，当dom元素被点击的事件，将会触发里面的方法弹出一个内容为“hello”的弹出框。这种普通添加事件到具体的元素，当元素在页面上是唯一不变，或者一直存在的时候是可以用的，但是如果一个元素的动态生成的，同时又有多个，那么普通添加事件就不可以，因为最下面的事件会覆盖上面的事件。因此我们此时需要的是事件绑定方式添加事件：

$('#id').on('click', '.class', function(){alert("hello");
});

　　个人感觉这种方式的好处就是直观，页面做任何改变全交由JS处理，先干什么后干什么都由自己一手代码操控全场。
　　但是，大型项目里，代码编写的成本和维护的成本都很高。对代码规范的要求高，对抽象的要求高，尤其是抽象程度，全赖个人编程水平，抽象程度低的话，冗长的代码根本不想多看一眼。这大概就是为啥项目里有一个代码写的烂的人在，代码就会越来越烂的原因。

数据驱动

　　数据驱动应该是从flux/redux + react这种模式开始流行的。
　　数据驱动的前提是事先将DOM与数据绑定，像vue这种就是依赖defineProperties, setter, getter将一个vue对象与一个DOM节点模板关联起来，这个DOM节点里所有子节点、所有节点属性，全都可以和vue对象中的data绑定，做到data中某个属性值变化时，相应DOM节点中对应的某个属性就变化。
　　如果需求简单还比较好解决，每个模块中自己解决自己的逻辑，解耦的非常清晰。父子之间的关系也非常明确。但如果需求分析如下图：
　　
　　可见，对于复杂的交互，或者模块间关系复杂时，这种依赖父子关系的通信，是一个很大的障碍。
　　但是我们怎么办，拒绝模块化开发吗？那样页面设计起来耦合度更大，更加不可维护。
　　首先一点，模块化开发是一个不可逆的趋势，然而在这种趋势下，解决模块化通信是一个非常重要的点。
　　看看上面那个例子如果加上数据驱动的设计思想。
　　
　　重点在于，当交互逻辑不断增加时，这个关系链条依然不会增加，因为模块只和model里面对于的数据相关联。
　　当然，这种模式也无法去省略复杂的业务逻辑，只是业务逻辑全部都会聚集在model中。可以理解为页面上所有的操作都是对数据的操作。然后每个模块只需要监听关注的数据改变即可，这个监听关系就是图中唯一的一条关系线。
　　换一个理解，我们将直接的模块和模块直接的耦合关系全部转移到了数据中去体现。而数据的维护是远远比模块更好维护的。