2008-08-28 72 views
16

你的javaScript代碼是如何組織的?它遵循像MVC這樣的模式,還是其他的東西?javaScript客戶端代碼的替代「架構」方法?

我一直在一個側面項目工作了一段時間,我越來越多,我的網頁變成了一個功能齊全的應用程序。現在,我堅持使用jQuery,但是,頁面上的邏輯正在增長,以至於某些組織或者敢說我需要「架構」。我的第一種方法是「MVC-ISH」:

  • 的「模式」是一個JSON樹獲取與助手
  • 的觀點是DOM加上類,調整它
  • 擴展的控制器對象在那裏我連接事件處理和啓動視圖或模型操作

但是,我對其他人如何構建更實質的javaScript應用程序非常感興趣。我對GWT或其他面向服務器的方法不感興趣......只是在「javaScript + <通用Web服務-y這裏的東西>」

的方法中注意:早些時候我說過javaScript「不是真的OO ,不是真正的功能「。我認爲,這讓每個人都分心。讓我們這樣說吧,因爲javaScript在很多方面都是獨一無二的,而我來自強類型的背景,我不想強​​迫我所知道的範例,而是用非常不同的語言開發的。

回答

6

..但JavaScript有很多方面,面向對象。

考慮一下:

var Vehicle = jQuery.Class.create({ 
    init: function(name) { this.name = name; } 
}); 

var Car = Vehicle.extend({ 
    fillGas: function(){ 
     this.gas = 100; 
    } 
}); 

我用這個技術來創建具有自己的狀態頁面級的JavaScript類,這有助於保持它包含了(我經常確定我可以重複使用,把地區進入其他課程)。

如果組件/服務器控件具有自己的腳本來執行,但是當您可能在同一頁面上有多個實例時,這也特別有用。這使狀態分開。

0

不是100%確定這裏是什麼意思,但是我會說在過去6年做了ASP.NET之後,我的網頁現在主要由JavaScript驅動,一旦基本頁面呈現由服務器完成。我使用JSON處理所有事情(已經使用了大約3年),並使用MochiKit來滿足我的客戶端需求。

順便說一下,JavaScript OO,但由於它使用了原型繼承,所以人們不會以這種方式給它信用。我也會爭辯說它也是功能性的,這一切都取決於你如何編寫它。如果你真的對函數式編程風格感興趣,請查看MochiKit - 你可能會喜歡它;它傾向於JavaScript的函數式編程方面。

2

MochiKit非常棒 - 我的第一個愛,就是說,就像js庫一樣。但是我發現儘管MochiKit具有非常明確的語法,但對於我來說,Prototype/Scriptaculous或jQuery對我來說並沒有那麼舒適。

我想如果你知道或者喜歡Python,那麼MochiKit對你來說是一個很好的工具。

1

非常感謝您的回答。過了一段時間,我想發佈我迄今爲止學到的東西。

到目前爲止,我看到一個非常大的差異使用類似Ext的辦法,和其他人一樣JQuery UIScriptaculousMochiKit

隨着外部,進入HTML只是一個單一的佔位符 - UI放在這裏。從此,在JavaScript中描述了所有內容。在另一個(也許更強大的)API層下,DOM交互被最小化。

用另一隻包,我發現自己做了一下HTML設計開始,然後直接用時髦的效果延長DOM,或只是更換表單輸入這裏,此外還有。

主要的差異開始發生,因爲我需要處理事件處理等。由於模塊需要互相「交談」,我發現自己需要離開DOM,將其抽象分離。

我注意到許多這些庫還包括一些有趣的模塊化技術。在Ext網站上有一個非常明確的描述,其中包括a fancy way to "protect" your code with modules

我沒有完全評估的新玩家是Sproutcore。這看起來像Ext中的方法,其中隱藏了DOM,而且你最想處理項目的API。

1

特里斯坦,你會發現,當您嘗試架構JavaScript作爲MVC應用程序也容易拿出短在一個區域 - 模型。要處理的最困難的領域是模型,因爲數據不會在整個應用程序中持續存在,本質上,模型在客戶端似乎會一直髮生變化。你可以標準化你從服務器傳遞和接收數據的方式,但那時模型並不屬於JavaScript--它屬於你的服務器端應用程序。

我曾經看到過一次嘗試,有人創建了一個在JavaScript中對數據建模的框架,就像SQLite屬於應用程序的方式一樣。它就像Model.select(「Product」)和Model.update(「Product」,「Some data ...」)。這基本上是一種對象符號,它持有一堆數據來管理當前頁面的狀態。但是,刷新一分鐘後,所有數據都將丟失。我可能沒有語法,但你明白了。

如果你使用的是jQuery,那麼Ben的方法確實是最好的。用你的函數和屬性擴展jQuery對象,然後劃分你的「控制器」。我通常通過將它們放入單獨的源文件中並逐節加載它們來完成此操作。例如,如果它是一個電子商務網站,我可能會有一個JS文件,其中包含處理結帳過程功能的控制器。這傾向於保持輕量級且易於管理。

1

只是一個快速澄清。

編寫非面向服務器的GWT應用程序是完全可行的。我假設從面向服務器的角度來看,你的意思是需要基於Java後端的GWT RPC。

我已經在客戶端單獨編寫了非常「MVC-ish」的GWT應用程序。

  • 該模型是一個對象圖。儘管您使用Java進行代碼編寫,但在運行時,對象在JavaScript中,不需要客戶端或服務器端的任何JVM。GWT還支持JSON,並提供完整的解析和操作支持。您可以輕鬆連接到JSON Web服務,請參閱2瞭解JSON混搭示例。
  • 視圖由標準的GWT小部件(加上一些我們自己的複合小部件)組成
  • 控制器層通過Observer模式與View整齊分離。

如果你的「強類型」背景是Java或類似的語言,我認爲你應該認真考慮GWT的大型項目。對於小型項目,我通常更喜歡jQuery。即將發佈的GWTQuery與GWT 1.5一起工作可能會改變,但由於jQuery的插件豐富,不會在不久的將來。

3

JavaScriptMVC是組織和開發大型JS應用程序的絕佳選擇。

建築設計非常深思熟慮。有4個東西你都不會做的JavaScript:

  1. 響應事件
  2. 請求數據/操縱服務(阿賈克斯)
  3. 添加特定領域的信息Ajax響應。
  4. 更新DOM

JMVC這些分裂成模型,視圖,控制器模式。

首先,也許是最重要的優點是控制器。控制器使用事件委託,因此您只需爲您的頁面創建規則,而不是附加事件。他們還使用控制器的名稱來限制控制器的工作範圍。這使得你的代碼具有確定性,這意味着如果你看到一個事件發生在'#todos'元素中,你就知道必須有一個todos控制器。

$.Controller.extend('TodosController',{ 
    'click' : function(el, ev){ ... }, 
    '.delete mouseover': function(el, ev){ ...} 
    '.drag draginit' : function(el, ev, drag){ ...} 
}) 

接下來是模型。 JMVC提供了強大的類和基本模型,可讓您快速組織Ajax功能(#2)並用特定域功能(#3)包裝數據。完成後,您可以使用控制器中的模型,例如:

Todo.findAll({after:new Date()},myCallbackFunction);

最後,一旦你的待辦事項回來,你必須顯示它們(#4)。這是你使用JMVC視圖的地方。

'.show click' : function(el, ev){ 
    Todo.findAll({after: new Date()}, this.callback('list')); 
}, 
list : function(todos){ 
    $('#todos').html(this.view(todos)); 
} 

在 '視圖/待辦事項/ list.ejs'

<% for(var i =0; i < this.length; i++){ %> 
    <label><%= this[i].description %></label> 
<%}%> 

JMVC提供比架構多得多。它可以幫助你在開發週期與不斷一部分:

  • 代碼生成
  • 集成瀏覽器,硒和犀牛測試
  • 文檔
  • 腳本壓縮
  • 錯誤報告