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

下面是典型的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)风格的系统，会利用多个实例提供相同的服务，来改善服务的可访问性和可伸缩性，以及性能。这种架构风格可以改善用户可察觉的性能，简单服务响应的延迟。

（编辑：滁州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!