第一篇：web項目前端開發經驗總結（大全）

web項目前端開發經驗總結

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

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

2.JSP頁面設計：提到JSP頁面，在這里我想說的一點是，其實JSP頁面是在服務器生成的，那么傳給JSP頁面的變量、參數都會在服務器轉化為它們具體的值，然后再傳給客戶端。JSP頁面可以實現很多服務器端的功能，因為可以直接在頁面嵌入JAVA代碼，但是我們必須明確的一點是，JSP頁面主要是用來呈現視圖的，不要再其中套入大量的代碼，要明確前端與后臺的分工。

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

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

5.sitemesh框架：這個主要是用來將所有頁面套用固定格式，用以頁面的復用，其實有些時候標簽更為方便，而且sitemesh框架的內存開銷是的二倍，還會導致攔截器出現一些莫名的bug，所以并不推薦使用。

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

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

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

9.正則表達式：正則表達式的模式匹配是很強大的，靈活運用正則表達式，也會簡化代碼，甚至我們在查找替換時都可以使用正則表達式。

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

第二篇：WEB前端開發經驗總結

ASP.NET前端開發經驗總結

通過此次大作業的設計到完成，我負責的是web前端的開發，經過此次作業和結合W3C上的自學，我漸漸有了一些對前端開發的小小經驗（僅為個人意見）。WEB標準是什么？

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

采用WEB標準開發的好處

那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標準開發（個人理解的）相對以前TABLE布局的優勢有哪些？

1、節約運營成本

看看我們的WEB標準制作方法是如何做到的？

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

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

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

采用WEB標準開發的頁面，結構清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結構清晰，要找的數據可以很方便的瀏覽到。

而對搜索引擎來說，一個好的采用WEB標準開發的頁面，都是做過SEO優化的，它訪問起來很友好，很容易理解你的頁面中哪里是標題（H1~H6標簽），哪里是段落（p標簽），哪里是段落里要強調的內容（strong標簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。

一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術。你說你會不會去使用它？這個也正式我們的W3C推薦使用WEB標準開放網站的原因啊。而這個技術也得到了我們廣大用戶的認可，所以現在需要學習WEB標準啊。合理的布局

前面我提到了一些知識點――“結構清晰、SEO優化、頁面體積小、HTML代碼中基本上都是用戶要看的數據”。這些東西，都是我做了合理布局的結果。而且我個人覺得，我們采用WEB標準制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。

也許有人會問，怎樣的一個頁面，才算是合理的布局的呢？這個問題問題問得好，也是我們大家剛開始學用WEB標準的問得最多的問題之一，我也曾經常被這個問題所困擾，這里就說說我對合理布局的一些理解。

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

不錯，這個是一個文章詳細頁，沒有左右兩欄布局，不過這里我重點要講的是合理的布局。

這是此次實驗中customer（前端的一項）部分的完整代碼：

<%@ 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” />