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

下面是典型的AngularJS代码, 视图层:

<h2>Todo</h2> 
<div ng-controller="TodoListController as todoList"> 
 <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
 [ <a href="" ng-click="todoList.archive()">archive</a> ] 
 <ul class="unstyled"> 
 <li ng-repeat="todo in todoList.todos"> 
 <label class="checkbox"> 
 <input type="checkbox" ng-model="todo.done"> 
 <span class="done-{{todo.done}}">{{todo.text}}</span> 
 </label> 
 </li> 
 </ul> 
 <form ng-submit="todoList.addTodo()"> 
 <input type="text" ng-model="todoList.todoText" size="30" 
 placeholder="add new todo here"> 
 <input class="btn-primary" type="submit" value="add"> 
 </form> 
</div> 

逻辑层:

angular.module('todoApp', []) 
 .controller('TodoListController', function() { 
 var todoList = this; 
 todoList.todos = [ 
 {text:'learn AngularJS', done:true}, 
 {text:'build an AngularJS app', done:false}]; 
 todoList.addTodo = function() { 
 todoList.todos.push({text:todoList.todoText, done:false}); 
 todoList.todoText = ''; 
 }; 
 todoList.remaining = function() { 
 var count = 0; 
 angular.forEach(todoList.todos, function(todo) { 
 count += todo.done ? 0 : 1; 
 }); 
 return count; 
 }; 
 todoList.archive = function() { 
 var oldTodos = todoList.todos; 
 todoList.todos = []; 
 angular.forEach(oldTodos, function(todo) { 
 if (!todo.done) todoList.todos.push(todo); 
 }); 
 }; 
}); 

至于MVP、MVVM，这些MVC模式的延展或者升级，网上都大量的资源，这里就不予赘述。

Redux

Redux是Flux架构的改进、融合了Elm语言中函数式的思想. 下面是Redux的架构图:

从上图可以看出Redux架构有以下要点:

• 单一的数据源.
• 单向的数据流.

单一数据源, 首先解决的是传统MVC架构多模型数据流混乱问题(如下图)。单一的数据源可以让应用的状态可预测和可被调试。另外单一数据源也方便做数据镜像，实现撤销/重做，数据持久化等等功能

单向数据流用于辅助单一数据源, 主要目的是阻止应用代码直接修改数据源，这样一方面简化数据流，同样也让应用状态变化变得可预测。

上面两个特点是Redux架构风格的核心，至于Redux还强调不可变数据、利用中间件封装副作用、范式化状态树，只是一种最佳实践。还有许多类Redux的框架，例如Vuex、ngrx，在架构思想层次是一致的:

复制风格

基于复制(Replication)风格的系统，会利用多个实例提供相同的服务，来改善服务的可访问性和可伸缩性，以及性能。这种架构风格可以改善用户可察觉的性能，简单服务响应的延迟。

这种风格在后端用得比较多，举前端比较熟悉的例子，NodeJS. NodeJS是单线程的，为了利用多核资源，NodeJS标准库提供了一个cluster模块，它可以根据CPU数创建多个Worker进程，这些Worker进程可以共享一个服务器端口，对外提供同质的服务, Master进程会根据一定的策略将资源分配给Worker:

const cluster = require('cluster'); 
const http = require('http'); 
const numCPUs = require('os').cpus().length; 
if (cluster.isMaster) { 
 console.log(`Master ${process.pid} is running`); 
 // Fork workers.for (let i = 0; i < numCPUs; i++) { 
 cluster.fork(); 
 } 
 cluster.on('exit', (worker, code, signal) => { 
 console.log(`worker ${worker.process.pid} died`); 
 }); 
} else { 
 // Workers可以共享任意的TCP连接 // 比如共享HTTP服务器  
 http.createServer((req, res) => { 
 res.writeHead(200); 
 res.end('hello world 
'); 
 }).listen(8000); 
 console.log(`Worker ${process.pid} started`); 
} 
复制代码 

利用多核能力可以提升应用的性能和可靠性。我们也可以利用PM2这样的进程管理工具，来简化Node集群的管理，它支持很多有用的特性，例如集群节点重启、日志归集、性能监视等。

（编辑：ASP站长网）