javascript中的用户界面模式

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

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

JavaScript本身不会对您施加任何特定的模式。一些JavaScript框架,如yui、dojo或glow,往往会引导您朝一个方向前进。

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

我想推荐罗斯·哈姆斯和达斯汀·迪亚兹的书, Pro JavaScript Design Patterns 是这方面最好的资源,绝对值得一读。

还有一篇非常有趣的文章 JavaScript MVC 在最新一期的 A List Apart .

构建GUI应用程序的一个好方法是使用浏览器:

1. 使用标记进行UI布局
2. 使用javascript用户界面逻辑
3. 使用CSS进行用户界面样式

大多数现代的图形用户界面框架(extjs、dojo等)都提供API,这些API完全有助于在javascript中构建图形用户界面。但是还有另一个图形用户界面框架 Ample SDK 这使得前面提到的关注点分离。它允许使用基于XML的语言(xhtml、xul、svg)进行布局,CSS用于样式,DOM API用于UI逻辑。

要协调客户端GUI应用程序,您可以使用MVC或稍微高级一点的模式PAC,对于前者,有一个 PureMVC 可用的实施

请看下面的代码片段(只涉及要用MVC/PAC构建的UI逻辑,而不是应用程序逻辑):

索引文件

<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>

索引文件

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|tab:focus {
    color: red;
}

索引文件

function fOnSelect(oEvent) {
    alert(oEvent.currentTarget.selectedItems.length)
}

据我所知,还没有针对javascript的特定模式。但我认为有一种可能性,比如小部件(组件)方法。因为我们主要使用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。此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)应该用组件定义和包装,该组件将自动添加脚本和ID。

现在。我给你们举了两个例子,我会解释为什么第二个太具体。
所有的东西都具有可访问性和性能(以及内存泄漏)。如果您经常刷新组件的所有HTML——它会闪烁,您还需要重新设置所有动态事件,并检查所有内容是否存在内存泄漏。但是,如果JS失败的话,主要问题是——您的应用程序将不会显示任何内容。

所以我宁愿在这两者之间做出选择:)并且在他们的位置上使用一切。

查看一个名为 quince . 我不确定这里有多少模式是JavaScriptUI模式。但对于UI模式来说,这是一个很好的资源

模式并不总是语言不可知论。很多经典的设计模式在JavaScript中都是毫无意义的,因为我们不需要他们在更严格的语言范例中解决的大量解决方案。

然而,MVC不适合客户端Web开发的原因更具情境性。

首先,我认为时间和痛苦已经证明了典型的Web应用程序最好作为两个独立的应用程序来处理。发生在浏览器上的和发生在服务器上的。你在两者之间建立的依赖关系越少,我的经验中修改的Web应用程序就越灵活、可维护和容易。 M是业务逻辑(人们往往不准确地将其与“数据库层”IMO混淆)。

在这种情况下,MVC的问题是,我们不想在客户端公开业务逻辑,并试图将整个应用程序分解成一个可怕的HTTP划分隐藏结构,这已经证明了我提到的痛苦。

然而,在分离数据或“视图模型”关注点的非常相似的模式中,可以相当好地工作。