java web 前端開發架構和流程__web

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擴充（以 <%, %>形式）。從而形成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進行壓縮處理，我們將樣式檔案進行合并壓縮，目的是減少與伺服器互動的時間和次數。如http://www.jb51.net/tools/cssyasuo.shtml可以線上進行壓縮。

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

3) 行為層 javaScript 

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

（http://www.ibm.com/developerworks/cn/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寫法：