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

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

Web前端開發(fā)規(guī)范手冊 修訂歷史記錄 日期 版本 說明 作者 2012年12月31日 1.0 初稿 施昀 2012年01月05日 1.1 施昀、戴靜 2012年01月07日 1.2 施昀 目錄 修訂歷史記錄 1 一、規(guī)范目的 2 1.1 概述 2 二、基本準則 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 注意細則 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 概述 提高團隊協(xié)作效率 便于前端開發(fā)以及后期優(yōu)化維護 方便新進的成員快速上手 輸出高質量的代碼 本規(guī)范文檔一經確認, 前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。本文檔如有不對或者不合適的地方請及時提出，經討論決定后可以更新此文檔。 二、基本準則 符合web標準, 語義化html, 結構表現行為分離, 兼容性優(yōu)良。 代碼要求簡潔明了有序, 盡可能的減小服務器負載, 保證最快的解析速度。 開發(fā)時需要遵循如上基本準則，特殊情況可以有所寬限，如一些老項目的頁面改造。 三、文件規(guī)范 2.1 文件命名規(guī)則 [使用場景：在新建網頁、圖片、腳本、CSS文件時，根據此規(guī)則給文件命名并放入指定位置] 文件名稱統(tǒng)一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字空格和特殊字符。命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。 2.1.1 HTML的命名原則 索引文件統(tǒng)一使用index.htm index.html index.asp文件名。 各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如： 子頁 命名 關于我們 \ aboutus 信息反饋 \ feedback 產 品 \ product 如果欄目名稱多而復雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示。 每一個目錄中應該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm index.html index.asp。 2.1.2 圖片的命名原則 圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質。 例如：廣告、標志、菜單、按鈕等等。 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner 標志性的圖片取名為： logo 在頁面上位置不固定并且?guī)в墟溄拥男D片我們取名為 button 在頁面上某一個位置連續(xù)出現，性質相同的鏈接欄目的圖片我們取名： menu 裝飾用的照片我們取名： pic 不帶鏈接表示標題的圖片我們取名： 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)語言文件命名原則 以性質_描述，描述可以有多個單詞，用“_”隔開，性質一般是該頁面得概要。 范例：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樣式時，根據此規(guī)則對id和class進行命名，并遵循書寫規(guī)則，避免出現常犯錯誤，提高效率。] 2.3.1 基本原則 CSS樣式可細分為3類：重新定義HTML樣式、鏈接狀態(tài)樣式、自定義樣式。 1. 重新定義HTML樣式為設計師重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用于統(tǒng)一網頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hr { border: 1px dotted #333333 } 2. 鏈接狀態(tài)樣式為設計師對鏈接不同狀態(tài)設定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。 該樣式寫法有2種： a.nav:link(中間無空格) 、.nav a:link 第一種只能修飾標簽中；第二種可以修飾所有包含有標簽的其他標簽。 3. 樣式為設計師自定義的新 CSS 樣式，影響被使用本樣式的區(qū)域，用于完成網頁中局部的樣式設定。樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例：“ .shadow ” 文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ” 、“ .no12_24 ” “.no12”類型一般出現在base.css文件中，只可選用，不可修改，避免名稱含義和實際內容不符。自定義的樣式名最好用意義命名。 比如：重要的新聞高亮顯示（像紅色），有兩種寫法： red{color:red}； .important_news{color:red}； 很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自定義命名。 4. 頁面內的樣式加載必須用鏈接方式： 5. 重新定義的最先，偽類其次，自定義樣式最后，便于自己和他人閱讀。 6. 一般不允許將樣式的定義寫在標簽中（如：style=“color:red;”）； 7. 所有裝飾性的圖片（如背景圖），要定義在CSS中； 2.3.2 注意細則 1. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的由設計框架之人統(tǒng)一命名。其他樣式名稱由小寫英文&數字&_來組合命名, 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化。 2. 規(guī)避class與id重名 , 不建議使用id選擇器。 a. 通過從屬寫法規(guī)避, 示例見d; b. 取父級元素id/class命名部分命名, 示例見d; c. 重復使用率高的命名,可加代號加下劃線起始, 比如i_clear; d. a、b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼

中加入新的div元素, 按a命名法則:

...

, 樣式寫法: #mainnav .firstnav{.......} 按b命名法則:

...

, 樣式寫法: .main_firstnav{.......} 3. css屬性書寫順序, 建議遵循 布局定位屬性-->自身屬性-->文本屬性-->其他屬性。此條可根據自身習慣書寫, 但盡量保證同類屬性寫在一起。 文件夾 說明 布局定位屬性 Margin\padding\float\clear\position（相應的 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. 書寫代碼前, 考慮并提高樣式重復使用率; 5. 杜絕使用 兼容ie8; 6. 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性; 7. 減少使用影響性能的屬性, 比如position:absolute || float ; 8. 重要圖片加上 alt 屬性；重要的元素和截斷的元素加上title; 9. 避免使用!important，!important的優(yōu)先級最高; 10. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋; 11. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 后期優(yōu)化統(tǒng)一處理; 12. Margin、padding、border、font等樣式盡可能采用合并寫法; 上面的簡寫圖解說明的是依據不同的屬性值可以進行不同的縮寫，這種方法同樣適用于padding和Border-width屬性; Font的簡寫對于縮小代碼量很有幫劣，如果沒有定義某個屬性值的話，將繼承父級元素的定義或使用默認值。 2.3.3 命名規(guī)則 頁面結構 容器: container/wrap 整體寬度：wrapper 頁頭：header 內容：content 頁面主體：main 頁尾：footer 側欄：sidebar 欄目：column 中間內容：center 導航 導航：nav 主導航：mainbav/globalnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 邊導航圖標：sidebarIcon 菜單：menu 子菜單：submenu 標題: title 功能 標志：logo 登陸：login 登錄條：loginbar 注冊：regsiter 產品：products 產品價格：products_prices 產品評論：products_review 編輯評論：editor_review 最新產品：news_release 最新產品：news_release 廣告/標語：banner 摘要:summary 生產商：publisher 縮略圖：screenshot 常見問題：faqs 關鍵詞：keyword 博客：blog 論壇：forum 搜索：search 搜索輸入框：search_input 搜索輸出：search_output 搜索結果：search_results 加入我們：joinus 狀態(tài)：status 按鈕：btn 滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg/message 當前的: current 小技巧：tips 皮膚：skin 充值：pay 活動：activities 推廣：promotion 公告：announcement 排行：ranking 公司簡介：company_profile 公司設備：equipment 公司榮譽：glories 企業(yè)文化：culture 企業(yè)規(guī)模：scale 營銷網絡：sales_network 組織機構：organization 技術力量：technology 分支機構：branches 企業(yè)資質：enterprise_qualification 公司實力：strength_strength 經營理念：operation_principle 經理致辭：manager_oration 發(fā)展歷程：development_history 工程案例：engineering_projects 分類瀏覽：browse_by_category 應用領域：application_fields 人力資源：human_resource_hr 領導致辭： leader_oration 客戶留言：customer_message 客戶服務：customer_service 您的要求：your_requirements 銷售信息：sales_information 招商：enterprise_establishing 教育培訓：education_training 在線交流：online_communication 質量認證：quality_certification 合作加盟：joinIn_cooperation 產品描述：products_description 業(yè)務范圍：business_scope 產品銷售：sales_sales 聯(lián)系我們：contact_us 信息發(fā)布：information 返回首頁：homepage 產品定購：order 電子商務：e_business 版權所有：copy _right 友情連結：hot_link 行業(yè)新聞：trade_news 行業(yè)動態(tài)：trends 郵編：postal_code_zipcode 新聞動態(tài)：news_trends 公司名稱：company_name 銷售熱線：sales_hotline 聯(lián)系人：contact_person 建設中：in_construction 證書：certificate 地址：add 電話：tel 傳真：fax 產品名稱：product_name 產品說明：description 價格：price 品牌：brand 規(guī)格：specification 尺寸：size 生產廠家：manufacuturer 型號：model 產品標號：item_no 技術指標：technique_data 產品描述：description 產地：production_place 用途：application 論壇：forum 在線訂購：on_line_order 招標：bidInviting 綜述：general 業(yè)績：achievements 大事：great_event 動態(tài)：trends 服務：service 投資：investment 行業(yè)：industry 規(guī)劃：programming 環(huán)境：environment 發(fā)送：delivery 提交：submit 重寫：reset 社區(qū)：community 業(yè)務：business 在線調查：online_inquiry 下載中心：download 意見反饋：feedback 常見問題：faq 中心概況：general_profile 游樂園：amusement_park 專題報道：special_report 圖標: icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 商標：label/branding 當前位置：breadcrumb/loc 購物車：shop 標簽：tag 信譽：siteinfo_credits 網站信息：siteinfo 法律聲明：siteinfo_legal 合作伙伴：partner 友情鏈接：friendlink 版權：copyright 2.4 html 書寫規(guī)范 [使用場景：書寫html頁面時，根據此規(guī)則對html內容進行補充和完善。] 2.4.1 head區(qū)代碼規(guī)范 head區(qū)是指HTML代碼的和之間的內容。 必須加入的標簽 1. 網頁顯示字符集 簡體中文： 繁體中文： 英 語： 2. 搜索關鍵字（網站類型） < meta name="keywords" content ="xxxx,xxxx,xxx,xxxxx,xxxx,"> 3. 網頁的css規(guī)范 4. 網頁標題 可以選擇加入的標簽 1.公司版權注釋 2. 網頁制作者信息 3. 網站簡介 4. 設定網頁的到期時間。一旦網頁過期，必須到服務器上重新調閱。 5. 禁止瀏覽器從本地機的緩存中調閱頁面內容。 6. 用來防止別人在框架里調用你的頁面。 7. 自動跳轉。 5指時間停留5秒 8. 網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。 9. 收藏夾圖標 10. 所有的javascript的調用盡量采取外部調用. 2.4.2 body區(qū)代碼規(guī)范 1. 附標簽： 標簽不屬于head區(qū)，這里強調一下，為了保證瀏覽器的兼容性，必須設置頁面背景（此處為示意，樣式需寫在CSS文件中） 2. 在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記。 鏈接 2.5 JavaScript書寫規(guī)范 [使用場景：書寫js腳本時，根據此規(guī)則對變類、函數、變量命名，并遵循書寫規(guī)則，避免出現常犯錯誤，提高腳本效率。] 1. 書寫過程中, 每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發(fā), 以避免網上down下來的代碼造成的代碼污染(沉冗代碼 || 與現有代碼沖突 || ...); 2. 庫引入: 原則上僅引入jQuery庫,以及組件組開發(fā)的相關庫。 若需引入第三方庫, 須與團隊其他人員討論決定; 3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery私有變量要求首字符為_, 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量. 4. 類命名: 首字母大寫，如 ITaoLun; 5. 函數命名: 首字母小寫駝峰式命名. 如iTaoLun(); 6. 命名語義化, 盡可能利用英文單詞或其縮寫; 7. 盡量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval() & innerText; 8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示; 9. 代碼結構明了, 加適量注釋. 提高函數重用率; 10. 注重與html分離, 減小reflow, 注重性能. 2.6 圖片規(guī)范 [使用場景：引用添加圖片文件時，根據此規(guī)則對圖片格式進行選擇以及命名存放。] 1. 所有頁面元素類圖片均放入images文件夾, 測試用圖片放于images/demoimg文件夾; 2. 圖片格式僅限于gif || png || jpg; 3. 命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif; 4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間; 5. 盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關說明); 6. 運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 并保存至images目錄下. 2.7 注釋規(guī)范 [使用場景：書寫代碼時，根據此規(guī)則對代碼進行適當注釋說明，方便自己或他人閱讀和理解。] 2.7.1 html注釋 注釋格式 , --只能在注釋的始末位置,不可置入注釋文字區(qū)域。 2.7.2 css注釋 1. 行間注釋：直接寫于屬性值后面。 例： .search{ border:1pxsolid#fff;/*定義搜索輸入框邊框*/ background:url(../images/icon.gif)no-report#333;/*定義搜索框的背景*/ } 2. 整段注釋：分別在開始及結束地方加入注釋。 例： /*=====搜索條=====*/ .search{ border:1pxsolid#fff; background:url(../images/icon.gif)no-repeat#333;} /*=====搜索條結束=====*/ 2.7.3 JavaScript注釋 JavaScript注釋, 單行注釋使用//這兒是單行注釋 ,多行注釋使用 /* 這兒有多行注釋 */; 四、執(zhí)行模式 規(guī)范文檔存入部門SVN文件庫，方便下載查閱。 根據規(guī)范內容，制作網頁格式幫助手冊。 根據規(guī)則建立和不斷完善框架模板庫，給不同類型的網站提供示例參考。 執(zhí)行規(guī)范過程中根據實際情況不斷補充完善規(guī)則。 開發(fā)負責人需要檢查提交的代碼是否符合規(guī)范，并記錄檢查結果。