Web前端開發(fā)規(guī)范手冊.doc

Web前端開發(fā)規(guī)范手冊Web前端開發(fā)規(guī)范手冊修訂歷史記錄日期版本說明作者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 動態(tài)語言文件命名原則42.2 文件存放位置規(guī)范42.3 CSS 書寫規(guī)范42.3.1 基本原則42.3.2 注意細(xì)則52.3.3 命名規(guī)則62.4 html 書寫規(guī)范92.4.1 head區(qū)代碼規(guī)范92.4.2 body區(qū)代碼規(guī)范102.5 JavaScript書寫規(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 概述 提高團隊協(xié)作效率 便于前端開發(fā)以及后期優(yōu)化維護 方便新進的成員快速上手 輸出高質(zhì)量的代碼本規(guī)范文檔一經(jīng)確認(rèn), 前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。本文檔如有不對或者不合適的地方請及時提出，經(jīng)討論決定后可以更新此文檔。二、基本準(zhǔn)則 符合web標(biāo)準(zhǔn), 語義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良。 代碼要求簡潔明了有序, 盡可能的減小服務(wù)器負(fù)載, 保證最快的解析速度。開發(fā)時需要遵循如上基本準(zhǔn)則，特殊情況可以有所寬限，如一些老項目的頁面改造。三、文件規(guī)范2.1 文件命名規(guī)則使用場景：在新建網(wǎng)頁、圖片、腳本、CSS文件時，根據(jù)此規(guī)則給文件命名并放入指定位置文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字空格和特殊字符。命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負(fù)載量等等操作。2.1.1 HTML的命名原則索引文件統(tǒng)一使用index.htm index.html index.asp文件名。各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如： 子頁命名關(guān)于我們 aboutus信息反饋 feedback產(chǎn) 品 product如果欄目名稱多而復(fù)雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示。每一個目錄中應(yīng)該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm index.html index.asp。2.1.2 圖片的命名原則圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)。例如：廣告、標(biāo)志、菜單、按鈕等等。 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner 標(biāo)志性的圖片取名為： logo 在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button 在頁面上某一個位置連續(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的命名原則一般使用腳本功能的英文小寫縮寫命名。例如：廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js2.1.4 動態(tài)語言文件命名原則以性質(zhì)_描述，描述可以有多個單詞，用“_”隔開，性質(zhì)一般是該頁面得概要。范例：register_form.asp register_post.asp topic_lock.asp2.2 文件存放位置規(guī)范文件夾說明flash存放flash文件images存放圖片文件inc存放include文件library存放DW庫文件media存放多媒體文件script存放javascript腳本css存放css文件2.3 CSS 書寫規(guī)范使用場景：書寫CSS樣式時，根據(jù)此規(guī)則對id和class進行命名，并遵循書寫規(guī)則，避免出現(xiàn)常犯錯誤，提高效率。2.3.1 基本原則CSS樣式可細(xì)分為3類：重新定義HTML樣式、鏈接狀態(tài)樣式、自定義樣式。1. 重新定義HTML樣式為設(shè)計師重新定義已有的HTML標(biāo)簽樣式，影響全部的被設(shè)定標(biāo)簽樣式，用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義。樣式名“HTML標(biāo)簽”例：hr border: 1px dotted #333333 2. 鏈接狀態(tài)樣式為設(shè)計師對鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。該樣式寫法有2種： a.nav:link(中間無空格) 、.nav a:link 第一種只能修飾標(biāo)簽中；第二種可以修飾所有包含有標(biāo)簽的其他標(biāo)簽。3. 樣式為設(shè)計師自定義的新 CSS 樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例：“ .shadow ”文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ” 、“ .no12_24 ”“.no12”類型一般出現(xiàn)在base.css文件中，只可選用，不可修改，避免名稱含義和實際內(nèi)容不符。自定義的樣式名最好用意義命名。比如：重要的新聞高亮顯示（像紅色），有兩種寫法：redcolor:red；.important_newscolor:red；很顯然第二種傳達(dá)的意義更加明確,所以盡量不要用意義不明確的作為自定義命名。4. 頁面內(nèi)的樣式加載必須用鏈接方式：5. 重新定義的最先，偽類其次，自定義樣式最后，便于自己和他人閱讀。6. 一般不允許將樣式的定義寫在標(biāo)簽中（如：style=“color:red;”）； 7. 所有裝飾性的圖片（如背景圖），要定義在CSS中； 2.3.2 注意細(xì)則1. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的由設(shè)計框架之人統(tǒng)一命名。其他樣式名稱由小寫英文&數(shù)字&_來組合命名, 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化。2. 規(guī)避class與id重名 , 不建議使用id選擇器。a. 通過從屬寫法規(guī)避, 示例見d; b. 取父級元素id/class命名部分命名, 示例見d; c. 重復(fù)使用率高的命名,可加代號加下劃線起始, 比如i_clear; d. a、b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼中加入新的div元素,按a命名法則: ., 樣式寫法: #mainnav .firstnav.按b命名法則: ., 樣式寫法: .main_firstnav.3. css屬性書寫順序, 建議遵循 布局定位屬性-自身屬性-文本屬性-其他屬性。此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起。文件夾說明布局定位屬性Marginpaddingfloatclearposition（相應(yīng)的 top,right,bottom,left）displayvisibilityoverflow等自身屬性Widthheightbackground border文本屬性fontcolortext-aligntext-decorationtext-indent white-spaceothertextcontent等其他屬性list-style(列表樣式)vertical-aligncursorz-index(層疊順序) zoom等4. 書寫代碼前, 考慮并提高樣式重復(fù)使用率;5. 杜絕使用 兼容ie8;6. 避免兼容性屬性的使用, 比如text-shadow | css3的相關(guān)屬性;7. 減少使用影響性能的屬性, 比如position:absolute | float ;8. 重要圖片加上 alt 屬性；重要的元素和截斷的元素加上title;9. 避免使用!important，!important的優(yōu)先級最高;10. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;11. 代碼縮進與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化統(tǒng)一處理;12. Margin、padding、border、font等樣式盡可能采用合并寫法;上面的簡寫圖解說明的是依據(jù)不同的屬性值可以進行不同的縮寫，這種方法同樣適用于padding和Border-width屬性;Font的簡寫對于縮小代碼量很有幫劣，如果沒有定義某個屬性值的話，將繼承父級元素的定義或使用默認(rèn)值。2.3.3 命名規(guī)則頁面結(jié)構(gòu)容器: container/wrap整體寬度：wrapper頁頭：header內(nèi)容：content頁面主體：main頁尾：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登錄條：loginbar注冊：regsiter產(chǎn)品：products產(chǎn)品價格：products_prices產(chǎn)品評論：products_review編輯評論：editor_review最新產(chǎn)品：news_release最新產(chǎn)品：news_release廣告/標(biāo)語：banner摘要:summary生產(chǎn)商：publisher縮略圖：screenshot常見問題：faqs關(guān)鍵詞：keyword博客：blog論壇：forum搜索：search搜索輸入框：search_input搜索輸出：search_output搜索結(jié)果：search_results加入我們：joinus狀態(tài)：status按鈕：btn滾動：scroll標(biāo)簽頁：tab文章列表：list提示信息：msg/message當(dāng)前的: current小技巧：tips皮膚：skin充值：pay活動：activities推廣：promotion公告：announcement排行：ranking公司簡介：company_profile公司設(shè)備：equipment公司榮譽：glories企業(yè)文化：culture企業(yè)規(guī)模：scale營銷網(wǎng)絡(luò)：sales_network組織機構(gòu)：organization技術(shù)力量：technology分支機構(gòu)：branches企業(yè)資質(zhì)：enterprise_qualification公司實力：strength_strength經(jī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)：education_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返回首頁：homepage產(chǎn)品定購：order電子商務(wù)：e_business版權(quán)所有：copy _right友情連結(jié)：hot_link行業(yè)新聞：trade_news行業(yè)動態(tài)：trends郵編：postal_code_zipcode新聞動態(tài)：news_trends公司名稱：company_name銷售熱線：sales_hotline聯(lián)系人：contact_person建設(shè)中：in_construction證書：certificate地址：add電話：tel傳真：fax產(chǎn)品名稱：product_name產(chǎn)品說明：description價格：price品牌：brand規(guī)格：specification尺寸：size生產(chǎn)廠家：manufacuturer型號：model產(chǎn)品標(biāo)號：item_no技術(shù)指標(biāo)：technique_data產(chǎn)品描述：description產(chǎn)地：production_place用途：application論壇：forum在線訂購：on_line_order招標(biāo)：bidInviting綜述：general業(yè)績：achievements大事：great_event動態(tài)：trends服務(wù)：service投資：investment行業(yè)：industry規(guī)劃：programming環(huán)境：environment發(fā)送：delivery提交：submit重寫：reset社區(qū)：community業(yè)務(wù)：business在線調(diào)查：online_inquiry下載中心：download意見反饋：feedback常見問題：faq中心概況：general_profile游樂園：amusement_park專題報道：special_report圖標(biāo): icon注釋：note指南：guild服務(wù)：service熱點：hot新聞：news下載：download投票：vote商標(biāo)：label/branding當(dāng)前位置：breadcrumb/loc購物車：shop標(biāo)簽：tag信譽：siteinfo_credits網(wǎng)站信息：siteinfo法律聲明：siteinfo_legal合作伙伴：partner友情鏈接：friendlink版權(quán)：copyright2.4 html 書寫規(guī)范使用場景：書寫html頁面時，根據(jù)此規(guī)則對html內(nèi)容進行補充和完善。2.4.1 head區(qū)代碼規(guī)范 head區(qū)是指HTML代碼的和之間的內(nèi)容。 必須加入的標(biāo)簽 1. 網(wǎng)頁顯示字符集 簡體中文：繁體中文：英 語：2. 搜索關(guān)鍵字（網(wǎng)站類型） 3. 網(wǎng)頁的css規(guī)范 4. 網(wǎng)頁標(biāo)題 xxxxxxxxxxxxxxxxxx 可以選擇加入的標(biāo)簽 1.公司版權(quán)注釋 2. 網(wǎng)頁制作者信息 3. 網(wǎng)站簡介4. 設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱。 5. 禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容。 6. 用來防止別人在框架里調(diào)用你的頁面。7. 自動跳轉(zhuǎn)。 5指時間停留5秒8. 網(wǎng)頁搜索機器人向?qū)?。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(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ū)，這里強調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁面背景（此處為示意，樣式需寫在CSS文件中）2. 在瀏覽器里，當(dāng)我們點擊空鏈接時，它會自動將當(dāng)前頁面重置到首端，從而影響用戶正常的閱讀內(nèi)容，我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記。鏈接2.5 JavaScript書寫規(guī)范使用場景：書寫js腳本時，根據(jù)此規(guī)則對變類、函數(shù)、變量命名，并遵循書寫規(guī)則，避免出現(xiàn)常犯錯誤，提高腳本效率。1. 書寫過程中, 每行代碼結(jié)束必須有分號; 原則上所有功能均根據(jù)XXX項目需求原生開發(fā), 以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼 | 與現(xiàn)有代碼沖突 | .);2. 庫引入: 原則上僅引入jQuery庫,以及組件組開發(fā)的相關(guān)庫。 若需引入第三方庫, 須與團隊其他人員討論決定;3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery私有變量要求首字符為_, 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.4. 類命名: 首字母大寫，如 ITaoLun;5. 函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();6. 命名語義化, 盡可能利用英文單詞或其縮寫;7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval() & innerText;8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;9. 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;10. 注重與html分離, 減小reflow, 注重性能.2.6 圖片規(guī)范使用場景：引用添加圖片文件時，根據(jù)此規(guī)則對圖片格式進行選擇以及命名存放。1. 所有頁面元素類圖片均放入images文件夾, 測試用圖片放于images/demoimg文件夾;2. 圖片格式僅限于gif | png | jpg;3. 命名全部用小寫英文字母 | 數(shù)字 | _ 的組合，其中不得包含漢字 | 空格 | 特殊字符；盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif | btn_submit.gif;4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時間;5. 盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明);6. 運用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁面http請求, 但注意, 請務(wù)必在對應(yīng)的sprite psd源圖中劃參考線, 并保存至images目錄下.2.7 注釋規(guī)范使用場景：書寫代碼時，根據(jù)此規(guī)則對代碼進行適當(dāng)注釋說明，方便自己或他人閱讀和理解。2.7.1 html注釋注釋格式 , -只能在注釋的始末位置,不可置入注釋文字區(qū)域。2.7.2 css注釋1. 行間注釋：直接寫于屬性值后面。例： .search border:1pxsolid#fff;/*定義搜索輸入框邊框*/ background:url(./images/icon.gif)no-report#333;/*定義搜索框的背景*/ 2. 整段注釋：分別在開始及結(jié)束地方加入注釋。例： /*=搜索條=*/ .search border:1pxsolid#fff;background:url(./images/icon.gif)no-repeat#333; /*=搜索條結(jié)束=*/2.7.3 JavaScript注釋JavaScript注釋, 單行注釋使用/這兒是單行注釋 ,多行注釋使用 /* 這兒有多行注釋 */;四、執(zhí)行模式 規(guī)范文檔存入部門SVN文件庫，方便下載查閱。 根據(jù)規(guī)范內(nèi)容，制作網(wǎng)頁格式幫助手冊。 根據(jù)規(guī)則建立和不斷完善框架模板庫，給不同類型的網(wǎng)站提供示例參考。 執(zhí)行規(guī)范過程中根據(jù)實際情況不斷補充完善規(guī)則。 開發(fā)負(fù)責(zé)人需要檢查提交的代碼是否符合規(guī)范，并記錄檢查結(jié)果。12