Web前端架构设计
作者：毫末科技
邮箱：hxg@haomo-studio.com
以下内容是公司常用的内容。对于项目上不需要用到的部分，请删除
修订记录：
2017年12月30日 胡小根 初始化文档
1 前端MVVM架构
MVVM把View和Model的同步逻辑自动化了。以前Presenter负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。 这里我们使用Vue来完成这个栗子。
1.1 Model
在MVVM中，我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为（格式化数据由View的负责），这里可以把它理解为一个类似json的数据对象。
var data = {
val: 0
};
1.2 View
和MVC/MVP不同的是，MVVM中的View通过使用模板语法来声明式的将数据渲染进DOM，当ViewModel对Model进行更新的时候，会通过数据绑定更新到View。写法如下：
<div id="myapp">
<div>
<span>{{ val }}rmb</span>
</div>
<div>
<button v-on:click="sub(1)">-</button>
<button v-on:click="add(1)">+</button>
</div>
</div>
1.3 ViewModel
ViewModel大致上就是MVC的Controller和MVP的Presenter了，也是整个模式的重点，业务逻辑也主要集中在这里，其中的一大核心就是数据绑定，后面将会讲到。与MVP不同的是，没有了View为Presente提供的接口，之前由Presenter负责的View和Model之间的数据同步交给了ViewModel中的数据绑定进行处理，当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新。
new Vue({
el: '#myapp',
data: data,
methods: {
add(v) {
if(this.val < 100) {
this.val += v;
}
},
sub(v) {
if(this.val > 0) {
this.val -= v;
}
}
}
});
整体来看，比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新（以前用jQuery操作DOM很繁琐）的问题。因为在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性。
2 Angular架构
2.1 AngularJS是什么
AngularJS是一个开源Web应用程序框架。最初是由MISKO Hevery和Adam Abrons于2009年开发，现在是由谷歌维护。
2.2 特性
- AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。
- AngularJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型-视图-控制器)的方式来编写客户端应用程序。
- AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。
- AngularJS是开源的，完全免费的，并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。
总体来说，AngularJS是一个用来构建大型应用，高性能的Web应用程序的框架，同时使它们易于维护。
2.3 核心特征
- 数据绑定: 模型和视图组件之间的数据自动同步。
- 适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。
- 控制器: 这些Javascript函数绑定到特定的范围。
- 服务: AngularJS配有多个内置服务，例如$http可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。
- 过滤器: 从一个数组的条目中选择一个子集，并返回一个新的数组。
- 指令: 指令是关于DOM元素标记(如元素，属性，CSS等等)。这些可以被用来创建作为新的，自定义部件的自定义HTML标签。AngularJS设有内置指令(如：ngBind，ngModel...)
- 模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html)，或使用“谐音”在一个页面多个视图。
- 路由: 它是切换视图的概念。
- 模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型，视图和控制器)，每个都有不同的职责。
- 深层链接: 深层链接，可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。
- 依赖注入: AngularJS有一个内置的依赖注入子系统，开发人员通过使应用程序从而更易于开发，理解和测试。
AngularJs程序分为3部分：模板，表现层逻辑，数据。
模板：我们用html，css写的ui视图代码，其中包含AngularJs的指令，表达式，并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令(directive)可以由我们自由扩展。
表现层逻辑：包括应用程序逻辑和行为。用JavaScript定义作为视图控制器逻辑。在AngularJs作为MVC框架，在控制器中我们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为(Action)逻辑。
数据：视图对象(viewobject)需要被AngularJs Scope(1.0中作为service出现)引用，可以使任何类型的JavaScript对象，数组，基本类型，对象。并且AngularJs会自动异步更新模型，即在ui发生改变的时他会自动刷新模型(mode)，反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter，setter的一些列方法。