透过现象看本质: 常见的前端架构风格和案例(2)

所以说 VirtualDOM 更大的意义在于开发方式的转变: 声明式、 数据驱动, 让开发者不需要关心 DOM 的操作细节(属性操作、事件绑定、DOM 节点变更)，换句话说应用的开发方式变成了view=f(state), 这对生产力的解放是有很大推动作用的; 另外有了VirtualDOM这一层抽象层，使得多平台渲染成为可能。

当然VirtualDOM或者React，不是唯一，也不是第一个这样的解决方案。其他前端框架，例如Vue、Angular基本都是这样一个发展历程。

上面说了，分层不是银弹。我们通过ReactNative可以开发跨平台的移动应用，但是众所周知，它运行效率或者灵活性暂时是无法与原生应用比拟的。

Taro

Taro 和React一样也采用分层架构风格，只不过他们解决的问题是相反的。React加上一个分层，可以渲染到不同的视图形态;而Taro则是为了统一多样的视图形态: 国内现如今市面上端的形态多种多样，Web、React-Native、微信小程序…… 针对不同的端去编写多套代码的成本非常高，这种需求催生了Taro这类框架的诞生. 使用 Taro，我们可以只书写一套代码, 通过编译工具可以输出到不同的端:

(图片来源: 多端统一开发框架 - Taro)

管道和过滤器

在管道/过滤器架构风格中，每个组件都有一组输入和输出，每个组件职责都很单一, 数据输入组件，经过内部处理，然后将处理过的数据输出。所以这些组件也称为过滤器，连接器按照业务需求将组件连接起来，其形状就像‘管道’一样，这种架构风格由此得名。

这里面最经典的案例是*unix Shell命令，Unix的哲学就是“只做一件事，把它做好”，所以我们常用的Unix命令功能都非常单一，但是Unix Shell还有一件法宝就是管道，通过管道我们可以将命令通过标准输入输出串联起来实现复杂的功能:

# 获取网页，并进行拼写检查。代码来源于wiki 
curl "http://en.wikipedia.org/wiki/Pipeline_(Unix)" |  
sed 's/[^a-zA-Z ]/ /g' |  
tr 'A-Z ' 'a-z 
' |  
grep '[a-z]' |  
sort -u |  
comm -23 - /usr/share/dict/words |  
less 

另一个和Unix管道相似的例子是ReactiveX, 例如RxJS. 很多教程将Rx比喻成河流，这个河流的开头就是一个事件源，这个事件源按照一定的频率发布事件。Rx真正强大的其实是它的操作符，有了这些操作符，你可以对这条河流做一切可以做的事情，例如分流、节流、建大坝、转换、统计、合并、产生河流的河流……

这些操作符和Unix的命令一样，职责都很单一，只干好一件事情。但我们管道将它们组合起来的时候，就迸发了无限的能力.

import { fromEvent } from'rxjs'; 
import { throttleTime, map, scan } from'rxjs/operators'; 
fromEvent(document, 'click') 
 .pipe( 
 throttleTime(1000), 
 map(event => event.clientX), 
 scan((count, clientX) => count + clientX, 0) 
 ) 
 .subscribe(count =>console.log(count)); 

除了上述的RxJS，管道模式在前端领域也有很多应用，主要集中在前端工程化领域。例如'老牌'的项目构建工具Gulp, Gulp使用管道化模式来处理各种文件类型，管道中的每一个步骤称为Transpiler(转译器), 它们以 NodeJS 的Stream 作为输入输出。整个过程高效而简单。

不确定是否受到Gulp的影响，现代的Webpack打包工具，也使用同样的模式来实现对文件的处理, 即Loader, Loader 用于对模块的源代码进行转换, 通过Loader的组合，可以实现复杂的文件转译需求.

// webpack.config.jsmodule.exports = { ... module: { rules: [{ test: /.scss$/, use: [{ loader: "style-loader"// 将 JS 字符串生成为 style 节点 }, { loader: "css-loader"// 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader"// 将 Sass 编译成 CSS }] }] }};复制代码

// webpack.config.jsmodule.exports = { 
 ... 
 module: { 
 rules: [{ 
 test: /.scss$/, 
 use: [{ 
 loader: "style-loader"// 将 JS 字符串生成为 style 节点 
 }, { 
 loader: "css-loader"// 将 CSS 转化成 CommonJS 模块 
 }, { 
 loader: "sass-loader"// 将 Sass 编译成 CSS 
 }] 
 }] 
 } 
}; 
复制代码 

中间件(Middleware)

（编辑：ASP站长网）