《Web前端開(kāi)發(fā)規(guī)范手冊(cè).doc》由會(huì)員分享，可在線閱讀，更多相關(guān)《Web前端開(kāi)發(fā)規(guī)范手冊(cè).doc（12頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、Web前端開(kāi)發(fā)規(guī)范手冊(cè)Web前端開(kāi)發(fā)規(guī)范手冊(cè)修訂歷史記錄日期版本說(shuō)明作者2012年12月31日1.0初稿施昀2012年01月05日1.1施昀、戴靜2012年01月07日1.2施昀目錄修訂歷史記錄1一、規(guī)范目的21.1 概述2二、基本準(zhǔn)則2三、文件規(guī)范32.1 文件命名規(guī)則32.1.1 HTML的命名原則32.1.2 圖片的命名原則32.1.3. javascript的命名原則42.1.4 動(dòng)態(tài)語(yǔ)言文件命名原則42.2 文件存放位置規(guī)范42.3 CSS 書(shū)寫(xiě)規(guī)范42.3.1 基本原則42.3.2 注意細(xì)則52.3.3 命名規(guī)則62.4 html 書(shū)寫(xiě)規(guī)范92.4.1 head區(qū)代碼規(guī)范92.4.

2、2 body區(qū)代碼規(guī)范102.5 JavaScript書(shū)寫(xiě)規(guī)范102.6 圖片規(guī)范102.7 注釋規(guī)范112.7.1 html注釋112.7.2 css注釋112.7.3 JavaScript注釋11四、執(zhí)行模式12一、規(guī)范目的1.1 概述 提高團(tuán)隊(duì)協(xié)作效率 便于前端開(kāi)發(fā)以及后期優(yōu)化維護(hù) 方便新進(jìn)的成員快速上手 輸出高質(zhì)量的代碼本規(guī)范文檔一經(jīng)確認(rèn), 前端開(kāi)發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁(yè)面開(kāi)發(fā)。本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出，經(jīng)討論決定后可以更新此文檔。二、基本準(zhǔn)則 符合web標(biāo)準(zhǔn), 語(yǔ)義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良。 代碼要求簡(jiǎn)潔明了有序, 盡可能的減小服務(wù)器負(fù)載,

3、 保證最快的解析速度。開(kāi)發(fā)時(shí)需要遵循如上基本準(zhǔn)則，特殊情況可以有所寬限，如一些老項(xiàng)目的頁(yè)面改造。三、文件規(guī)范2.1 文件命名規(guī)則使用場(chǎng)景：在新建網(wǎng)頁(yè)、圖片、腳本、CSS文件時(shí)，根據(jù)此規(guī)則給文件命名并放入指定位置文件名稱統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字空格和特殊字符。命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義，二是當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí)，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。2.1.1 HTML的命名原則索引文件統(tǒng)一使用index.htm index.html index

4、.asp文件名。各子頁(yè)命名的原則首先應(yīng)該以欄目名的英語(yǔ)翻譯取單一單詞為名稱。例如： 子頁(yè)命名關(guān)于我們 aboutus信息反饋 feedback產(chǎn) 品 product如果欄目名稱多而復(fù)雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示。每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件，文件名統(tǒng)一用index.htm index.html index.asp。2.1.2 圖片的命名原則圖片的名稱分為頭尾兩部分，用下劃線隔開(kāi)，頭部分表示此圖片的大類性質(zhì)。例如：廣告、標(biāo)志、菜單、按鈕等等。 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片取名： banner 標(biāo)志性的圖片取名為： logo 在

5、頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu 裝飾用的照片我們?nèi)∶?pic 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶?title 范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg2.1.3. javascript的命名原則一般使用腳本功能的英文小寫(xiě)縮寫(xiě)命名。例如：廣告條的javascript文件名為 ad.

6、js 彈出窗口的javascript文件名為 pop.js2.1.4 動(dòng)態(tài)語(yǔ)言文件命名原則以性質(zhì)_描述，描述可以有多個(gè)單詞，用“_”隔開(kāi)，性質(zhì)一般是該頁(yè)面得概要。范例：register_form.asp register_post.asp topic_lock.asp2.2 文件存放位置規(guī)范文件夾說(shuō)明flash存放flash文件images存放圖片文件inc存放include文件library存放DW庫(kù)文件media存放多媒體文件script存放javascript腳本css存放css文件2.3 CSS 書(shū)寫(xiě)規(guī)范使用場(chǎng)景：書(shū)寫(xiě)CSS樣式時(shí)，根據(jù)此規(guī)則對(duì)id和class進(jìn)行命名，并遵循書(shū)寫(xiě)規(guī)則，

7、避免出現(xiàn)常犯錯(cuò)誤，提高效率。2.3.1 基本原則CSS樣式可細(xì)分為3類：重新定義HTML樣式、鏈接狀態(tài)樣式、自定義樣式。1. 重新定義HTML樣式為設(shè)計(jì)師重新定義已有的HTML標(biāo)簽樣式，影響全部的被設(shè)定標(biāo)簽樣式，用于統(tǒng)一網(wǎng)頁(yè)中某一標(biāo)簽的樣式定義。樣式名“HTML標(biāo)簽”例：hr border: 1px dotted #333333 2. 鏈接狀態(tài)樣式為設(shè)計(jì)師對(duì)鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。該樣式寫(xiě)法有2種： a.nav:link(中間無(wú)空格) 、.nav a:link 第一種只能修飾標(biāo)簽中；第二種可以修飾所有包含有標(biāo)簽的其他標(biāo)簽。3. 樣式為設(shè)計(jì)師自定義的新 CSS 樣

8、式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁(yè)中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫(xiě)”例：“ .shadow ”文字樣式樣式名“.no”+“字號(hào)”+“行距”+“顏色縮寫(xiě)”例：“ .no12 ” 、“ .no12_24 ”“.no12”類型一般出現(xiàn)在base.css文件中，只可選用，不可修改，避免名稱含義和實(shí)際內(nèi)容不符。自定義的樣式名最好用意義命名。比如：重要的新聞高亮顯示（像紅色），有兩種寫(xiě)法：redcolor:red；.important_newscolor:red；很顯然第二種傳達(dá)的意義更加明確,所以盡量不要用意義不明確的作為自定義命名。4. 頁(yè)面內(nèi)的樣式加載必須用鏈接

9、方式：5. 重新定義的最先，偽類其次，自定義樣式最后，便于自己和他人閱讀。6. 一般不允許將樣式的定義寫(xiě)在標(biāo)簽中（如：style=“color:red;”）； 7. 所有裝飾性的圖片（如背景圖），要定義在CSS中； 2.3.2 注意細(xì)則1. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的由設(shè)計(jì)框架之人統(tǒng)一命名。其他樣式名稱由小寫(xiě)英文&數(shù)字&_來(lái)組合命名, 避免使用中文拼音, 盡量使用簡(jiǎn)易的單詞組合; 總之, 命名要語(yǔ)義化, 簡(jiǎn)明化。2. 規(guī)避class與id重名 , 不建議使用id選擇器。a. 通過(guò)從屬寫(xiě)法規(guī)避, 示例見(jiàn)d; b.

10、 取父級(jí)元素id/class命名部分命名, 示例見(jiàn)d; c. 重復(fù)使用率高的命名,可加代號(hào)加下劃線起始, 比如i_clear; d. a、b兩條, 適用于在2中已建好框架的頁(yè)面, 如, 要在2中已建好框架的頁(yè)面代碼中加入新的div元素,按a命名法則: ., 樣式寫(xiě)法: #mainnav .firstnav.按b命名法則: ., 樣式寫(xiě)法: .main_firstnav.3. css屬性書(shū)寫(xiě)順序, 建議遵循 布局定位屬性-自身屬性-文本屬性-其他屬性。此條可根據(jù)自身習(xí)慣書(shū)寫(xiě), 但盡量保證同類屬性寫(xiě)在一起。文件夾說(shuō)明布局定位屬性Marginpaddingfloatclearposition（相應(yīng)的

11、 top,right,bottom,left）displayvisibilityoverflow等自身屬性Widthheightbackground border文本屬性fontcolortext-aligntext-decorationtext-indent white-spaceothertextcontent等其他屬性list-style(列表樣式)vertical-aligncursorz-index(層疊順序) zoom等4. 書(shū)寫(xiě)代碼前, 考慮并提高樣式重復(fù)使用率;5. 杜絕使用 兼容ie8;6. 避免兼容性屬性的使用, 比如text-shadow | css3的相關(guān)屬性;7. 減

12、少使用影響性能的屬性, 比如position:absolute | float ;8. 重要圖片加上 alt 屬性；重要的元素和截?cái)嗟脑丶由蟭itle;9. 避免使用!important，!important的優(yōu)先級(jí)最高;10. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;11. 代碼縮進(jìn)與格式: 建議單行書(shū)寫(xiě), 可根據(jù)自身習(xí)慣, 后期優(yōu)化統(tǒng)一處理;12. Margin、padding、border、font等樣式盡可能采用合并寫(xiě)法;上面的簡(jiǎn)寫(xiě)圖解說(shuō)明的是依據(jù)不同的屬性值可以進(jìn)行不同的縮寫(xiě)，這種方法同樣適用于padding和Border-width屬性;Font的簡(jiǎn)寫(xiě)對(duì)于縮小代碼量很有幫劣，

13、如果沒(méi)有定義某個(gè)屬性值的話，將繼承父級(jí)元素的定義或使用默認(rèn)值。2.3.3 命名規(guī)則頁(yè)面結(jié)構(gòu)容器: container/wrap整體寬度：wrapper頁(yè)頭：header內(nèi)容：content頁(yè)面主體：main頁(yè)尾：footer側(cè)欄：sidebar欄目：column中間內(nèi)容：center導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainbav/globalnav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar邊導(dǎo)航圖標(biāo)：sidebarIcon菜單：menu子菜單：submenu標(biāo)題: title功能標(biāo)志：logo登陸：login登錄條：lo

14、ginbar注冊(cè)：regsiter產(chǎn)品：products產(chǎn)品價(jià)格：products_prices產(chǎn)品評(píng)論：products_review編輯評(píng)論：editor_review最新產(chǎn)品：news_release最新產(chǎn)品：news_release廣告/標(biāo)語(yǔ)：banner摘要:summary生產(chǎn)商：publisher縮略圖：screenshot常見(jiàn)問(wèn)題：faqs關(guān)鍵詞：keyword博客：blog論壇：forum搜索：search搜索輸入框：search_input搜索輸出：search_output搜索結(jié)果：search_results加入我們：joinus狀態(tài)：status按鈕：btn滾動(dòng)：scr

15、oll標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg/message當(dāng)前的: current小技巧：tips皮膚：skin充值：pay活動(dòng)：activities推廣：promotion公告：announcement排行：ranking公司簡(jiǎn)介：company_profile公司設(shè)備：equipment公司榮譽(yù)：glories企業(yè)文化：culture企業(yè)規(guī)模：scale營(yíng)銷網(wǎng)絡(luò)：sales_network組織機(jī)構(gòu)：organization技術(shù)力量：technology分支機(jī)構(gòu)：branches企業(yè)資質(zhì)：enterprise_qualification公司實(shí)力：strength_strength

16、經(jīng)營(yíng)理念：operation_principle經(jīng)理致辭：manager_oration發(fā)展歷程：development_history工程案例：engineering_projects分類瀏覽：browse_by_category應(yīng)用領(lǐng)域：application_fields人力資源：human_resource_hr領(lǐng)導(dǎo)致辭： leader_oration客戶留言：customer_message客戶服務(wù)：customer_service您的要求：your_requirements銷售信息：sales_information招商：enterprise_establishing教育培訓(xùn)：ed

17、ucation_training在線交流：online_communication質(zhì)量認(rèn)證：quality_certification合作加盟：joinIn_cooperation產(chǎn)品描述：products_description業(yè)務(wù)范圍：business_scope產(chǎn)品銷售：sales_sales聯(lián)系我們：contact_us信息發(fā)布：information返回首頁(yè)：homepage產(chǎn)品定購(gòu)：order電子商務(wù)：e_business版權(quán)所有：copy _right友情連結(jié)：hot_link行業(yè)新聞：trade_news行業(yè)動(dòng)態(tài)：trends郵編：postal_code_zipcode新聞動(dòng)態(tài)

18、：news_trends公司名稱：company_name銷售熱線：sales_hotline聯(lián)系人：contact_person建設(shè)中：in_construction證書(shū)：certificate地址：add電話：tel傳真：fax產(chǎn)品名稱：product_name產(chǎn)品說(shuō)明：description價(jià)格：price品牌：brand規(guī)格：specification尺寸：size生產(chǎn)廠家：manufacuturer型號(hào)：model產(chǎn)品標(biāo)號(hào)：item_no技術(shù)指標(biāo)：technique_data產(chǎn)品描述：description產(chǎn)地：production_place用途：application論壇：for

19、um在線訂購(gòu)：on_line_order招標(biāo)：bidInviting綜述：general業(yè)績(jī)：achievements大事：great_event動(dòng)態(tài)：trends服務(wù)：service投資：investment行業(yè)：industry規(guī)劃：programming環(huán)境：environment發(fā)送：delivery提交：submit重寫(xiě)：reset社區(qū)：community業(yè)務(wù)：business在線調(diào)查：online_inquiry下載中心：download意見(jiàn)反饋：feedback常見(jiàn)問(wèn)題：faq中心概況：general_profile游樂(lè)園：amusement_park專題報(bào)道：special_r

20、eport圖標(biāo): icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote商標(biāo)：label/branding當(dāng)前位置：breadcrumb/loc購(gòu)物車：shop標(biāo)簽：tag信譽(yù)：siteinfo_credits網(wǎng)站信息：siteinfo法律聲明：siteinfo_legal合作伙伴：partner友情鏈接：friendlink版權(quán)：copyright2.4 html 書(shū)寫(xiě)規(guī)范使用場(chǎng)景：書(shū)寫(xiě)html頁(yè)面時(shí)，根據(jù)此規(guī)則對(duì)html內(nèi)容進(jìn)行補(bǔ)充和完善。2.4.1 head區(qū)代碼規(guī)范 head區(qū)是指HTML代碼的和之間的內(nèi)容。 必須加入的

21、標(biāo)簽 1. 網(wǎng)頁(yè)顯示字符集 簡(jiǎn)體中文：繁體中文：英 語(yǔ)：2. 搜索關(guān)鍵字（網(wǎng)站類型） 3. 網(wǎng)頁(yè)的css規(guī)范 4. 網(wǎng)頁(yè)標(biāo)題 xxxxxxxxxxxxxxxxxx 可以選擇加入的標(biāo)簽 1.公司版權(quán)注釋 2. 網(wǎng)頁(yè)制作者信息 3. 網(wǎng)站簡(jiǎn)介4. 設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新調(diào)閱。 5. 禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容。 6. 用來(lái)防止別人在框架里調(diào)用你的頁(yè)面。7. 自動(dòng)跳轉(zhuǎn)。 5指時(shí)間停留5秒8. 網(wǎng)頁(yè)搜索機(jī)器人向?qū)?。用?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。CONTENT的參數(shù)有all,none,index,noindex,follow,nofol

22、low。默認(rèn)是all。 9. 收藏夾圖標(biāo) 10. 所有的javascript的調(diào)用盡量采取外部調(diào)用. 2.4.2 body區(qū)代碼規(guī)范1. 附標(biāo)簽： 標(biāo)簽不屬于head區(qū)，這里強(qiáng)調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁(yè)面背景（此處為示意，樣式需寫(xiě)在CSS文件中）2. 在瀏覽器里，當(dāng)我們點(diǎn)擊空鏈接時(shí)，它會(huì)自動(dòng)將當(dāng)前頁(yè)面重置到首端，從而影響用戶正常的閱讀內(nèi)容，我們用代碼“javascript:void(null)”代替原來(lái)的“#”標(biāo)記。鏈接2.5 JavaScript書(shū)寫(xiě)規(guī)范使用場(chǎng)景：書(shū)寫(xiě)js腳本時(shí)，根據(jù)此規(guī)則對(duì)變類、函數(shù)、變量命名，并遵循書(shū)寫(xiě)規(guī)則，避免出現(xiàn)常犯錯(cuò)誤，提高腳本效率。1. 書(shū)寫(xiě)過(guò)程中

23、, 每行代碼結(jié)束必須有分號(hào); 原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開(kāi)發(fā), 以避免網(wǎng)上down下來(lái)的代碼造成的代碼污染(沉冗代碼 | 與現(xiàn)有代碼沖突 | .);2. 庫(kù)引入: 原則上僅引入jQuery庫(kù),以及組件組開(kāi)發(fā)的相關(guān)庫(kù)。 若需引入第三方庫(kù), 須與團(tuán)隊(duì)其他人員討論決定;3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫(xiě), 如iTaoLun; jQuery私有變量要求首字符為_(kāi), 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.4. 類命名: 首字母大寫(xiě)，如 ITaoLun;5. 函數(shù)命

24、名: 首字母小寫(xiě)駝峰式命名. 如iTaoLun();6. 命名語(yǔ)義化, 盡可能利用英文單詞或其縮寫(xiě);7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval() & innerText;8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯(cuò)誤時(shí)亂碼顯示;9. 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;10. 注重與html分離, 減小reflow, 注重性能.2.6 圖片規(guī)范使用場(chǎng)景：引用添加圖片文件時(shí)，根據(jù)此規(guī)則對(duì)圖片格式進(jìn)行選擇以及命名存放。1. 所有頁(yè)面元素類圖片均放入images文件夾, 測(cè)試用圖片放于images/demo

25、img文件夾;2. 圖片格式僅限于gif | png | jpg;3. 命名全部用小寫(xiě)英文字母 | 數(shù)字 | _ 的組合，其中不得包含漢字 | 空格 | 特殊字符；盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開(kāi), 比如ad_left01.gif | btn_submit.gif;4. 在保證視覺(jué)效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;5. 盡量避免使用半透明的png圖片(若使用, 請(qǐng)參考css規(guī)范相關(guān)說(shuō)明);6. 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁(yè)面http請(qǐng)求, 但注意, 請(qǐng)務(wù)必在對(duì)應(yīng)的sprite psd源圖中

26、劃參考線, 并保存至images目錄下.2.7 注釋規(guī)范使用場(chǎng)景：書(shū)寫(xiě)代碼時(shí)，根據(jù)此規(guī)則對(duì)代碼進(jìn)行適當(dāng)注釋說(shuō)明，方便自己或他人閱讀和理解。2.7.1 html注釋注釋格式 , -只能在注釋的始末位置,不可置入注釋文字區(qū)域。2.7.2 css注釋1. 行間注釋：直接寫(xiě)于屬性值后面。例： .search border:1pxsolid#fff;/*定義搜索輸入框邊框*/ background:url(./images/icon.gif)no-report#333;/*定義搜索框的背景*/ 2. 整段注釋：分別在開(kāi)始及結(jié)束地方加入注釋。例： /*=搜索條=*/ .search border:1pxsolid#fff;background:url(./images/icon.gif)no-repeat#333; /*=搜索條結(jié)束=*/2.7.3 JavaScript注釋JavaScript注釋, 單行注釋使用/這兒是單行注釋 ,多行注釋使用 /* 這兒有多行注釋 */;四、執(zhí)行模式 規(guī)范文檔存入部門SVN文件庫(kù)，方便下載查閱。 根據(jù)規(guī)范內(nèi)容，制作網(wǎng)頁(yè)格式幫助手冊(cè)。 根據(jù)規(guī)則建立和不斷完善框架模板庫(kù)，給不同類型的網(wǎng)站提供示例參考。 執(zhí)行規(guī)范過(guò)程中根據(jù)實(shí)際情況不斷補(bǔ)充完善規(guī)則。 開(kāi)發(fā)負(fù)責(zé)人需要檢查提交的代碼是否符合規(guī)范，并記錄檢查結(jié)果。12