第一篇：前端開發命名規范范文
前端開發工作規范
為提高團隊協作效率，便于后臺人員添加功能及前端后期優化維護，輸出高質量的文檔，特制訂此文檔。本規范文檔一經確認，前端開發人員必須按本文檔規范進行前臺頁面開發。
【寫在規則前面的話】
項目的可維護性第一。你不是一個人在做事，項目的維護和二次開發可能是直接的或間接的團隊合作。好的可維護性，從四個方面下手：
1）代碼的松耦合，高度模塊化，將頁面內的元素視為一個個模塊，相互獨立，盡量避免耦合過高的代碼，從html,css,js三個層面都要考慮模塊化。
2）良好的注釋。
3）注意代碼的彈性，在性能和彈性的選擇上，一般情況下以彈性為優先考慮條件，在保證彈性的基礎上，適當優化性能。
4）嚴格按照規范編寫代碼。
【命名規則】
為避免命名沖突，命名規則如下：
1）公共組件因為高度重用，命名從簡，不要加前綴；
2）各欄目的相應代碼，需加前綴，前綴為WD姓名拼音的首字母，例如：杰夫前綴為“jf_”，分隔符為下劃線“_”，例如：“jf_imgList”;
3）模塊組件化，組件中的class或id名采用駱駝命名法和下劃線相結合的方式，單詞之間的分隔靠大寫字母分開，從屬關系靠下劃線分隔。例如：
html:
- 1)XXXXXXXXXXXXXX
- 2)XXXXXXXXXXXXXX
- 3)XXXXXXXXXXXXXX
css:
.textList{}.text_list X{}
.textList_firstItem{ }.textListFirstItem X{}
4）命名清晰，不怕命名長，怕命名容易沖突，長命名可以保證不會產生沖突，所以css選擇時可以盡量不使用子選擇符，也能確保css優先級權重足夠低，方便擴展時的覆蓋操作：.textList_firstItem{}.textList.firstItem{}
5)命名要有意義，不要使用沒有意義的命名。用英語命名，不要用拼音。
【分工安排】
1)分工原則為公共組件（包括common.css和public.JS）一人維護，各欄目其他人負責，每個欄目正常情況下一人負責，要詳細寫明注釋，如果多人合作，維護的人員注意添加注釋信息，具體注釋細則，詳見注釋規則；
2)VD設計完設計圖后，先和交互設計師溝通，確定設計可行，然后先將設計圖給公共組件維護者，看設計圖是否需要提取公共組件，然后再提交給相應欄目的WD。如果有公共組件要提取，公共組件維護者需對欄目WD說明。
3)如果確定沒有公共組件需提取，交互設計師直接和各欄目的WD交流，對照著VD的設計
圖進行說明，WD完成需求；
4)WD在制作頁面的時候，需先去common文件中查詢是否已經存在設計圖中的組件，如果有，直接調用；沒有，則在app.css和app.JS中添加相應的代碼。
5)WD在制作過程中，發現有高度重用的模塊，卻未被加入到公共組件中，需向公共組件維護人進行說明，然后工作組件維護人決定是否添加該組件。如果 確定添加，則向WD們說明添加了新組件，讓WD們檢查之前是否添加了類似組件，統一更新成新組件的用法，刪除之前自定義的css和js。雖然麻煩，但始終 把可維護性放在首位。
6)公共組件維護者的公共組件說明文檔，需圖片和說明文字配套，方便閱讀。
【注釋規則】
1.公共組件維護者和各欄目WD都需要在文件頭部加上注釋說明：
/**
*文件用途說明
*作者姓名、聯系方式（旺旺）
*制作日期
**/
2.大的模塊注釋方法：
//================
// 代碼用途
//================
3.小的注釋；
//代碼說明
注釋單獨一行，不要在代碼后的同一行內加注釋。
例如：
//姓名
var name = “abc”;V
var name =”abc”;//姓名 X
4.維護人員的注釋方法：盡量根據注釋說明，找到代碼的原作者，讓原作者進行維護，原作者進行維護可以無需添加額外說明，直接進行修改。如果因為特殊原因，無法讓原作者進行維護，需添加額外說明進行注釋。說明文字為：“/*change by xxx)原代碼如下：
<{源代碼}>.新代碼如下:*/
新代碼：
如：var name = “abc”;這段代碼，要將name由“abc”變成“123”，原作者可直接改var name=”123”;非原作者修改，需改成：
/*(change by 杰夫)原代碼如下：<{
var name = “abc”;
}>新代碼如下：*/
var name =”123”;
修改時添加的注釋，在項目通過測試之后，上線前，可以優化掉。
【js規范】
1)底層JS庫采用YUI 2.6.0；
2)統一頭部中只載入YUI load組件，其他組件都通過loader對象加載；
3)js盡量避免使用全局變量，復雜應用寫成組件，通過構造函數實現多態，寫在公共組件或
外部js中，簡單應用直接寫在init函數中，通過命名空間或匿名函數將變量包進閉包中。
【切圖規范】
1．盡量把頁面的背景圖及小圖標整合到一張圖片，用CSS定位方法。（這樣以減少http請求，從而降底網站的下載速度。）
2．尊從內容與頁面樣式的脫離，如需要，同樣也要做到布局與color的脫離。（什么樣的圖片屬于內容：從數據庫里取出來的圖片。凡是不屬于內容的圖片請都用背景。）
1）頁面代碼，做到精簡，邏輯性清楚；（公用部位可以引入進來，比如頭部，腳部）
2）CSS邏輯清析，精簡。可在不改變功能的前提內，做到能更換頁面布局及換色。
CSS樣式每個頁面引入不超過兩個文件，一個是common：它包含整個站點都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個是當前頁的CSS。（CSS文件引入在2個之內，減少http請求）避免CSS的表達式。
3．將腳本放在底部。（這樣頁面就可以逐步呈現，而且頁面中的可視組件可以盡早下裁。）配合程序開發人員我們需要注意的（xhtml）：
1．了解用戶可編輯上傳修改的“圖片”，“文字”區域的需求。根據需求來定位控制，以保證頁面的穩定顯示。
如圖片，需了解：
1）寬度是否是固定大小，2）寬度最大限度，3）大小不一樣時的居中顯示
如文字，需了解：
1)文字的最大長度。及加“…”省略號區域,2)在測試中經常也會碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分。
2．每個頁面加上正確顯示的TITLE。（這個是我經常容易忽視的）
3．在頁面中盡量完成每步交互效果，包括既時響應的。
4．提交程序員的demo必須是連貫的，交互效里齊全，而且經過自已在IE6.0，IE7.0，IE8.0，FIREFOX等瀏覽器的一次以上的整體測試。
用戶體驗方面需要注意的：
1．每個連接，按鈕要做上鼠標hover時的一個變化效果（如果hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會出現那個按鈕無圖的間隔）；
2．Input有個label，可以讓用戶在點擊字時，光標自動跳入相應input中；
3．圖片應該有alt屬性，以備圖片阻止時，文字的替換。
本文由世紀淘商城()整理分享！版權歸原作者所有！
第二篇：前端開發心得
web前端核心技術
從事前端開發工作1年多了，從最初的DIV+CSS學起，到現在學到html5、css3、javascript，jquery等等，我覺得前端要學的技術太多了，很多人認為前端開發要掌握的技能簡單，就是網頁制作，其實不然，前端開發是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高級版本是HTML5、CSS3，以及SVG等。JavaScript作為最難的語言之一，許多編程高手也不敢妄自菲薄、自封精通。
關于兼容性的問題我相信對于每個做前端開發的人來講是一個很頭疼的問題，互聯網目前主流瀏覽器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括國內主流的搜狗，騰訊 TT，360等等；從內核上講主要有IE的，遨游版IE，safari，firefox以及opera的，這些都是大家常見的。所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，用戶用什么瀏覽器來查看同一網站，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。這個時候就需要針對不同的瀏覽器寫不同的CSS，這個過程叫CSS hack。雖然我們寫代碼都要求按照標準，不寫hack代碼，但實際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應該是每個前端開發人員必備的技能。
前端的開發工具很多，比較常見的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我現在在使用webstorm，強大的提示功能可以幫助我們很快的熟悉并掌握網頁布局,檢查錯誤等。調試代碼的工具我使用的Firebug。Firebug是網頁瀏覽器Mozilla firefox 下的一款開發類插件，它集HTML查看和編輯、Javascript控制臺、網絡狀況監視器于一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的CSS、HTML、Dom 以及Javascript代碼。
以上是自己做前端開發的一點心得，它所涵蓋的知識面遠遠不止這些，我也在不斷的學習，不斷地豐富自己，希望自己能在前端這個職位上開闊自己的一片天地！
第三篇：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” />