1  通常 Java Web 開發框架

舉個例子，對於廣告系統的來說， 我們先不管一些job，CACHE，config  ... 這些優化，些框架和分層可以是這樣的，

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擴充套件（以 <%, %>形式）

優點： 

• 可以寫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進行壓縮處理，我們將樣式檔案進行合併壓縮，目的是減少與伺服器互動的時間和次數。如http://www.jb51.net/tools/cssyasuo.shtml可以線上進行壓縮。

樣式混合使用選擇：

• 有關整個網站統一的樣式程式碼，放置在獨立的樣式檔案中.css
• 某些樣式不同的頁面，除了連結外部樣式檔案，還需要自定義的樣式
• 某張網頁中，部分內容如果需要一種不同，採用內行樣式

3) 行為層 javaScript 

常見的也是最有名的javascript 框架，其實準確來說應該是庫：

• 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寫法： 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前端開發流程

 前端開發流程：

前端RD在開發團隊位置（其上游和下游）：

5）前端注意的問題