MVC的技術選型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架構
前端開發剛興起的階段，前端開發人員的工作經常穿插在後端開發過程中擔任輔助作用的，隨著業務越來越復雜，前端必須有自己的開發框架和流程，使得後端專註於服務類的開發，前端專註於與用戶交互類的開發。
WEB前端從概念上劃分為三個層次：結構、表現、和行為。三層相對獨立，互不影響。在物理上層面上分別對應HTML、CSS、JS三種不同的的文件格式。
HTML：負責定義網頁的結構，內容
CSS：負責內容的展現方式
JS：負責網頁關於動態的行為反應
好的層次劃分對前端的開發也很關鍵。顯示內容問題的唯壹來源應該是html文件定義的，內容展示問題的唯壹來源應該是CSS文件定義的，行為問題的唯壹來源應該是javascript文件定義的，各司其職相互獨立。但是他們是相關的，因為行為和樣式無法與結構分離，必須寫在同壹個文件裏。這種情況下，首先還是妳要把行為和樣式從html標簽中分開，然後在html文件中引入。
前端開發的核心是HTML + CSS + JavaScript。本質上它們構成壹個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。
1）結構層
在java領域，表現層技術主要有三種：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在傳統的網頁HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP標記(tag)，它實現Html語法中的java擴展（以 <%, %>形式）。從而形成JSP文件，後綴名為(.jsp)。因為java具有跨平臺特點， 用JSP開發的Web應用是跨平臺的，既能在Linux下運行，也能在其他操作系統上運行。JSP與Servlet壹樣，是在服務器端執行的，最終都要變.class文件，通常返回給客戶端的就是壹個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。
優點：
可以寫java代碼
支持jsp標簽（jsp tag）
支持表達式語言（el）
官方標準，用戶群廣，豐富的第三方jsp標簽庫
性能良好，jsp編譯成class文件執行，有很好的性能表現
缺點：
編寫java代碼，如使用不當容易破壞mvc結構。
(2) Freemarker
它生成靜態頁面，首先需要使用自己定義的模板頁面，這個模板頁面可以是最最普通的html，也可以是嵌套freemarker中的 取值表達式， 標簽或者自定義標簽等等，然後後臺讀取這個模板頁面，解析其中的標簽完成相對應的操作， 然後采用鍵值對的方式傳遞參數替換模板中的的取值表達式，做完之後 根據配置的路徑生成壹個新的html頁面， 以達到靜態化訪問的目的。
模板+數據模型=輸出，模板只負責數據在頁面中的表現，不涉及任何的邏輯代碼，而所有的邏輯都是由數據模型來處理的。用戶最終看到的輸出是模板和數據模型合並後創建的。
FreeMarker與Web容器無關，即在Web運行時，它並不知道Servlet或者其他。
優點：
可以徹底的分離表現層和業務邏輯，使用JSP 開發過程中在頁面中大量的存在業務邏輯的代碼，使得頁面內容淩亂，在後期大量的修改維護過程中就變得非常困難。FreeMarker根本不支持Java代碼。
可以提高開發效率，JSP在第壹次執行的時候需要轉換成Servlet類，開發階段進行功能調適時，需要頻繁的修改JSP，每次修改都要編譯和轉換 。FreeMarker模板技術不存在編譯和轉換的問題，開發過程中，後端不必在等待界面設計開發人員完成頁面原形後，再來開發程序。
對jsp標簽支持良好
內置大量常用功能，比如html過濾，日期金額格式化等等
使用表達式語言 (EL)
缺點：
不是官方標準
用戶群體和第三方標簽庫沒比jsp豐富
使用FreeMarker後，作為界面開發人員，只專心創建HTML文件、圖像以及Web頁面的其他可視化方面，不用理會數據；而程序開發人員則專註於系統實現，負責為頁面準備要顯示的數據。
還有壹些像velocity這樣較早出現的用於代替jsp的模板語言 ... ...
2) 表現層CSS
結構搭建之後，就是為他們添加樣式表屬性。它實現的是頁面內容和現實樣式分離，所有的CSS都是非必需的，就算無法應用CSS或CSS沖突，網頁也能夠正常訪問。
為了管理的方便，可以將不同樣式進行拆分，比如可以拆分為全局樣式，結構布局樣式，色彩樣式，文字樣式和重置樣式。css在開發時代碼采用了規範的形式，比如有註釋，縮進等，這樣，這些文件的大小比較大，為了減少網絡流量，提高網頁的下載速度，壹般發布時需要對javascript和css進行壓縮處理，我們將樣式文件進行合並壓縮，目的是減少與服務器交互的時間和次數。如/web/1404_wangfx_jsframeworks/）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 類庫，它是比較輕量級的類庫，對 DOM 的操作也比較方便到位，支持的效果和控件也很多。同時，基於 jQuery 有很多擴展項目，包括 jQuery UI(jQuery 支持的壹些控件和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)。這些補充使得 jQuery 框架更加完整，而且這些擴展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發更加豐富。
Ext
相比 jQuery，Ext JS 更重量級，有幾個兆的文件，使得 Ext 在開發中成為的弊端和累贅。但是，另壹方面，在 Ext JS 龐大的文件背後是 Ext JS 強大的功能。Ext JS 的控件和功能可以說強大和華麗到的程度。圖表、菜單、特效，Ext JS 的控件庫非常豐富，同時它的交互也非常強大，獨立靠 Ext JS 幾乎就可以取代控制層完成於客戶的交互。強大的功能，豐富的控件庫，華麗的效果也使得 Ext JS 成為內網開發利器。
YUI
YUI 也有自己的 JavaScript 類庫，DOM 操作和效果處理也還比較方便，功能和控件也很齊全，但是相比 jQuery 和 Ext JS 顯得比較中庸壹些。隨著 Yahoo的沒落，YUI 也漸漸的被淡化。
目前前端框架主要采用 JavaScript+CSS 模式。基於上面的幾種javascript庫，我們可以基於JQuery框架搭建起壹個java web前端系統的框架。如叢林的前端就是COS-UI+jQuery搭建起來的，再利用插件ztree實現品類樹在前端的展示。
jquery對javascript的封裝
JQuery能大大簡化Javascript程序的編寫，主要表現：
定位元素
JS寫法:
document.getElementById("abc")
jQuery寫法:
$("#abc") 通過id定位
$(".abc") 通過class定位
$("div") 通過標簽定位
改變元素的內容
JS寫法：
abc.innerHTML = "TEST";
jQuery寫法：
abc.html("TEST");
顯示隱藏元素
JS 寫法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 寫法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();
修改元素樣式
JS寫法：
abc.STYLE.fontSize=size;
jQuery寫法：
abc.css('font-size', 20);
Ajax
JS
自己創建對象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，則如下處理
//result = eval('(' + result + ')');
//ALERT(result);
}
獲得焦點
為表單賦值
獲得表單的值
設置元素不可用
3) 瀏覽器的渲染
4）web前端開發流程