有這樣一句話被提起：

前端也有MVC，DOM樹就是這個M，CSS就是這個V，至于C，非JavaScript莫屬。

　　很高興團隊中有越來越多的人能夠跳出某種語言、某種平臺的局限性，站到抽象的層次上思考一些設計上的問題。在我的印象中，似乎前端開發總是容易給人以隨意、混亂的感覺，可真的是前端技能不容易掌握嗎？

大學里Java課程正兒八經學了3年，JavaScript只字未提，只是課余時間憑借著興趣自學，加起來也就兩三個月。

　　前端代碼更加靈活，無論是HTML、JavaScript還是CSS，似乎任何一個初學者都可以輕松入門。可是越是看似簡單的東西，就越難以精通地掌握，沒有好的設計來引導，如果技能不過硬，很容易陷入混亂的困頓之中。

　　回到標題，來看看怎么從后端設計來類比前端設計。

　　1. 模型和業務邏輯的分離：

　　寫后臺代碼，模型層是很容易劃分出來的，模型的建立是整體設計的第一步，美工在設計頁面時，最關注一個頁面最宏觀的盒子模型；而Service層，適合存放業務邏輯，它們可以做到無狀態和池化的。

　　前端開發呢，當jQuery或類似的框架出現以后，DOM模型就可以完全和業務方法分離開了，通過這樣美妙的綁定代碼來完成關聯和解耦：

$("#userName").click(function(){ 
    …… 
});

　　2. 讓視圖層獨立：

　　通常不要使用內聯CSS和嵌入CSS，視圖層要讓經驗豐富的美工管理起來。

　　3. 找到一個合適的切面來做接口層：

　　還是這幾行代碼：

$("#userName").click(function(){ 
    …… 
});

　　我們來換一個角度思考：

　　userName就好像是Java中的接口，click就好比是接口中的方法，如果這兩個東西是既定不變的，接口的實現類當然可以隨意更換了啊。

　　這個讓我想起了Spring的IoC，把對象的管理和控制權交給容器去完成——那么在前端，就把這個權利交給了JQuery的綁定邏輯去完成。

　　如果功能類似的頁面，要求更換幾套不同的效果，那么保持一個清晰的接口層，圍繞接口層去完成不同的實現模板，將是一個值得嘗試的方式：

//實現類一：
$("userName").click(function(){ 
    alert("U Click Me"); //模板一的實現
}); 
…… 
 
//實現類二：
$("userName").click(function(){ 
    $("userTypeFont").attr("color","RED"); //模板二的實現
}); 
……

　　在這種情形下，接口層DOM的id和職責方法都被固定下來，開發人員可以按照接口開發、美工可以按照接口層在盒子模型中完善頁面設計、測試可以按照接口來寫自動化用例，這一切可美好多了！

　　4. 針對接口來編排業務邏輯：

　　第三條已經建立了合適的接口層，那么相對固定的界面效果和邏輯，就可以通過橋接模式下對接口的引用來完成了。即便更換了關系到展現效果的模板，核心JavaScript都不會變化。

　　5. 分離模板和數據：

　　模板和數據的整合，似乎是后端應該做的事，例如FreeMarker模板和數據的整合，最終形成頁面。

　　現在，這件事情在前端也可以完成了：

　　（1）生成相對靜態的模板：

<div id="userName">${user.userName}</div>

　　（2）Ajax獲取到模板的數據：

{"user":{"name":"James"}}

　　（3） 瀏覽器端聚合，搞定最后的頁面：

<div id="userName">James</div>

　　這樣做的靜態模板的很容易在緩存中命中，而數據的生成也非常靈活，最后，聚合是在客戶端完成的，這方面對服務端沒有壓力，因此性能往往非常高。

　　6. 歸納一下：抽象，是軟件設計的核心藝術。即便前端設計，也一樣。