單頁面應用程序的體系結構（JavaScript）

Question

我想了解設計單頁面應用程序的整體架構（主要通過JavaScript）

假設我有一個登錄頁面（Usernam / Password），並且在成功驗證后，我會看到主頁。 現在登錄和主頁屏幕實際上應該是單個頁面的一部分。

我該如何設計這樣的頁面？

Answer 1

這是一個廣泛的問題，可以編寫整本書來詳細回答。

基本上你需要做的是使用AJAX而不是頁面重新加載。 您仍然需要連接到服務器以對用戶進行身份驗證，但不是每次都重新加載整個頁面，而是需要對服務器進行AJAX調用，具體取決於登錄是否成功以及是否更改內容的某些部分在頁面上（例如將登錄按鈕更改為“以用戶xxx登錄”消息等）。

Answer 2

如果您還沒有看過，John Papa有一個非常受歡迎的關於在Pluralsight上設計單頁應用程序的課程： http ：//www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

它確實需要Pluralsight訂閱，但您可以獲得10天的免費試用，以確認內容對您有價值。 （我不是Pluralsight的附屬品，順便說一下。）

Answer 3

您可能想要查找這個免費的單頁應用程序書 。 當我用Google搜索“單頁應用”時，我發現了它。

Answer 4

您可以從通過網絡找到的現有解決方案中獲取靈感：

• ExtJS（MVC應用程序架構）
• Knockout（基於MVVM模式構建）
• 骨干

Answer 5

我剛剛向SourceForge添加了一個可能有幫助的項目。 我已經開發了這個庫大約一年了，我認為它已經准備好迎接黃金時段了。 該項目允許您從JavaScript中引用asp.net MVC。

https://sourceforge.net/projects/peachajax/

該庫生成用於AJAX操作的動態JavaScript代碼。 該庫需要jQuery。 例如，如果在Controller中使用Action方法進行AJAX操作，則可以通過動態生成的JavaScript文件快速訪問它，如下所示：

peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript

映射的參數與ActionMethods參數直接關聯。

自定義功能包括：

• 自定義參數
• 自定義回調
• 參數的自定義客戶端處理函數（用於序列化特定模型類型）
• 自定義預請求處理器
• 自定義后請求處理器

Answer 6

如果你是一個MVC的人，我個人一直在使用基於主干的chaplinjs.org和單頁應用程序榮耀的hbs。 我有一些修改使用websockets而不是長輪詢，但它非常可擴展，如果你熟悉mvc，很容易進入（你會遇到更多問題，骨干比Chaplin）