Javascript架構/應用程序結構最佳實踐？

Question

這些存在嗎？

多年來，我一直是大型強類型OO語言（Java和C＃）的奴隸，並且是Martin Fowler及其同類的奉獻者。 Javascript，由於它的松散類型和功能性似乎不適合我習慣的習語。

組織javascript富客戶端的最佳做法是什么？ 我感興趣的是從哪里保存你的代碼（一個文件或多個文件）到MVC模式到四個模式到分層。

沒有把東西放在全局命名空間似乎是唯一的共識。

我使用JQuery作為“擴展API”。

Answer 1

我喜歡使用一種MVC客戶端架構。

• 我有一個頁面CONTROLLER
• DOM是我的視圖
• 服務器是我的MODEL

通常我會創建一個單例頁面控制器類（需要關閉支持類）來控制ajax調用和視圖綁定。

var pageXController = {
  init: function(param) {
    pageXController.wireEvents();
    // something else can go here
  },

  wireEvents : function() {
    // Wire up page events
  }

  // Reactive methods from page events
  // Callbacks, etc
  methodX : function() {}
}

$(document).ready( function() {
  // gather params from querystring, server injection, etc
  pageXController.init(someparams);
});

我還應該補充一點，在這種情況下，你的模型是你的DTO（數據傳輸對象），它們針對他們解決的問題進行了優化。 這不是您的域模型。

Answer 2

對於復雜的Javascript開發，構建代碼庫對我的經驗至關重要。 從歷史上看，作為一種補丁語言，Javascript開發最終會出現大量腳本文件。

我建議邏輯上將應用程序的功能區域分開，以清除松散耦合和自包含的模塊。 例如，如下所示，您的產品套件可能有多個產品模塊，每個模塊都有多個子模塊：

一旦您能夠創建分層模塊，它就是在相關子模塊中創建UI組件的一個主要部分。 這些UI組件也應該優選地是自包含的。 每個都有自己的模板，css，本地化等，如下所示：

我創建了一個帶有示例代碼的JS參考架構，以分享我在幾個大型JS項目中獲得的expier。 我是boilerplateJS的作者。 如果你想要一個內置幾個關鍵問題的參考代碼庫，那么使用它作為你的啟動代碼庫會覺得費用。

http://boilerplatejs.org

Answer 3

如果我們談論javascript應用程序架構，那么Nicholas Zakas 2011播客是必須看到的： Nicholas Zakas：可擴展的JavaScript應用程序架構

Addy Osmani的在線參考： 大規模JavaScript應用程序架構的模式

Answer 4

您可能想要研究的一件事是Backbone.js ，它為您提供了一個很好的框架，用於構建Model類來表示應用程序中的數據並將它們綁定到HTML UI。 這是將數據綁定到DOM的首選。

更一般地說，這是一篇關於Opera開發博客的JavaScript最佳實踐的精彩文章。