问JavaScript中的UI模式

EN

模式通常是语言不可知的。如果一个模式是有价值的，那么除了某些边缘情况之外，无论你使用什么语言或技术，它都会有价值。以MVC为例。无论模型是用RDBMS实现的还是用其他技术实现的，无论视图是HTML、Swing还是X，将模型与视图和控制器分离的概念都是有价值的。

当您看到某些模式在一种技术中比在另一种技术中应用得更多时，这通常只是意味着该技术的开发人员拥有一种他们比其他技术更全面地支持的特定方法。

JavaScript本身并不会强加给您任何特定的模式。一些JavaScript框架，如YUI、Dojo或Glow，往往会引导您一个方向而不是另一个方向。

在一天结束的时候，看看你正在解决的问题，你拥有的资源和经验，并遵循有意义的模式。

我想推荐Ross Harmes和Dustin Diaz的书，Pro JavaScript Design Patterns，绝对是这个主题的最好的资源，绝对值得一读。

在最新一期的A List Apart上还有一篇关于JavaScript MVC的非常有趣的文章。

据我所知，目前还没有针对Javascript的特定模式。但我认为有可能出现类似于widgets(组件)的方法。因为我们主要使用javascript来增强我们的html代码。从逻辑上讲，我们应该将每个javascript对象连接到html标记。所以这里我们有类似于模型(JsObject)+视图(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。这个超文本标记语言被插入到htmlObj节点中，这样我们的对象的视图就会更新。这基本上是一个想法，我们的代码变成了：

// 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的组件(在las中的一个例子是div)应该被定义，并与组件包装，这将自动添加脚本和ids。

现在。我给你看了两个例子，我会解释为什么second太具体了。

所有的东西都与可访问性和性能(以及内存泄漏)有关。如果你要频繁刷新组件的所有html -它会闪烁，你还需要重新设置所有动态事件，并检查所有内存泄漏。但是如果JS失败了，主要的问题是你的应用程序什么都不会显示。

因此，我更喜欢在这两者之间进行选择：)，并在各自的位置上使用一切。