|
下面是典型的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)风格的系统，会利用多个实例提供相同的服务，来改善服务的可访问性和可伸缩性，以及性能。这种架构风格可以改善用户可察觉的性能，简单服务响应的延迟。
（编辑：辽源站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
