Javascript AngularJS的单对象模型

我正在AngularJS中试验一些最佳实践，特别是在设计模型方面。在我看来，AngularJS的一个真正力量是

'当模型更改时视图得到更新，反之亦然'

。这导致了一个显而易见的事实

“在任何给定的时间，该模型都是唯一的真理来源 应用程序状态'

现在，在阅读了关于设计正确的模型结构的各种博客文章之后，我决定使用类似“单对象”的方法。这意味着整个应用程序状态在单个JavaScript对象中维护

例如，一个待办事项应用程序

$scope.appState = {
name: "toDoApp",
auth: {
    userName: "John Doe",
    email: "john@doe.com",
    token: "DFRED%$%ErDEFedfereRWE2324deE$%^$%#423",
},

toDoLists: [        
  { name: "Personal List", 
    items: [
      { id: 1, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 0},
      { id: 2, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 1},
      { id: 3, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 0}]
  }, 
  { name: "Work List", 
    items: [
      { id: 1, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : -1},
      { id: 2, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 0},
      { id: 3, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 0}]
  }, 
  { name: "Family List", 
    items: [
      { id: 1, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 2},
      { id: 2, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 0},
      { id: 3, task: "Do something ", dueDate: "2013-01-10 11:56:05", status:"Open", priority : 5}]
  }
]        

})

根据应用程序的复杂性，这个对象将变得巨大。关于这一点，我有以下担忧，并将其标记为问题

• 这种做法是否可取？当应用程序开始扩展时，我将面临哪些缺点和陷阱

当对象的一小部分被更新时，优先级增加，角度会巧妙地重新渲染delta，还是考虑到 对象已更改并重新渲染整个屏幕？（这将导致贫困。） 性能），如果是的话，工作围绕着什么
• 现在，由于整个DOM被顺利地转换为一个JavaScript对象，应用程序必须继续操作这个对象。是吗 拥有适合复杂JavaScript对象操作的工具，如 jQuery是DOM操纵器之王

基于上述疑虑，我强烈发现以下优点

• 数据已被整齐地抽象和组织，以便在任何时候 可以序列化到服务器、firebase或本地导出到用户

• 实现崩溃恢复将很容易，将此功能视为台式机中的“休眠”选项

• 模型和视图完全解耦。例如，A公司可以编写模型来维护状态，而很少有明显的控制器来更改状态 模型和一些与用户交互的基本视图。现在这家公司 可以邀请其他开发人员公开编写自己的视图和 请求A公司提供更多控制器和REST方法。这 将授权精益开发

• 如果我开始将这个对象的版本控制到服务器上，我可以用用户看到网站的方式对用户进行回放，并且可以继续工作而不费吹灰之力，该怎么办。这将作为单页应用程序的真正后退按钮

这种做法是否可取？我会告诉你缺点和陷阱是什么 应用程序开始缩放时的面

总的来说，这可能不是一个好主意，因为它会给这个庞大对象的可维护性带来重大问题，并在整个应用程序中引入可能的副作用，使其难以正确测试

从本质上讲，您不会得到任何封装，因为应用程序中任何地方的任何方法都可能更改了数据模型的任何部分

当对象的一小部分被更新时，表示优先级将增加 角度巧妙地重新渲染三角洲单独或将考虑 对象已更改并重新渲染整个屏幕？（这将导致贫困。） 性能），如果是的话，工作围绕着什么

当在angular中发生摘要时，将处理所有手表以确定发生了什么更改，所有更改都将导致调用手表的处理程序。只要您知道要创建多少DOM元素，并做好数字性能的管理工作，这并不是一个大问题，还有一些选项，如bind once，以避免在出现问题时有太多的观察者（Chrome评测工具非常有助于确定您是否需要解决这些问题并找到正确的性能目标）

现在，由于整个DOM被顺利地翻译成一个JavaScript 对象应用程序必须继续操作此对象。我们需要吗 拥有适合复杂JavaScript对象操作的工具，如 jQuery是DOM操纵器之王

您仍然可以使用jQuery，但您希望在指令中执行任何DOM操作。这允许您在视图中应用它们，而视图实际上是DOM的驱动程序。这可以防止控制器与视图绑定，并使所有内容都可测试。Angular包括jQLite，它是jQuery的一个较小的派生，但如果包括jQuery在angular之前，它将使用它，您可以在angular中使用jQuery的全部功能

数据已被整齐地抽象和组织，以便在任何时候都可以 序列化到服务器、firebase或本地导出到用户。 实现崩溃恢复将很容易，请将此功能视为 桌面中的“休眠”选项

这是真的，但我认为最好是使用定义良好的保存对象来保存恢复状态所需的信息，而不是将应用程序所有部分的整个数据模型存储在一个位置。随着时间的推移，对模型的更改将导致保存的版本出现问题

模型和视图完全解耦。例如，A公司可以编写模型 维护状态和几个明显的控制器以更改模型和 一些与用户交互的基本视图。现在这家公司可以邀请 其他开发人员公开编写自己的视图并请求 A公司需要更多的控制器和REST方法。这将增强 精益开发

只要您在控制器中编写模型，这仍然是一个优点。您还可以编写自定义指令来封装功能和模板，从而大大降低代码的复杂性

如果我启动对服务器的版本控制，并且我可以创建一个 播放给用户的方式与他看到网站的方式相同，并且可以 继续工作，没有麻烦。这将作为一个真正的后退按钮 对于单页应用程序

我认为ngRoute或ui路由器已经为您涵盖了这一点，连接到它们以保存状态确实是一个更好的路由（没有双关语的意图）

<div class="user" ng-controller="UserWidgetCtrl">
   <span>{{appState.auth.userName}}</span>
</div>

<div class="user" ng-controller="UserWidgetCtrl">
  <span>{{user.userName}}</span>
</div>

function UserWidgetCtrl($scope) {
   $scope.user = $scope.appState.auth;
} 

function UserWidgetCtrl($scope, UserService) {
   UserService.getUser().then(function(user) {
     $scope.user = user;
   })
}