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

下面是典范的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)气魄威风凛凛的体系，会操作多个实例提供沟通的处事，来改进处事的可会见性和可伸缩性，以及机能。这种架构气魄威风凛凛可以改进用户可察觉的机能，简朴处事相应的耽误。

（编辑：湖南网）

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