JavaScript中的UI模式

Question

您通常在JavaScript中使用哪些UI模式？

通過UI模式我的意思是用於構建和組織UI的最佳實踐，從JavaScript生成/管理（除了像jQuery或YUI之類的庫）。例如，如果您來自.NET世界，則您熟悉MVC（模型 - 視圖 - 控制器）模式系列。在WinForms和ASP.NET的世界中，您將會見到Model-View-Presenter。在WPF中，您很可能會發現MVVM（模型 - 視圖 - 視圖模型）方法。

那麼JavaScript呢？

Answer 1

模式通常是語言不可知的。如果一個模式具有價值，除了某些邊緣情況，無論您使用何種語言或技術，它都會具有價值。以MVC。無論模型是使用RDBMS還是其他一些技術實現，無論視圖是HTML還是Swing還是X，將模型與控制器視圖分離的概念都具有價值。

在哪裏看到應用了某些模式更多在一種技術上而不是另一種技術上，它通常意味着技術開發人員有一種特殊的方法，他們比其他人更全面地支持。

JavaScript本身並沒有對你施加任何特定的模式。一些JavaScript框架，比如YUI或Dojo或Glow將傾向於引導你一個方向比另一個方向更多。

在一天結束時，看看你正在解決的問題，資源和經驗，並遵循有意義的模式。

Answer 2

據我所知，還沒有具體的Javascript模式。但我認爲有一些像小部件（組件）方法的潛力。由於我們主要使用JavaScript來授權我們的html代碼。從邏輯上講，我們應該將每個javascript對象連接到html標記。所以這裏我們有一些像Model（jsObject）+ View（HTMLrepresentation）的東西。爲了獲得MVC我們需要控制器，並且我們有這個事件。在這種情況下，我們將會輕鬆地封裝extensibel組件。

例如：

// 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（las中的一個示例是div），並用組件自動添加腳本和id。

現在。我向你展示了兩個例子，我將解釋爲什麼第二個太具體。所有東西都在可訪問性和性能（和內存泄漏）。如果您經常刷新組件的所有html，它將會閃爍，您還需要設置所有動態事件並檢查是否有內存泄漏。但是，如果JS失敗，主要的問題是 - 你的應用程序將不會顯示任何內容

所以我更喜歡在這兩個選擇:)並在他們的地方使用一切。

Answer 3

我想推薦羅斯哈默斯&達斯汀迪亞茲的書，Pro JavaScript Design Patterns，絕對是這個問題上最好的資源，絕對值得一讀。

還有’也是JavaScript MVC在A List Apart的最新一期非常有趣的文章。

Answer 4

一個很好的方法來構建GUI應用程序是瀏覽器：

1. 使用使用CSS UI樣式的JavaScript UI邏輯
2. 使用標記的UI佈局

大多數現代的GUI框架（ExtJS，Dojo等）提供的API可以極大地幫助在JavaScript中構建GUI。但是另一個GUI框架Ample SDK帶來了前面提到的關注點分離。它允許使用基於XML的語言（XHTML，XUL，SVG）進行佈局，CSS用於風格，DOM API用於UI邏輯。

爲了管理您可以使用MVC還是有點更先進的模式PAC客戶端GUI應用程序，爲前者 - 有一個PureMVC實現可

看看下面的代碼片段（只關注UI邏輯，而不是應用程序邏輯，以與MVC/PAC內置）：

的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) 
} 

Answer 5

退房一個網站叫quince。我不確定這裏有多少模式是javascript ui模式。但對於UI模式，這是一個相當不錯的資源

Answer 6

模式並不總是語言不可知的。很多經典的設計模式在JavaScript中都是毫無意義的，因爲我們不需要在嚴格的語言範例中解決的很多解決方法。

MVC不適合客戶端Web開發的理由，但更多的是情境。

首先，我認爲時間和痛苦已經證明，典型的Web應用程序最好被視爲兩個獨立的應用程序。發生在瀏覽器上的事件和服務器上發生的事件。在這兩者之間建立的依賴關係越少，根據我的經驗，更靈活，可維護和更簡單的Web應用程序就會被修改。 M是商業邏輯（人們傾向於不精確地與「數據庫層」IMO）混淆。

在這種情況下，MVC的問題是我們不想在客戶端公開業務邏輯，並試圖將整個應用程序嵌入到一個可怕的http-divide-hiding構造中，這已被證明是痛苦的，正如我所提到的。

然而，用於分離數據或「查看模型」問題的非常類似的模式可以很好地工作。