前端知識--web前端整體框架和開發(fā)流程_W

1、前端知識-web前端整體框架和開發(fā)流程1 通常 Java Web 開發(fā)框架2 前端V的架構1） 結構層(1) jsp(Java Server Pages)(2) Freemarker2) 表現(xiàn)層CSS3) 行為層 javaScriptjQuery Ext YUIjquery對javascript的封裝3) 瀏覽器的渲染4） web前端開發(fā)流程5） 前端注意的問題1通常 Java Web 開發(fā)框架舉個例子，對于廣告系統(tǒng)的來說， 我們先不管一些job，cache，config . 這些優(yōu)化，些框架和分層可以是這樣的，MVC的技術選型：V: FreeMarker vs JSP / VelocityC

2、: SpringMVCvs Struts / Webwork M: Spring/JPA/Hibernate vs iBatis2 前端V的架構前端開發(fā)剛興起的階段，前端開發(fā)人員的工作經常穿插在后端開發(fā)過程中擔任輔助作用的，隨著業(yè)務越來越復雜，前端必須有自己的開發(fā)框架和流程，使得后端專注于服務類的開發(fā)，前端專注于與用戶交互類的開發(fā)。WEB前端從概念上劃分為三個層次：結構、表現(xiàn)、和行為。三層相對獨立，互不影響。在物理上層面上分別對應HTML、CSS、JS三種不同的的文 件格式。HTML：負責定義網頁的結構，內容CSS：負責內容的展現(xiàn)方式 JS： 負責網頁關于動態(tài)的行為反應好的層次劃分對前端的開發(fā)

3、也很關鍵。顯示內容問題的唯一來源應該是html文件定義的，內容展示問題的唯一來源應該是CSS文件定義的，行為問題的唯一來源應該是javascript文件定義的，各司其職相互獨立。但是他們是相關的，因為行為和樣式無法與結構分離，必須寫在同一個文件里。這 種情況下，首先還是你要把行為和樣式從html標簽中分開，然后在html文件中引入。實際的開發(fā)結構是這樣的：前端開發(fā)的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），Java Script負責調度數(shù)據(jù)和實現(xiàn)某種展現(xiàn)邏輯（Controller）。1）

4、結構層在java領域，表現(xiàn)層技術主要有三種：jsp、freemarker、velocity。(1) jsp(Java Server Pages)它是在傳統(tǒng)的網頁HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP標記(tag)，它實現(xiàn)Html語法中的java擴展（以 形式）。從而形成JSP文件，后綴名為(.jsp)。因為java具有跨平臺特點，用JSP開發(fā)的Web應用是跨平臺的，既能在Linux下運行，也能在其他操作系統(tǒng)上運行。JSP與Servlet一樣，是在服務器端執(zhí)行的，最終都要變.clas s文件，通常返回給客戶端的就是一個HTML文本，因此客戶端只要有

5、瀏覽器就能瀏覽。優(yōu)點：可以寫java代碼支持jsp標簽（jsp tag） 支持表達式語言（el）官方標準，用戶群廣，豐富的第三方jsp標簽庫性能良好，jsp編譯成class文件執(zhí)行，有很好的性能表現(xiàn)缺點：編寫java代碼，如使用不當容易破壞mvc結構。(2) Freemarker它生成靜態(tài)頁面，首先需要使用自己定義的模板頁面，這個模板頁面可以是最最普通的html，也可以是嵌套freemarker中的取值表達式，標簽或者自定義標簽等等， 然后讀取這個模板頁面， 解析其中的標簽完成相對應的操作，然后采用鍵值對的方式傳遞參數(shù)替換模板中的的取值表達式，做完之后 根據(jù)配置的路徑生成一個新的html頁面，

6、 以達到靜態(tài)化訪問的目的。模板+數(shù)據(jù)模型=輸出，模板只負責數(shù)據(jù)在頁面中的表現(xiàn)，不涉及任何的邏輯代碼，而所有的邏輯都是由數(shù)據(jù)模型來處理的。用戶最終看到的輸出是模板和數(shù)據(jù)模型合并后創(chuàng)建的。FreeMarker與Web容器無關，即在Web運行時，它并不知道Servlet或者其他。優(yōu)點：可以徹底的分離表現(xiàn)層和業(yè)務邏輯，使用JSP開發(fā)過程中在頁面中大量的存在業(yè)務邏輯的代碼，使得頁面內容凌亂，在后期大量的修改維護過程中就變得非常困難。FreeMarker根本不支持Java代碼?？梢蕴岣唛_發(fā)效率，JSP在第一次執(zhí)行的時候需要轉換成Servlet類，開發(fā)階段進行功能調適時，需要頻繁的修改JSP，每次修改都要編

7、譯和轉換 。FreeMarker模板技術不存在編譯和轉換的問題，開發(fā)過程中，后端不必在等待界面設計開發(fā)人員完成頁面原形后，再來開發(fā)程序。對jsp標簽支持良好內置大量常用功能，比如html過濾，日期金額格式化等等使用表達式語言 (EL)缺點：不是官方標準用戶群體和第三方標簽庫沒比jsp豐富使用FreeMarker后，作為界面開發(fā)人員，只專心創(chuàng)建HTML文件、圖像以及Web頁面的其他可視化方面，不用理會數(shù)據(jù)；而程序開發(fā)人員則專注于 系統(tǒng)實現(xiàn)，負責為頁面準備要顯示的數(shù)據(jù)。還有一些像velocity這樣較早出現(xiàn)的用于代替jsp的模板語言 . .2) 表現(xiàn)層CSS結構搭建之后，就是為他們添加樣式表屬性。

8、它實現(xiàn)的是頁面內容和現(xiàn)實樣式分離，所有的CSS都是非必需的，就算無法應用CSS或CSS沖突，網頁也能夠正常訪問。為了管理的方便，可以將不同樣式進行拆分，比如可以拆分為全局樣式，結構布局樣式，色彩樣式，文字樣式和重置樣式。css在開發(fā)時代碼采用了規(guī)范的形式，比如有注釋，縮進等，這樣，這些文件的大小比較大，為了減少網絡流量，提高網頁的下載速度，一般發(fā)布時需要對javascript和css 進行壓縮處理，我們將樣式文件進行合并壓縮，目的是減少與服務器交互的時間和次數(shù)。如/tools/cssyasuo.shtml可以在線進行壓縮。樣式混合使用選擇：有關整個網站統(tǒng)一的

9、樣式代碼，放置在獨立的樣式文件中.css某些樣式不同的頁面，除了鏈接外部樣式文件，還需要自定義的樣式某張網頁中，部分內容如果需要一種不同，采用內行樣式3) 行為層 javaScript常見的也是最有名的javascript 框架，其實準確來說應該是庫：（/developerworks/cn/web/1404_wangfx_jsframeworks/）jQueryjQuery 是目前用的最多的前端 JavaScript 類庫，它是比較輕量級的類庫，對 DOM的操作也比較方便到位，支持的效果和控件也很多。同時，基于 jQuery 有很多擴展項目，包括 jQuery

10、 UI(jQuery支持的一些控件和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)。這些補充使得 jQuery框架更加完整，而且這些擴展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發(fā)更加豐富。Ext相比 jQuery，Ext JS 更重量級，有幾個兆的文件，使得 Ext 在開發(fā)中成為的弊端和累贅。但是，另一方面，在 Ext JS 龐大的文件背后是 Ext JS 強大的功能。Ext JS 的控件和功能可以說強大和華麗到的程度。圖表、菜單、特效，Ext JS 的控件庫非常豐富，同時它的交互也非常強大，獨立靠Ext JS

11、 幾乎就可以取代控制層完成于客戶的交互。強大的功能，豐富的控件庫，華麗的效果也使得 Ext JS 成為內網開發(fā)利器。YUIYUI也有自己的JavaScript類庫，DOM操作和效果處理也還比較方便，功能和控件也很齊全，但是相比jQuery和ExtJS顯得比較中庸一些。隨著 Yahoo的沒落，YUI 也漸漸的被淡化。目前前端框架主要采用JavaScript+CSS模式?；谏厦娴膸追Njavascript庫，我們可以基于JQuery框架搭建起一個javaweb前端系統(tǒng)的框架。如叢林的前端就是COS-UI+jQuery搭建起來的，再利用插件ztree實現(xiàn)品類樹在前端的展示。jquery對javasc

12、ript的封裝JQuery能大大簡化Javascript程序的編寫，主要表現(xiàn)：定位元素改變元素的內容顯示隱藏元素JS 寫法：abc.style.DISPLAY = none; abc.style.DISPLAY = block; jQuery 寫法：abc.HIDE();abc.show();abc.TOGGLE();JS寫法：abc.innerHTML = TEST; jQuery 寫 法 ： abc.html(TEST);JS 寫 法 : document.getElementById(abc) jQuery寫法:$(#abc) 通過id定位$(.abc) 通過class定位$(div) 通過標簽定位修改元素樣式Ajax獲得焦點為表單賦值獲得表單的值設置元素不可用3) 瀏覽器的渲染4）web前端開發(fā)流程前端開發(fā)流程：前端RD在開發(fā)團隊位置（其上游和下游）：JS自己創(chuàng)建對象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表jQuery$.get(abc.php?a=1&b=2, recall); postvalue = a=b&c=d&abc=123;$.post(abc.php,