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

这可能是一个非常普通的问题（也许很幼稚）

据我所知，“客户端”应用程序（即在浏览器中运行的应用程序）的编程模型意味着有一个共享的可变对象——网页的DOM——将由javascript程序更新。我见过的幼稚应用程序由几十个JS回调组成，它们更新一个大型共享DOM

---

对吗？现代JS框架如何管理它？如何实现数据隐藏？

现代JS框架使用Javascript语言：

注册对DOM事件的兴趣

响应DOM事件：

• 直接通过创建或改变对象状态，或
• 通过发出远程“ajax”请求并使用响应更新其状态

通过（有选择地）更新DOM来反映其部分或全部修改状态

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

当然，有很多框架可以用来实现这一点，每个框架实现基本范式的方式都不同。一些框架，如jQuery，倾向于采用“DOM即真理”的方法，将其状态数据挂起，而其他框架，如Ember.js，则处于相反的一端，采用“模型即真理”的方法，在DOM之外管理状态

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

---

有一点值得一提，因为有一些稍有误导性的评论，那就是这些框架中的视图层并不等同于DOM。DOM中的最终结果实际上是呈现视图的输出，即DOM是视图的格式副本。

除非您依赖于

窗口。打开
、iFrame或允许您的应用程序跨越多个相互通信的窗口/选项卡（可能是通过
postMessage
）进行通信，您没有其他选择来操作同一个文档：只有一个文档

然而，并不是因为单个文档被操纵，文档本身就不能被划分为多个封装的协作模块。尼古拉斯·扎卡斯在他的演讲中很好地阐述了这个概念

模块应该在其操作的文档中有一个非常严格的部分。这是他们自己的小沙箱，他们不应该进入其他模块的沙箱。如果他们需要沟通，他们会以一种非常不耦合的方式进行沟通（例如通过网络）

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

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

现在，有了引入新概念的规范，例如，真正的封装将能够发生。不幸的是，该规范尚未在浏览器中实现，但对我们来说幸运的是，谷歌的项目可以被视为Web组件垫片。
“意味着存在一个共享的可变对象——网页的DOM”-为什么这意味着？@nnnnnn我希望我错了。这就是我在工作中看到的。SPA（单页应用程序）由数百个JS回调组成，这些回调更新了一个巨大的全局DOM和一个巨大的“模型”？有一些框架是这样对待它的。是的，我认为DOM就是“视图”。“你能用几句话解释一下现代框架在原则上是如何处理这个DOM的吗？”Michael补充道。应用程序可以像我描述的那样结构化，而不使用任何第三方框架。看一看，这将有助于理解核心概念。