一個前端與后端分離的架構實例
一個優秀的WEB架構，必定會應用一些分層設計的思想，這樣可以讓系統開發起來更靈活，同時后期維護也比較方便。本文作者麥舒設計了一個前端與后端分離的架構，原文分享如下：
看了《系統架構：Web應用架構的新趨勢—前端和后端分離的一點想法》 這篇文章，對前端與后端的分離非常認同，這樣做對于系統的維護是有相當大的好處的。正好自己也設計了一個這樣的系統，于是把它拿出來，和大家討論一下。這個架構，與其說是想出來，還不如說是我做系統總結出來的最佳實踐。
我們做的系統，前端的頁面基本都是使用 JavaScript 的富戶端頁面，主要應用的框架用，jquery、jquery ui、knockout js、Durandal、另外，還有自己封裝的一些 UI 組件，后端的主要采用到的技術有 OData、MVC、Linq to SQL 以及自己寫的一個權限管理組件，數據庫采用的是 SQL Server 2005。
下面向大家介紹一下各模塊的功能以及其劃分的目的，我們先從用戶界面看起吧
一、關于前端的 dataProvider
簡單點說，就是一個給界面調用的數據訪問層，很多人都人這樣的疑問，在這里加一個數據訪問層，是不是多余？只要你做的前端，你都會碰到下面這些問題：
1、一個產品或者項目，前端與后端是同時進行了，這時候，根本沒有后端的接口，甚至可以說，連個接口的定義都沒有。作為前端開發人員，你如何去開展自己的工作？
2、作為前端開發人員，你有沒有碰到，因為后端的接口掛掉，導致你的工作沒法繼續做下去的情形？
3、作為前端開發人員，往往免不了要和第三方的接口進行對接，你有沒有碰到過，和你做對接的人員，突然因為項目緊，被抽走了，留給你的只有一堆需要傳N個參數，傳了后接著出“對象為空”的異常呢？你根本不知道哪里參數傳錯了。面對這些接口，你除了破口大罵，得不到任何幫助。
4、作為前端開發人員，你有沒有試過，你向后端的開發組，要一個接口，他們需要討論個幾天，然后再花幾天才能給你，給你之后，還不能用，又得再花幾天時間調試呢？
如果你向我一樣，都曾經都碰過這些問題，你就不會懷疑這個 dataProvider 存在的必要了，有了這個 dataProvider，可以最大減少后端接口對前端開發的影響。下面是一個 dataProvider 的實例：
var dataProvider = (function () {
var fakeProvider = {
countries: new Countries()
};
var realProvider = {
countries: new JData.WebDataSource()
};
//下面的接口，根據情況二選一
return fakeProvider; //這個是假的 dataProvider，從本地讀
return realProvider; //這個是真正 dataProvider，從接口讀
})();
從上面可以看出來，這個 dataProvider 使用了工廠模式來創建，它有兩個實例，fakeProvider和realProvider，fakeProvider是用來提供一些模擬數據，而realProvider提供從接口讀取出來的數據。當沒有接口，或者接口掛掉，我們可以先從 fakeProvider 來讀取數據。等接口好了，切換到 realProvider 。
二、關于用戶界面輸入的驗證
1、數據的驗證。用戶在界面輸入數據后，接著調用 dataProvider 里的接口對數據進行處理，但是在向服務端提交之前，得先對數據進行驗證。那個這個驗證如何進行呢？dataProvider先從服務端獲實體的描述信息，這些描述包括但不限于：主外鍵、屬性的驗證信息（比如是否可空），當然，這個實體信息是可以緩存起來，以便重用的。然后 dataProvider 再根據這個描述信息來對數據進行驗證。
2、錯誤信息的顯示
當驗證到某一個屬性不合法，驗證信息的模塊就在頁面查找出對應輸入控件，它是怎么查找的呢？比如說，Contry 的 Name 輸入為空是不可以的。那它就先查找 id 為Coutry的元素，然后再Coutry元素下面再找id 或者 name 為 Name 的控件，如果找不到則直接彈窗顯示錯誤信息。例如：
<form id="Country">
<input name="Name"/>
</form>
三、關于后端使用 OData
1、作為后端開發人員，你有沒有碰到過這種前端開發人員，今天讓你加一個字段，好，加了，然后打包發布。明天又讓你加一個字段。后天突然又說，前兩天加的字段，不需要，你會不會有種想喊“操”的沖動？
2、作為后端開發員員，你有沒有碰到過這種前端開發人員，今天跟你說接口不夠用，要加個 GetUserByName 的方法，明天又說，還得加個 GetUserByEmail 的方法？然后，過了一段時間，你發現接口越來越多，維護的模塊越來越癰腫，并且這些接口，你只敢加，不敢刪除。因為，你根本不知道這些，有哪個不用的，你跑去問前端，他也回答不出來。所以一些接口哪怕是沒用的，也只能永遠系統里，直到它生命周期的結束。
如果你也碰到類似于我這種煩惱，使用 OData 也許是一個不錯的選擇，把查詢的權限都開發給前端的開發人員，他愛怎么查就怎么查，都由它去。
四、關于后端使用MVC
我們的系統，使用MVC都是用來處理從前端提交上來的數據的，使用它主要是開發人員都熟悉MVC，然后MVC再調用業務層代碼，同時，還需要處理:
1、對提交上來的數據進行驗證
2、處理系統的異常，包括對異常進行重新的包裝，再傳回到客戶端，以便于客戶端的處理。對異常的信息進行記錄。
五、數據訪問層
關于數據訪問層，在我們的系統里實際是一個 ORM 的包裝器（ORM Wrapper），你在對 ORM 裹上一層外衣。目的在于：
1、對數據進行攔截。例如：有些數據，只對某個角色的開發。數據訪問層需要對根據過濾條件，然后再結合查詢條件，重新生成SQL。
2、對數據假刪除的處理。見過很多系統，都是把刪除放到業務層來進行的，其實這是不適合的，從業務的角度來說，關心的是刪除，在執行刪除后，這條數據從我眼前消失就可以了。至真刪除還是假刪除，這與我無關。數據訪問層，要做的就是這工作，它可以數據在真刪除與假刪除之間進行切換，只要配置一下，就可以把真刪除變成假刪除（其實就是把Delete操作變成Update操作），使得進行業務開發人員，不用再關心數據的真假刪除。
3、對數據進行跟蹤、備份。你肯定碰到過這么一種需要，需要記下來，每一次的更新操作的時間，以及更新了些什么內容。對于刪除的數據，能夠把它還原回來。數據訪問層，通過對 ORM進行包裝，完全可以記錄下每一次更新、刪除這些操作，然后記錄下來即可。當然，這些需求利用數據提供的功能也是可以實現的，不在討論的范圍內。
來自：http://www.codeceo.com/article/web-js-and-server-artch.html#0-tsina-1-1284-397232819ff9a47a7b7e80a40613cfe1