全局可变的客户端应用程序状态

Question

这可能是一个非常通用（也许是天真）的问题。

据我所知，＆＃34;客户端＆＃34;的编程模型应用程序（即在浏览器中运行的应用程序）意味着有一个共享的可变对象 - 网页的DOM - 由javascript程序更新。我见过的 Naive 应用程序包含许多更新一个大型共享DOM的JS回调，

这是对的吗？现代JS框架如何管理它？他们如何实现数据隐藏？

Answer 1

现代JS框架使用Javascript语言：

1. 注册对DOM活动的兴趣
2. 回应DOM事件：
   • 直接通过创建或改变对象状态，或
   • 通过发出远程“ajax”请求并使用响应来更新其状态
3. 通过（有选择地）更新DOM来反映其部分或全部修改状态。

就是这样。这是现代客户端应用程序的基本运行循环。

当然，您可以使用许多框架来执行此操作，并且每个框架都以不同方式实现基本范例。像jQuery这样的一些框架倾向于采用“DOM is truth”方法并将其状态数据从DOM挂起，而像Ember.js这样的其他框架则处于另一端并采用“模型是事实”方法并管理状态之外的状态。 DOM。

许多框架中使用的常见模式是MV *，即Model / View / Something。框架将具有某种模型来管理状态，以及某种视图/模板层，以及控制/协调/编排应用程序的其他东西。这可能是不存在的（即数百个DOM事件回调），也可能是结构化和复杂的，具体取决于框架。

由于存在一些有些误导性的评论，值得一提的是，这些框架中的视图层不等同于DOM。最终在DOM中的内容实际上是呈现视图的输出，即DOM是视图的再现。

Answer 2

除非您依赖window.open，iframe或允许您的应用程序跨越多个相互通信的窗口/标签（可能是通过postMessage进行通信），否则您没有其他选择来操作同一文档：那里只有一个文件。

然而，并不是因为操作单个文档，文档本身不能被分成多个封装的协作模块。 Nicholas Zakas在他的Scalable JavaScript Application Architecture演讲中很好地揭示了这个概念。

应该为模块提供非常严格的文档部分。这是他们自己的小沙箱，他们不应该进入其他模块的沙箱。如果他们需要沟通，他们会以非常不同的方式进行沟通（例如通过Mediator）。

今天的大多数框架都依赖于模型 - 视图 - 控制器（MVC）的客户端变体（通常称为MV * / MVW）来实现该目标。我不会在这里详细介绍，但主要目标是将数据与视图（表示）分离，并且通常将视图与在Controller对象中完成的用户操作的处理分离。

直到最近，才有真正的方法来强制执行封装。例如，不可能阻止jQuery插件外部的某些代码修改该插件生成的DOM结构。我们不得不依靠程序员的专业精神来确保他们没有进入插件的内部。

现在，通过引入Web Components等新概念的Shadow DOM规范，可以实现真正的封装。遗憾的是，该规范尚未在浏览器中实现，但幸运的是，我们还有Google的Polymer项目，可以将其视为Web组件垫片。