頁面的命名規則
- 統一用翻譯的英文命名（推薦）
- 統一用拼音命名（拼音的簡化也可）
- 如果文件名過長，企業要提前約定一份縮寫的規范，如pro—product
例如：
- 首頁—index
- 產品列表—prolist產品詳細頁面—prodetail
- 新聞列表—newslist新聞詳細頁面—newsdetail
- 發展歷史—history
- 關於我們—aboutus
- 聯系我們—linkus，contactus
- 信息反饋—feedback留言—leavewords
熊貓辦公https://www.wode007.com/sites/73654.html
圖片命名規范
圖片的名稱分為頭尾兩部分，用下划線隔開，頭部表示此圖片的大類性質，例如廣告，標志，菜單，按鈕等
- banner：放置在頁面頂部的廣告，裝飾圖案等長方形的圖片
- logo：標志性的圖片
- button：在頁面上位置不固定，並且帶有鏈接的小圖片
- menu：在頁面中某一位置連續出現，性質相同的鏈接欄目的圖片
- pic：裝飾用的圖片
例子：
- banner_sohu.gif, banner_sina.gif
- menu_aboutus.gif,menu_job.gif
- title_news.gif
- logo_police.gif
- pic_people.gif
CSS樣式命名
外套 wrap ------------------用於最外層
頭部 header ----------------用於頭部
主要內容 main ------------用於主體內容（中部）
左側 main-left -------------左側布局
右側 main-right -----------右側布局
導航條 nav -----------------網頁菜單導航條
內容 content ---------------用於網頁中部主體
底部 footer -----------------用於底部
DIV+CSS命名參考表：
| CSS樣式命名 | 說明 |
|---|---|
| 網頁公共命名 | |
| #wrapper | 頁面外圍控制整體布局寬度 |
| #container或#content | 容器,用於最外層 |
| #layout | 布局 |
| #head, #header | 頁頭部分 |
| #foot, #footer | 頁腳部分 |
| #nav | 主導航 |
| #subnav | 二級導航 |
| #menu | 菜單 |
| #submenu | 子菜單 |
| #sideBar | 側欄 |
| #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| #main | 頁面主體 |
| #tag | 標簽 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情連接 |
| #title | 標題 |
| #summary | 摘要 |
| #loginbar | 登錄條 |
| #searchInput | 搜索輸入框 |
| #hot | 熱門熱點 |
| #search | 搜索 |
| #search_output | 搜索輸出和搜索結果相似 |
| #searchBar | 搜索條 |
| #search_results | 搜索結果 |
| #copyright | 版權信息 |
| #branding | 商標 |
| #logo | 網站LOGO標志 |
| #siteinfo | 網站信息 |
| #siteinfoLegal | 法律聲明 |
| #siteinfoCredits | 信譽 |
| #joinus | 加入我們 |
| #partner | 合作伙伴 |
| #service | 服務 |
| #regsiter | 注冊 |
| arr/arrow | 箭頭 |
| #guild | 指南 |
| #sitemap | 網站地圖 |
| #list | 列表 |
| #homepage | 首頁 |
| #subpage | 二級頁面子頁面 |
| #tool, #toolbar | 工具條 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜單 |
| #status | 狀態 |
| #scroll | 滾動 |
| .tab | 標簽頁 |
| .left .right .center | 居左、中、右 |
| .news | 新聞 |
| .download | 下載 |
| .banner | 廣告條(頂部廣告條) |
| 電子貿易相關 | |
| .products | 產品 |
| .products_prices | 產品價格 |
| .products_description | 產品描述 |
| .products_review | 產品評論 |
| .editor_review | 編輯評論 |
| .news_release | 最新產品 |
| .publisher | 生產商 |
| .screenshot | 縮略圖 |
| .faqs | 常見問題 |
| .keyword | 關鍵詞 |
| .blog | 博客 |
| .forum | 論壇 |
| CSS文件命名 | 說明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模塊 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主題 |
| columns.css | 專欄 |
| font.css | 文字、字體 |
| forms.css | 表單 |
| mend.css | 補丁 |
| print.css | 打印 |
js函數命名規范
函數命名：統一使用動詞或者動詞+名詞形式 ---- fnInit()
對象方法命名使用fn+對象類名+動詞+名詞形式 fnAnimateDoRun()
某事件響應函數命名方式為fn+觸發事件對象名+事件名或者模塊名 fnDivClick()
附常用的動詞列表：
get 獲取/set 設置, add 增加/remove 刪除
create 創建/destory 移除 start 啟動/stop 停止
open 打開/close 關閉, read 讀取/write 寫入
load 載入/save 保存, create 創建/destroy 銷毀
begin 開始/end 結束, backup 備份/restore 恢復
import 導入/export 導出, split 分割/merge 合並 inject 注入/extract 提取, attach 附着/detach 脫離 bind 綁定/separate 分離, view 查看/browse 瀏覽 edit 編輯/modify 修改, select 選取/mark 標記 copy 復制/paste 粘貼, undo 撤銷/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 減少 play 播放/pause 暫停, launch 啟動/run 運行 compile 編譯/execute 執行, debug 調試/trace 跟蹤 observe 觀察/listen 監聽, build 構建/publish 發布 input 輸入/output 輸出, encode 編碼/decode 解碼 encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮 pack 打包/unpack 解包, parse 解析/emit 生成 connect 連接/disconnect 斷開, send 發送/receive 接收 download 下載/upload 上傳, refresh 刷新/synchronize 同步 update 更新/revert 復原, lock 鎖定/unlock 解鎖 check out 簽出/check in 簽入, submit 提交/commit 交付 push 推/pull 拉, expand 展開/collapse 折疊 begin 起始/end 結束, start 開始/finish 完成 enter 進入/exit 退出, abort 放棄/quit 離開 obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集
常用的文件命名
-
rc，source
源代碼，用src居多 -
test，__tests__
測試文件，也經常用__test__，facebook的測試框架jest默認的測試文件目錄就是__test__ -
docs
文檔 -
lib
庫文件，library的縮寫 -
dist
用來放打包編譯后的文件，應該是distribution的縮寫 -
build，scripts
構建腳本 -
utils，tools，helpers
工具代碼 -
controllers，views，middlewares，models
MVC對應的models，views，controllers，還有中間件middlewares -
router
路由 -
server
用來放服務端代碼 -
adapters
適配器，適配器模式是一種很常用的設計模式 -
legacy
一般用來放兼容歷史版本或兼容舊瀏覽器的代碼 -
config
配置文件 -
benchmarks
benchmarks測試，又叫基准測試或性能測試。用來測試版本的性能變化 -
unit，spec
單元測試，一般在test目錄下 -
e2e
端對端測試，一般在test目錄下 -
assets，vendor
資源，一般用來放圖片或css文件 -
static
靜態資源 -
examples，demo
示例 -
component
組件 -
plugins
插件 -
bin
命令腳本，命令行工具經常會用到 -
common公用的文件
-
packages
很多項目會打包出多個npm包，用來減小體積，一般會用packages來放不同的包 -
misc
雜項，miscellaneous的縮寫 -
core
核心文件