前端技术演进（5）：现代前端交互框架

这个来自之前的培训，删掉了一些业务相关的，参考了很多资料（参考列表），谢谢学长好吗？随着前端技术的发展，前端框架也在不断变化。DOM时代的DOM（DocumentObjectModel，文档对象模型）将HTML文档表示为树状结构，定义了访问和操作HTML文档的标准方法。前端开发基本上涉及到HTML页面，所以与DOM打交道是免不了的。最早的web前端是一个静态的黄页，网页上的内容无法更新。慢慢地，用户可以在网页上进行一些简单的操作，比如提交表单、上传文件等。但是，整个页面的局部或整体更新是通过刷新页面来实现的。随着AJAX技术的出现，越来越多的用户对前端页面的操作变得越来越复杂，从而进入了直接操作DOM元素的时代。要对DOM元素进行操作，您需要使用DOMAPI。常见的DOMAPI包括：类型方法节点查询getElementById、getElementsByName、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll节点创建createElement、createDocumentFragment、createTextNode、cloneNode节点修改appendChild、replaceChild、removeChild、insertBefore、innerHTML节点关系parentNode、previousSibling、childNodes节点属性innerHTML,attributes,getAttribute,setAttribute,getComputedStyle内容加载XMLHttpRequest，ActiveX使用DOMAPI完成前端页面的任何操作，但是随着网站应用的复杂性，使用nativeAPI效率很低。于是jQuery，一个用于操作DOM的交互式框架诞生了。为什么jQuery可以成为这个时代最流行的框架？主要是他帮助前端开发者解决了太多的问题：封装了DOMAPI，提供了统一便捷的调用方式。简化了元素的选择，可以快速选择所需的元素。提供AJAX接口，统一封装XMLHttpRequest和ActiveX。统一的事件处理。提供异步处理机制。与大多数主流浏览器兼容。除了解决以上问题，jQuery还拥有良好的生态，大量的插件随时可用，让前端开发比以前顺畅很多。尤其是IE6、IE7时代，没有jQuery，意味着没完没了的兼容性处理。//DOMAPI：document.querySelectorAll('#containerli');//jQuery$('#container').find('li');随着HTML5技术的发展，jQuery提供的很多方法已经在原生的标准中实现了，慢慢的，jQuery的必要性也在逐渐降低。http://youmightnotneedjquery.com/渐渐地，SPA（SinglePageApplication，单页应用）开始被广泛认可。整个应用的内容在一个页面中，不同的内容完全通过异步交互加载。这时候使用jQuery直接操作DOM的方式就不好管理了，页面上的事件绑定也会变得混乱。在这种情况下，就迫切需要一个能够自动管理DOM与页面上数据交互的框架。MV*模式MVC、MVP和MVVM是常见的软件架构设计模式（ArchitecturalPattern），它们通过分离关注点来改进代码的组织。单纯从概念上，很难区分和感受这三种模式在前端框架中的区别。我们通过一个例子来体验一下：有一个可以加减值的组件：值显示在上面，两个按钮可以加减值，操作后的值会更新显示。Model层用于封装与应用程序业务逻辑相关的数据和数据的处理方法。这里我们封装了Model中需要用到的数值型变量，定义了三个操作数值的方法：add、sub、getVal。varmyapp={};//创建这个应用程序对象myapp.Model=function(){varval=0;//要操作的数据/*操作数据的方法*/this.add=function(v){if(val<100)val+=v;};this.sub=function(v){if(val>0)val-=v;};this.getVal=function(){返回值；};};Viewas视图层主要负责数据的展示。myapp.View=function(){/*视图元素*/var$num=$('#num'),$incBtn=$('#increase'),$decBtn=$('#decrease');/*渲染数据*/this.render=function(model){$num.text(model.getVal()+'rmb');};};在这里，数据从模型层传递到视图层的逻辑是通过Model&View完成的。但是对于一个应用程序来说，这还远远不够。我们还需要响应用户操作，同步更新View和Model。前端MVC模式MVC（ModelViewController）是一种非常经典的设计模式。用户对View的操作都交给了Controller。在Controller中，响应View的事件，调用Model的接口对数据进行操作。一旦Model发生变化，就会通知相关的view进行更新。Model层用于存储业务数据。一旦数据发生变化，模型就会通知相关的视图。//Modelmyapp.Model=function(){varval=0;this.add=function(v){if(val<100)val+=v;};this.sub=function(v){if(val>0)val-=v;};this.getVal=function(){返回值；};/*观察者模式*/varself=this,views=[];this.register=function(view){视图。推（查看）；};this.notify=function(){for(vari=0;i0)val-=v;};this.getVal=function(){返回值；};};Model层还是主要是业务相关的数据和相应的数据处理方法，非常简单。//Viewmyapp.View=function(){var$num=$('#num'),$incBtn=$('#increase'),$decBtn=$('#decrease');this.render=function(model){$num.text(model.getVal()+'rmb');};this.init=function(){varpresenter=newmyapp.Presenter(this);$incBtn.click(presenter.increase);$decBtn.click(presenter.decrease);};};MVP定义了Presenter和View之间的接口，用户对View的操作都转移到了Presenter上。比如这里的View暴露了setter接口（render方法）供Presenter调用。Presenter通知Model更新后，Presenter调用View提供的接口更新视图。//Presentermyapp.Presenter=function(view){var_model=newmyapp.Model();var_view=视图；_view.render(_model);this.increase=function(){_model.add(1);_看法。渲染（模型）；};this.decrease=function(){_model.sub(1);_view.render(_model);};};Presenter充当View和Model之间的“中间人”，除了基本的业务逻辑外，还有很多代码需要“手动同步”数据从View到Model，从Model到View，所以Presenter很重并且难以维护。如果Presenter对视图渲染的需求增加，它不得不过多地关注特定的视图。一旦视图需求改变，Presenter也需要改变。前端MVVM模式MVVM（Model-View-ViewModel）最早是由微软提出的。ViewModel指的是“ModelofView”——视图的模型。MVVM自动化了View和Model的同步逻辑。以前由Presenter负责的View和Model的同步不再是手动操作，而是交给了框架提供的数据绑定功能。你只需要告诉它View显示的数据对应于Model的哪一部分即可。我们使用Vue来完成这个栗子。在MVVM中，我们可以把Model称为数据层，因为它只关心数据本身，不关心任何行为（格式化数据是View的职责），这里可以理解为类似于数据对象JSON。//模型变量数据={val:0};与MVC/MVP不同，MVVM中的视图通过使用模板语法以声明方式将数据呈现到DOM中。当ViewModel更新Model时，它绑定要更新的数据Set到View。