前端命名的一點建議

時間 2019-12-08

標籤前端命名一點 1點建議简体版

原文原文鏈接

1.前言

以前因爲都是獨立開發因此對前端命名不是很看重，命名過於隨意，致使後期同事維護滿臉怨言，不是不想好好命名無奈英語實在不好，多數中英文混搭命名，現整理一些常見命名的字段貼桌面供參考。css

（一）常見單詞詞彙

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：leftright center
登陸條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情連接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標籤頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態：status
投票：vote
合做夥伴：partner

(二)css註釋的寫法:

/內容區/ html

Html註釋的寫法：<!--header頭部-- >

(三)id的命名:

(1)頁面結構

容器:container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：leftright center

(2)導航

導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsideba
菜單：menu
子菜單：submenu
標題: title
摘要: summary

(3)功能

標誌：logo
廣告：banner
登錄：login
登陸條：loginbar
註冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合做夥伴：partner
友情連接：link
版權：copyright

class的命名:

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red {color: red; }
.f60 { color: #f60;}
.ff8600 { color: #ff8600; }

(2)字體大小,直接使用’font+字體大小’做爲名稱,如

.font12px{ font-size: 12px; }
.font9pt{font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left {float:left; }
.bottom {float:bottom; }

常見class關鍵詞：

佈局類：header, footer, container, main, content, aside, page, section
包裹類：wrap, inner
區塊類：region, block, box
結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表類：list, item, field
主次類：primary, secondary, sub, minor
大小類：s, m, l, xl, large, small
狀態類：active, current, checked, hover, fail, success, warn, error, on, off
導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星級類：rate, star
分割類：group, seperate, divider
等分類：full, half, third, quarter
表格類：table, tr, td, cell, row
圖片類：img, thumbnail, original, album, gallery
語言類：cn, en
論壇類：forum, bbs, topic, post
方向類：up, down, left, right
其餘語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

(4)標題欄樣式,使用’類別+功能’的方式命名,如

.barnews { }
.barproduct { }
主要的 master.css
模塊module.css
基本共用base.css
佈局，版面layout.css
主題themes.css
專欄columns.css
文字font.css
表單forms.css

目錄結構和文件命名規則

scss文件最好根據不一樣頁面分爲common.scss和當前頁面的scss文件，並將相同複用部分放入common.scss中前端

通用規範git

命名以小寫英文單詞命名，多個單詞命名時如下劃線分隔，儘可能不用縮寫（除非是約定俗成或通用的縮寫）github

項目命名npm

所有采用小寫方式，如下劃線分隔。例：my_project_name設計模式

CSS, SCSS文件命名瀏覽器

參照項目命名規則。例：retina_sprites.scssbash

HTML文件命名app

參照項目命名規則。例：error_report.html

二，js命名規範

變量命名

命名方法：小駝峯式命名

命名規範：前綴應當是名詞。(函數的名字前綴爲動詞，以此區分變量和函數)

命名建議：儘可能在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示爲字符串類型。

示例

// 好的命名方式 var minCount = 10;var tableTitle = 'tableTitle';
// 很差的命名方式 var setCount = 'setCount';var getTitle = 1111;
複製代碼

函數命名

命名方法：小駝峯式命名法

命名規範：前綴應當爲動詞

命名建議：可以使用常見動詞+函數所要表達含義的的名詞組成（這個須要英語好，英語很差的同窗用百度翻譯吧）

js常量命名

命名方法：名稱所有大寫

命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞

示例

var MIN_COUNT = 10;var URL = 'http://www.baidu.com';
複製代碼

三，常見文件夾命名

src，source 源代碼，用src居多
test，tests 測試文件，也常常用__test__，facebook的測試框架jest默認的測試文件目錄就是__test__
docs 文檔
lib 庫文件，library的縮寫
dist 用來放打包編譯後的文件，應該是distribution的縮寫
build 構建腳本
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 核心文件