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

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

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

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

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

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

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

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

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

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

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

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

12、ript的封裝JQuery能大大簡(jiǎn)化Javascript程序的編寫，主要表現(xiàn)：定位元素改變?cè)氐膬?nèi)容顯示隱藏元素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) 通過(guò)id定位$(.abc) 通過(guò)class定位$(div) 通過(guò)標(biāo)簽定位修改元素樣式Ajax獲得焦點(diǎn)為表單賦值獲得表單的值設(shè)置元素不可用3) 瀏覽器的渲染4）web前端開發(fā)流程前端開發(fā)流程：前端RD在開發(fā)團(tuán)隊(duì)位置（其上游和下游）：JS自己創(chuàng)建對(duì)象，自己處理瀏覽器兼容等亂七八糟的問(wèn)題，略去不表jQuery$.get(abc.php?a=1&b=2, recall); postvalue = a=b&c=d&abc=123;$.post(abc.php,