web前端開發(fā)規(guī)范手冊

《web前端開發(fā)規(guī)范手冊》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、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二、基本準則2三、文件規(guī)范32.1文件命名規(guī)則32.1.1HTML的命名原則32.1.2圖片的命名原則32.1.3.javascript的命名原則42.1.4動態(tài)語言文件命名原則42.2文件存放位置規(guī)范42.3CSS書寫規(guī)范42.3.1基本原則412Web前端開發(fā)規(guī)范手冊2.3.2注意細則52.3.3命名規(guī)則62.4html書寫規(guī)范92.4

2、.1head區(qū)代碼規(guī)范92.4.2body區(qū)代碼規(guī)范102.5JavaScript書寫規(guī)范102.6圖片規(guī)范102.7注釋規(guī)范112.7.1html注釋112.7.2css注釋112.7.3JavaScript注釋11四、執(zhí)行模式12一、規(guī)范目的1.1概述?提高團隊協(xié)作效率?便于前端開發(fā)以及后期優(yōu)化維護?方便新進的成員快速上手?輸出高質(zhì)量的代碼本規(guī)范文檔一經(jīng)確認,前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。本文檔如有不對或者不合適的地方請及時提出，經(jīng)討論決定后可以更新此文檔。二、基本準則?符合web標準,語義化html,結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良。?代碼

3、要求簡潔明了有序,盡可能的減小服務器負載,保證最快的解析速度。12Web前端開發(fā)規(guī)范手冊開發(fā)時需要遵循如上基本準則，特殊情況可以有所寬限，如一些老項目的頁面改造。三、文件規(guī)范2.1文件命名規(guī)則[使用場景：在新建網(wǎng)頁、圖片、腳本、CSS文件時，根據(jù)此規(guī)則給文件命名并放入指定位置]文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字空格和特殊字符。命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等

4、操作。2.1.1HTML的命名原則索引文件統(tǒng)一使用index.htmindex.htmlindex.asp文件名。各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如：子頁命名關(guān)于我們aboutus信息反饋feedback產(chǎn)品product如果欄目名稱多而復雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示。每一個目錄中應該包含一個缺省的html文件，文件名統(tǒng)一用index.htmindex.htmlindex.asp。2.1.2圖片的命名原則圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)。例如：廣告、標

5、志、菜單、按鈕等等。?放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner?標志性的圖片取名為：logo?在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton?在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu?裝飾用的照片我們?nèi)∶簆ic?不帶鏈接表示標題的圖片我們?nèi)∶簍itle范例：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpg

6、12Web前端開發(fā)規(guī)范手冊2.1.3.javascript的命名原則一般使用腳本功能的英文小寫縮寫命名。例如：廣告條的javascript文件名為ad.js彈出窗口的javascript文件名為pop.js2.1.4動態(tài)語言文件命名原則以性質(zhì)_描述，描述可以有多個單詞，用“_”隔開，性質(zhì)一般是該頁面得概要。范例：register_form.aspregister_post.asptopic_lock.asp2.2文件存放位置規(guī)范文件夾說明flash存放flash文件images存放圖片文件inc存放include文件library存放DW庫文件media存放

7、多媒體文件script存放javascript腳本css存放css文件2.3CSS書寫規(guī)范[使用場景：書寫CSS樣式時，根據(jù)此規(guī)則對id和class進行命名，并遵循書寫規(guī)則，避免出現(xiàn)常犯錯誤，提高效率。]2.3.1基本原則CSS樣式可細分為3類：重新定義HTML樣式、鏈接狀態(tài)樣式、自定義樣式。1.重新定義HTML樣式為設計師重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用于統(tǒng)一網(wǎng)頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hr{border:1pxdotted#333333}2.鏈接狀態(tài)樣式為設計師對鏈接不同狀態(tài)設定特殊樣式，影響被使用本樣

8、式區(qū)域中的鏈接。該樣式寫法有2種：a.nav:lin