架构是一个演变的过程。
它指的不是随着历史的演变,而是随着项目演变。
通常说架构,指的是架构模式,自创的架构很少。
了解架构模式,才能心有余力的应对项目的发展。
前端项目大概会经历以下这些阶段:
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