前端架构

原文链接：https://www.zhihu.com/question/26646855

架构是一个演变的过程。
它指的不是随着历史的演变，而是随着项目演变。
通常说架构，指的是架构模式，自创的架构很少。
了解架构模式，才能心有余力的应对项目的发展。

前端项目大概会经历以下这些阶段：
1. 整体渲染
2. 结构行为表现分离
3. 隔离逻辑单元
4. 插件
5. 模块
6. 前端MVC/MVVM
7. 组件
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
下面分别介绍一下：
1. 整体渲染

所有页面代码放到了一个html文档中，适合个人实验室项目。
新建一个文件，快速的验证某个功能或者开发某个组件，再移植到开发环境中。
优点：开发速度快，执行过程清晰
不足：不容易分工合作

2. 结构行为表现分离

当页面中有了好几个Script和Style片段，这时候就想着是不是该把它们放到一个文件中了。
不然总在一个页面拖上拖下的改动太麻烦了。
结构：HTML
行为：JavaScript
表现：CSS

优点：关注点分离
不足：职责不明确

3. 隔离逻辑单元

一个JavaScript文件太大了，里面包含了很多不同的逻辑功能。
还是把独立的功能提取出来吧，这样省的每次都在一个文件中改。
优点：面向复用
不足：功能点分散

4. 插件
开闭原则：一个软件实体如类、模块和函数应该对扩展开放，对修改关闭。
这让我想起了小时候的红白机。

这个借鉴了微内核架构的思想，整个网站由一个很小的核心构成，所有功能都是嫁接上去的。
这样核心基本上稳定了，只剩下增量的插件开发。
优点：对需求的响应快
不足：插件难以规范化

5. 模块
当网站有了很多种独立的部分，微内核已经不能胜任了，因为各个插件之间产生了关联。
就需要一个处理模块依赖的东西出现。
于是人们定义了模块规范，分别有自己的处理模块依赖的办法。

主要以下几种模块规范
（1）AMD规范（用户客户端，RequireJS实现）

（2）CommonJS规范（用于服务端，Browserify实现）

（3）EcmaScript 6 Module

6. 前端MVC/MVVM
不止后端有MVC/MVVM，同样的思想也可以用在前端，并且人们已经实现了。
主要目的是为了处理复杂的单页面应用，让三个层面独立开发，减轻脑力负担。

View：用户界面
Model：数据表的实体类
Controller/ViewModel：处理View和Model之间的关系
主要实现有以下几个：
（1）Backbone

（2）Knockout

（3）AngularJS

7. 组件
组件并不是一个新兴的概念，但是React.js强制组件化，所以看来才那么新颖。
它把JavaScript，CSS，HTML重新打包，当做一个逻辑单元来看待。
有点像中国古代的“活字印刷”，不是吗，我们祖先的智慧啊。
单一职责原则：一个类应该只有一个发生变化的原因。
组合/聚集复用原则：尽量使用合成/聚合，而不是使用继承。

React.js