您通常在JavaScript中使用哪些UI模式？
通过UI模式，我指的是用于构建和组织UI的最佳实践，从JavaScript生成/管理（除了jQuery或YUI之类的库）。
例如，如果您来自.NET世界，那么您熟悉MVC（模型 - 视图 - 控制器）模式系列。在WinForms和ASP.NET的世界中，您将遇到Model-View-Presenter。在WPF中，您很可能会找到MVVM（Model-View-ViewModel）方法。
那JavaScript呢？
您通常在JavaScript中使用哪些UI模式？
通过UI模式，我指的是用于构建和组织UI的最佳实践，从JavaScript生成/管理（除了jQuery或YUI之类的库）。
例如，如果您来自.NET世界，那么您熟悉MVC（模型 - 视图 - 控制器）模式系列。在WinForms和ASP.NET的世界中，您将遇到Model-View-Presenter。在WPF中，您很可能会找到MVVM（Model-View-ViewModel）方法。
那JavaScript呢？
模式通常与语言无关。如果一个模式具有价值，除非某些边缘情况，无论您使用何种语言或技术，它都将具有价值。以MVC为例。无论模型是使用RDBMS还是其他技术实现，无论视图是HTML还是Swing还是X，将模型与视图从控制器分离的概念都具有价值。
如果您看到某些技术在某种技术中的应用比在另一种技术中更多，那么通常只意味着该技术的开发人员采用的方法比其他技术更全面地支持。
JavaScript本身并没有对您施加任何特定模式。一些JavaScript框架，如YUI或Dojo或Glow，往往会引导您一个方向而不是另一个方向。
在一天结束时，查看您正在解决的问题，您拥有的资源和经验，并遵循有意义的模式。
我想推荐Ross Harmes和Dustin Diaz的书， 专业JavaScript设计模式，绝对是这个主题的最佳资源，绝对值得一读。
还有一篇非常有趣的文章 JavaScript MVC 在最新一期 一份清单。
构建GUI应用程序的一个好方法是浏览器：
大多数现代GUI框架（ExtJS，Dojo等）提供的API大大有助于在JavaScript中构建GUI。但是还有另一个GUI框架 丰富的SDK 这带来了前面提到的关注点分离。它允许使用基于XML的语言（XHTML，XUL，SVG）进行布局，使用CSS作为样式，使用DOM API进行UI逻辑。
要编排一个客户端GUI应用程序，您可以使用MVC或更高级的模式PAC，就像前者一样 - 有一个 PureMVC的 实施可用
看一下下面的代码片段（仅涉及使用MVC / PAC构建的UI逻辑，而不是app逻辑）：
的index.html
<script type="application/ample+xml">
<xul:tabbox onselect="fOnSelect(event)"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<xul:tabs>
<xul:tab label="checkbox" />
<xul:tab label="textbox" />
<xul:tab label="datepicker" />
</xul:tabs>
<xul:tabpanels>
<xul:tabpanel>
<xul:checkbox />
</xul:tabpanel>
<xul:tabpanel>
<xul:textbox />
</xul:tabpanel>
<xul:tabpanel>
<xul:datepicker />
</xul:tabpanel>
</xul:tabpanels>
</xul:tabbox>
</script>
index.css
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|tab:focus {
color: red;
}
index.js
function fOnSelect(oEvent) {
alert(oEvent.currentTarget.selectedItems.length)
}
据我所知，Javascript还没有特定的模式。但我认为有可能出现像小部件（组件）方法这样的东西。因为我们主要使用javascript来强化我们的html代码。从逻辑上讲，我们应该将每个javascript对象连接到html标记。所以这里我们有类似Model（jsObject）+ View（HTMLrepresentation）的东西。为了获得MVC，我们需要控制器，我们有这方面的事件。在这种情况下，我们将容易填充扩展组件。
例如：
// this is a part of some FormValid.js
<script>
function FormValid(){
}
FormValid.prototype.validate=function(){...}
</script>
//this is our HTML
<form id="form1"...onsubmit="this.jsObject.validate();">
</form>
<script>
//all the following stuff could be solved in one line, but you need to create some helper. Like Components.Attach("FormValid").to("form1");
var newObj=new FormValid()
var form=document.getElementById("form1");
from.jsObject=newObj;
newObj.htmlObj=form;
</script>
我也有使用模板引擎的想法 Zparser 分离视图和模型。我正在为此开发js库，所以我现在正在讨论这个问题。
我们有核心对象 视图 方法。我们所有的课程都像原型一样。这个方法得到了 模板 类的属性和使用一些模板解析器基于我们的模型生成HTML。此HTML插入到htmlObj节点中，以便更新对象的VIEW。这基本上是一个想法，我们的代码变成：
// this is a part of some FormValid.js
<script>
function FormValid(){
}
Components.extendCore(FormValid);
FormValid.prototype.validate=function(){...}
</script>
FormValid.prototype.templates={
main:'<form class="form1"...onsubmit="this.jsObject.validate();">...</form>'
}
//this is our HTML
<div id="form1"></div>
<script>
Components.Attach("FormValid").to("form1");
</script>
我仍然认为最后一个内联 <script> 应该在那里，它不是混合逻辑与表示，因为这是组件 - 实体。没有另一个没有意义。实际上这应该是应用程序的一部分。像组件的html（在一个例子中是div）之类的东西应该被定义并用组件包装，组件将自动添加脚本和id。
现在。我给你看了两个例子，我将解释为什么第二个太具体了。
所有的东西都是可访问性和性能（以及内存泄漏）。如果你经常刷新组件的所有html - 它会闪烁，你还需要设置所有动态事件并检查所有内存泄漏。但是如果JS失败的主要问题 - 你的应用程序将什么都不显示。
所以我更喜欢在这两者之间做出选择:)并在他们的地方使用一切。
查看一个名为的网站 桲。我不确定这里有多少模式是javascript ui模式。但这对于ui模式来说是一个非常好的资源
模式并不总是与语言无关。许多经典设计模式在JavaScript中毫无意义，因为我们不需要在更严格的语言范例中解决许多解决方法。
MVC并不适合客户端Web开发，但更为情境化。
首先，我认为时间和痛苦已经证明，典型的Web应用程序最好被视为两个独立的应用程序。在浏览器上发生的那个以及在服务器上发生的那个。您在两者之间建立的依赖关系越少，我的体验中就会更灵活，可维护且更容易修改Web应用程序。 M是业务逻辑（人们倾向于与“数据库层”IMO错误地混淆）。
在这种情况下MVC的问题在于我们不希望在客户端公开业务逻辑，并且试图将整个应用程序整合到一个可怕的http-divide-hidden结构中已经证明是痛苦的，正如我所提到的。
但是，将数据或“视图模型”问题分开的非常相似的模式可以很好地工作。