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

《Web前端開發(fā)規(guī)范手冊.doc》由會員分享，可在線閱讀，更多相關(guān)《Web前端開發(fā)規(guī)范手冊.doc（12頁珍藏版）》請在裝配圖網(wǎng)上搜索。

Web前端開發(fā)規(guī)范手冊 修訂歷史記錄 日期 版本 說明 作者 2012年12月31日 1.0 初稿 施昀 2012年01月05日 1.1 施昀、戴靜 2012年01月07日 1.2 施昀 目錄 修訂歷史記錄 1 一、規(guī)范目的 2 1.1 概述 2 二、基本準(zhǔn)則 2 三、文件規(guī)范 3 2.1 文件命名規(guī)則 3 2.1.1 HTML的命名原則 3 2.1.2 圖片的命名原則 3 2.1.3. javascript的命名原則 4 2.1.4 動態(tài)語言文件命名原則 4 2.2 文件存放位置規(guī)范 4 2.3 CSS 書寫規(guī)范 4 2.3.1 基本原則 4 2.3.2 注意細(xì)則 5 2.3.3 命名規(guī)則 6 2.4 html 書寫規(guī)范 9 2.4.1 head區(qū)代碼規(guī)范 9 2.4.2 body區(qū)代碼規(guī)范 10 2.5 JavaScript書寫規(guī)范 10 2.6 圖片規(guī)范 10 2.7 注釋規(guī)范 11 2.7.1 html注釋 11 2.7.2 css注釋 11 2.7.3 JavaScript注釋 11 四、執(zhí)行模式 12 一、規(guī)范目的 1.1 概述 提高團(tuán)隊協(xié)作效率 便于前端開發(fā)以及后期優(yōu)化維護(hù) 方便新進(jìn)的成員快速上手 輸出高質(zhì)量的代碼 本規(guī)范文檔一經(jīng)確認(rèn), 前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(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.jpg 2.1.3. javascript的命名原則 一般使用腳本功能的英文小寫縮寫命名。 例如：廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js 2.1.4 動態(tài)語言文件命名原則 以性質(zhì)_描述，描述可以有多個單詞，用“_”隔開，性質(zhì)一般是該頁面得概要。 范例：register_form.asp register_post.asp topic_lock.asp 2.2 文件存放位置規(guī)范 文件夾 說明 flash 存放flash文件 images 存放圖片文件 inc 存放include文件 library 存放DW庫文件 media 存放多媒體文件 script 存放javascript腳本 css 存放css文件 2.3 CSS 書寫規(guī)范 [使用場景：書寫CSS樣式時，根據(jù)此規(guī)則對id和class進(jìn)行命名，并遵循書寫規(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文件中，只可選用，不可修改，避免名稱含義和實(shí)際內(nèi)容不符。自定義的樣式名最好用意義命名。 比如：重要的新聞高亮顯示（像紅色），有兩種寫法： red{color:red}； .important_news{color: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í)慣書寫, 但盡量保證同類屬性寫在一起。 文件夾 說明 布局定位屬性 Margin\padding\float\clear\position（相應(yīng)的 top,right,bottom,left）\display\visibility\overflow等 自身屬性 Width\height\background\ border 文本屬性 font\color\text-align\text-decoration\ text-indent\ white-space\othertext\content等 其他屬性 list-style(列表樣式)\vertical-align\cursor\z-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ìn)與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化統(tǒng)一處理; 12. Margin、padding、border、font等樣式盡可能采用合并寫法; 上面的簡寫圖解說明的是依據(jù)不同的屬性值可以進(jìn)行不同的縮寫，這種方法同樣適用于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 公司榮譽(yù)：glories 企業(yè)文化：culture 企業(yè)規(guī)模：scale 營銷網(wǎng)絡(luò)：sales_network 組織機(jī)構(gòu)：organization 技術(shù)力量：technology 分支機(jī)構(gòu)：branches 企業(yè)資質(zhì)：enterprise_qualification 公司實(shí)力：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 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 商標(biāo)：label/branding 當(dāng)前位置：breadcrumb/loc 購物車：shop 標(biāo)簽：tag 信譽(yù)：siteinfo_credits 網(wǎng)站信息：siteinfo 法律聲明：siteinfo_legal 合作伙伴：partner 友情鏈接：friendlink 版權(quán)：copyright 2.4 html 書寫規(guī)范 [使用場景：書寫html頁面時，根據(jù)此規(guī)則對html內(nèi)容進(jìn)行補(bǔ)充和完善。] 2.4.1 head區(qū)代碼規(guī)范 head區(qū)是指HTML代碼的和之間的內(nèi)容。 必須加入的標(biāo)簽 1. 網(wǎng)頁顯示字符集 簡體中文： 繁體中文： 英 語： 2. 搜索關(guān)鍵字（網(wǎng)站類型） < meta name="keywords" content ="xxxx,xxxx,xxx,xxxxx,xxxx,"> 3. 網(wǎng)頁的css規(guī)范 4. 網(wǎng)頁標(biāo)題 可以選擇加入的標(biāo)簽 1.公司版權(quán)注釋 2. 網(wǎng)頁制作者信息 3. 網(wǎng)站簡介 4. 設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱。 5. 禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。 6. 用來防止別人在框架里調(diào)用你的頁面。 7. 自動跳轉(zhuǎn)。 5指時間停留5秒 8. 網(wǎng)頁搜索機(jī)器人向?qū)?。用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。 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ū)，這里強(qiáng)調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁面背景（此處為示意，樣式需寫在CSS文件中） 2. 在瀏覽器里，當(dāng)我們點(diǎn)擊空鏈接時，它會自動將當(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)庫。 若需引入第三方庫, 須與團(tuá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ī)則對圖片格式進(jìn)行選擇以及命名存放。] 1. 所有頁面元素類圖片均放入images文件夾, 測試用圖片放于images/demoimg文件夾; 2. 圖片格式僅限于gif || png || jpg; 3. 命名全部用小寫英文字母 || 數(shù)字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便于團(tuán)隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif; 4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時間; 5. 盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明); 6. 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁面http請求, 但注意, 請務(wù)必在對應(yīng)的sprite psd源圖中劃參考線, 并保存至images目錄下. 2.7 注釋規(guī)范 [使用場景：書寫代碼時，根據(jù)此規(guī)則對代碼進(jìn)行適當(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ù)實(shí)際情況不斷補(bǔ)充完善規(guī)則。 開發(fā)負(fù)責(zé)人需要檢查提交的代碼是否符合規(guī)范，并記錄檢查結(jié)果。