第一篇：web項(xiàng)目前端開發(fā)經(jīng)驗(yàn)總結(jié)（大全）

web項(xiàng)目前端開發(fā)經(jīng)驗(yàn)總結(jié)

最近這一個(gè)月完成了自己的第一個(gè)java web項(xiàng)目，是給某雜志社做的在線投稿系統(tǒng)，雖然進(jìn)度很慢，但是中間確實(shí)學(xué)到了不少東西，深刻體會到了自己看幾個(gè)月書都不如做一個(gè)項(xiàng)目來的實(shí)在。這個(gè)項(xiàng)目自己主要負(fù)責(zé)的是JSP頁面、JS腳本、CSS樣式表的編寫，雖然主要做的是前端，但是在設(shè)計(jì)前端后臺交互功能時(shí)，對MVC架構(gòu)和數(shù)據(jù)庫又多了一分了解，這一個(gè)月的時(shí)間，自己在技術(shù)上也確實(shí)成長了不少。下面分成幾塊總結(jié)一下自己的這個(gè)項(xiàng)目中的心得吧：

1.項(xiàng)目開發(fā)流程：從確認(rèn)需求開始，到原型設(shè)計(jì)，再到原型測試，這些都沒什么說的了，主要是剛開始開發(fā)前端JSP頁面時(shí)，自己走了很多彎路，想到有什么頁面就寫什么頁面，GET和POST的路徑也是隨心所欲，想到什么名字就起什么名字，結(jié)果發(fā)現(xiàn)這樣做嚴(yán)重影響了項(xiàng)目開發(fā)的進(jìn)度，后來經(jīng)過主管的提點(diǎn)后，我幡然醒悟，其實(shí)，面向?qū)ο蟮乃枷刖拓灤┰谡麄€(gè)項(xiàng)目當(dāng)中，在前面的原型設(shè)計(jì)的過程中，除了頁面的設(shè)計(jì)還有數(shù)據(jù)庫的設(shè)計(jì)，數(shù)據(jù)庫的每個(gè)表就對應(yīng)著Java中的每個(gè)實(shí)體類，這個(gè)類封裝了數(shù)據(jù)庫中的列作為屬性，封裝了數(shù)據(jù)庫的增刪改查作為方法，就拿這個(gè)投稿系統(tǒng)為例，實(shí)體主要有用戶、稿件等等，實(shí)體間還有著一對一映射或者一對多映射等對應(yīng)關(guān)系。其實(shí)，整個(gè)系統(tǒng)的開發(fā)就是圍繞著這些個(gè)實(shí)體進(jìn)行的，甚至于我們可以把實(shí)體名字做為二級目錄，把實(shí)體的增刪改查作為GET或POST的路徑，譬如account/add、paper/delete等等，有了這些路徑，那么與之對應(yīng)的GET和POST的Controller也就有了，接下來我們要做的就是，定義Controller中返回的視圖，寫完Controller后再把與實(shí)體相關(guān)的增刪改查方法寫到服務(wù)層中，再把項(xiàng)目的整個(gè)骨架搭起來，再去處理細(xì)節(jié)，很快的，這個(gè)項(xiàng)目就成型了。這里前端和后臺的配合尤為重要，數(shù)據(jù)交互是整個(gè)系統(tǒng)的核心。

2.JSP頁面設(shè)計(jì)：提到JSP頁面，在這里我想說的一點(diǎn)是，其實(shí)JSP頁面是在服務(wù)器生成的，那么傳給JSP頁面的變量、參數(shù)都會在服務(wù)器轉(zhuǎn)化為它們具體的值，然后再傳給客戶端。JSP頁面可以實(shí)現(xiàn)很多服務(wù)器端的功能，因?yàn)榭梢灾苯釉陧撁媲度隞AVA代碼，但是我們必須明確的一點(diǎn)是，JSP頁面主要是用來呈現(xiàn)視圖的，不要再其中套入大量的代碼，要明確前端與后臺的分工。

3.JSTL標(biāo)簽：JSTL標(biāo)簽就是JSP standard taglib，即JSP標(biāo)準(zhǔn)標(biāo)簽庫，首先，EL表達(dá)式可以非常方便的取出Controller返回的View包含的Model，甚至都無需聲明EL表達(dá)式。其次，JSTL標(biāo)簽可以實(shí)現(xiàn)很多的邏輯控制功能，比如最基本的c:if判斷、c:forEach循環(huán)，甚至有更強(qiáng)大的c:choose，有了這些，我們可以大大簡化代碼量，JSP頁面中用幾十行java寫的代碼，有時(shí)用幾句JSTL標(biāo)簽組合就實(shí)現(xiàn)了，此外，像fmt:parseDate和fmt:formatDate也是很好用的標(biāo)簽，用于日期的解析和格式化，此外JSTL更有強(qiáng)大的函數(shù)標(biāo)簽庫fn:，項(xiàng)目中我也只用到了fn:length取后臺傳的list的長度。要善用JSTL標(biāo)簽，但是又不要完全依賴于它，JSTL標(biāo)簽很方便、快捷，但是切記，JSTL功能有限，不要完全依賴于它。

4.shiro框架：shiro框架是apache的一款面向java web項(xiàng)目的權(quán)限控制框架，這個(gè)框架無論前端、后臺都十分好用，在前端，我們可以使用shiro強(qiáng)大的標(biāo)簽庫，通過用戶角色賦予用戶不同的訪問權(quán)限。譬如，如果一個(gè)系統(tǒng)的用戶有訪客、用戶、管理員三種角色，我們就可以通過shiro標(biāo)簽來控制游客不能訪問哪些內(nèi)容，頁面向用戶和管理員呈現(xiàn)的不同內(nèi)容，這就是shiro標(biāo)簽的神奇之處。

5.sitemesh框架：這個(gè)主要是用來將所有頁面套用固定格式，用以頁面的復(fù)用，其實(shí)有些時(shí)候標(biāo)簽更為方便，而且sitemesh框架的內(nèi)存開銷是的二倍，還會導(dǎo)致攔截器出現(xiàn)一些莫名的bug，所以并不推薦使用。

6.jquery：在這個(gè)項(xiàng)目中寫了很多的jquery代碼，發(fā)現(xiàn)jquery確實(shí)是個(gè)神奇的東西，jquery的神奇之處就在于jquery強(qiáng)大的選擇器可以方便的取到頁面的DOM元素，并且給這些元素綁定不同的事件，提到綁定事件，說一下on、live和bind的區(qū)別：bind是jquery最早的綁定事件方法，on是jquery 1.7.0以后才有的方法，bind和on都不能將事件綁定給DOM加載完畢后后添加到頁面的DOM元素，這時(shí)就需要live了。還有一個(gè)經(jīng)常使用的就是jquery的ajax了，其實(shí)在做這個(gè)項(xiàng)目之前自己一直不理解ajax的作用機(jī)理，只是心里又個(gè)概念而已，但是，在真正使用的ajax之后，才發(fā)現(xiàn)ajax的強(qiáng)大之處，確實(shí)如AJAX自身描述一樣，異步加載javascript，這就允許我們在不打開新頁面的情況POST一些參數(shù)給后臺，后臺得到并處理這些參數(shù)后將JSON返回給前端，這個(gè)JSON的處理function就寫在ajax的success處理function中。在這個(gè)項(xiàng)目JSON和AJAX最主要的應(yīng)用就是翻頁，加載一個(gè)頁面，把頁面?zhèn)鹘o后臺然后把得到的JSON呈現(xiàn)給用戶，翻頁時(shí)重新POST參數(shù)，然后在用js重新處理一下翻頁區(qū)域即可。

7.jquery.validate.js：這是一個(gè)輕量的jquery框架，主要用于表單的驗(yàn)證，非常方便。

8.twitter bootstrap.js：bootstrap自帶的js框架，里面定義了許多與bootstrap樣式相關(guān)聯(lián)的函數(shù)，使用起來也很方便。

9.正則表達(dá)式：正則表達(dá)式的模式匹配是很強(qiáng)大的，靈活運(yùn)用正則表達(dá)式，也會簡化代碼，甚至我們在查找替換時(shí)都可以使用正則表達(dá)式。

總體上說，這個(gè)項(xiàng)目極大的鍛煉了自己的代碼編寫功能，從以前寫一句代碼要敲無數(shù)次backspace，現(xiàn)在居然可以將某些簡單的函數(shù)一氣呵成了。今天項(xiàng)目終于上線了，總結(jié)一下，希望以后自己能夠取得長足的進(jìn)步！

第二篇：WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)

ASP.NET前端開發(fā)經(jīng)驗(yàn)總結(jié)

通過此次大作業(yè)的設(shè)計(jì)到完成，我負(fù)責(zé)的是web前端的開發(fā)，經(jīng)過此次作業(yè)和結(jié)合W3C上的自學(xué)，我漸漸有了一些對前端開發(fā)的小小經(jīng)驗(yàn)（僅為個(gè)人意見）。WEB標(biāo)準(zhǔn)是什么？

說是WEB標(biāo)準(zhǔn)，不過我這里主要是對HTML5 和 CSS3.0的一些經(jīng)驗(yàn)總結(jié)。因?yàn)閃EB含蓋的內(nèi)容實(shí)在是太多了，“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了――DIV+CSS，這里要說明下，這樣說其實(shí)是不正確的。DIV+CSS準(zhǔn)確的說法（個(gè)人的理解）應(yīng)該是：采用W3C推薦的WEB標(biāo)準(zhǔn)中的HTML5結(jié)合CSS3.0樣式表制作頁面的方法，DIV應(yīng)該指的是HTML標(biāo)簽，而CSS顯示是指的CSS樣式表了。

采用WEB標(biāo)準(zhǔn)開發(fā)的好處

那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標(biāo)準(zhǔn)開發(fā)（個(gè)人理解的）相對以前TABLE布局的優(yōu)勢有哪些？

1、節(jié)約運(yùn)營成本

看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的？

采用WEB標(biāo)準(zhǔn)制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數(shù)據(jù)），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費(fèi)用就會大家降低了，這個(gè)怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個(gè)人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。

而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個(gè)CSS文件，就可以輕松搞定了。維護(hù)的成本也下來了，省了不少錢了吧？還有，你開這個(gè)頁面的速度會快很多啊，一個(gè)讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時(shí)間去用來等待的。

2、對用戶友好更友好，且有機(jī)會獲得更多的用戶 現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個(gè)訪問我們網(wǎng)站的人）； 第二類：搜索引擎；

采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，結(jié)構(gòu)清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時(shí)候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽到。

而對搜索引擎來說，一個(gè)好的采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標(biāo)題（H1~H6標(biāo)簽），哪里是段落（p標(biāo)簽），哪里是段落里要強(qiáng)調(diào)的內(nèi)容（strong標(biāo)簽）等，它可以很容易的分析出來。而一個(gè)SEO好的站點(diǎn)，大家都知道，被搜索引擎收錄的機(jī)會更多，這個(gè)也意味著您的網(wǎng)站會被更多的普通用戶訪問到，給你的站點(diǎn)帶來更多的用戶。

一個(gè)能幫我們省下大筆費(fèi)用，提高工作效率。同時(shí)又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術(shù)。你說你會不會去使用它？這個(gè)也正式我們的W3C推薦使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的原因啊。而這個(gè)技術(shù)也得到了我們廣大用戶的認(rèn)可，所以現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。合理的布局

前面我提到了一些知識點(diǎn)――“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、HTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西，都是我做了合理布局的結(jié)果。而且我個(gè)人覺得，我們采用WEB標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識點(diǎn)開始的，所以我這里就先來說這個(gè)話題。

也許有人會問，怎樣的一個(gè)頁面，才算是合理的布局的呢？這個(gè)問題問題問得好，也是我們大家剛開始學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一，我也曾經(jīng)常被這個(gè)問題所困擾，這里就說說我對合理布局的一些理解。

在開始講合理布局的頁面要達(dá)到的要素前，我們還是用個(gè)實(shí)例來講解會更直觀些。先來看看這個(gè)圖片：

不錯(cuò)，這個(gè)是一個(gè)文章詳細(xì)頁，沒有左右兩欄布局，不過這里我重點(diǎn)要講的是合理的布局。

這是此次實(shí)驗(yàn)中customer（前端的一項(xiàng)）部分的完整代碼：

<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>

” name=“description”/> ” name=“keywords” />