項目命名規範（二）
項目命名規範
1.文件夾命名
1)、最好用一個單詞描述
| 常用項目命名 | omi、element、master、project、test、vue、iview |
|---|---|
| 二級目錄 | build、static、config、src、examples、base、common、issues、assert |
| 三級目錄 | libs、models、plugins、skins、images、css、js |
2)、如果一個單詞描述不了，用2個詞（名詞加動詞）
color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiper
3)、中間用-或者_連接為了方便歸類、一目了然
node_models、async-demo、array-union、array-differ、babel-each
2.文件命名
1)、最好用一個單詞描述
css、js、html，例如index.html、index.js、index.css
| 常用組件命名 | index、message、menu、slider（滑塊）、page、progress（進度條）、tooltip（提示）、tree、upload、time、button、checkbox、dialog、cascader（三級聯動） |
|---|---|
| 常用文件命名 |
index、shopping（購物）、 share（分享）、integral（積分）、advertisement（廣告）、pay（支付）、community（社區）、game、docs、bussiness |
2)如果一個單詞描述不了，用2個詞（名詞加動詞）
share-to-friends，share-to-community，weex-pay，alipay-pay，user-integral，game-page，docs-page等等
3)中間用-或者_連接為了方便歸類、一目了然
在目前做的pc端和移動端，簡單的對他們分個類：
-
移動廣告(mobile-advertisement)
-
移動社交(mobile-social)
-
移動電子商務(mobile-bussiness)
-
手機遊戲(mobile-game)
-
手機電視(mobile-tv)
-
移動電子閱讀(mobile-reading)
-
手機搜索(mobile-search)
-
移動支付(mobile-pay)
-
手機內容共享(mobile-share)
關於以上的項目都可以用名詞+需要的動詞命名，達到見詞知意
3.html布局命名
可以參考DIV+CSS規範命名大全集合但是我覺得寫的並不是很好，很全面。因為往往比較糾結的是每一個大布局中小布局的命名。
| 外套 | wrap #container |
|---|---|
| 頭部 | header #head, #header，#nav，#sub-nav，#menu， #sub-menu，#branding |
| 主要內容 | main bussiness-title 、bussiness-logo、bussiness-search、bussiness-search-results |
| 左側 | main-left #side-bar, #side-bar-a, #side-bar-b |
| 右側 | main-right #side-bar, #side-bar-a, #side-bar-b |
| 內容 | content radio-click、radio-heightlight、radio-active、input-seach-off、input-search-on |
| 底部 | footer #service, #regsiter,#partner（合作夥伴）,#joinus, #site-info |
總結
1)一般頭部有nav、nav-event、nav-style、nav-item、nav-link。
2)內容：xx-title、xx-box、xx-warp、xx-item、xx-item-title、xx-item-link、xx-item-image
3)底部：footer-time、footer-box、footer-item、footer-item-link、footer-address。總之xx-wrap，xx-box，xx-item、xx-link、xx-title、xx-total肯定會滿足你80%的需求
4.js變量命名
1)基礎類型和引用數據類型
-
基礎類型
-
字符串var s_count=”“,
-
布爾類型var b_status=false,
-
數字類型var n_total=12。
-
引用數據類型
-
數組var ar_bar=[],
-
對象var o_bar={},
-
函數var f_submit=function(){}
2)不要用關鍵字命名default、class、private
3)用可讀的同義詞代替保留詞。
1 // bad
2
3 var superman = {
4
5 class: ‘alien‘
6
7 };
8
9 // bad
10
11 var superman = {
12
13 klass: ‘alien‘
14
15 };
16
17 // good
18
19 var superman = {
20
21 type: ‘alien‘
22
23 };
4)函數用駝峰形式（動詞+名詞）
login(),logout(),expandList(),getTotal(),keySearch(),submitForm(),cancel(),goMore(),searchAll>(),searchCurrent().clearContent().uploadImage().searchResult()這些都是常用事件，可以清晰知道每一項的意義。
5)當命名的構造函數和類使用PascalCase。
// bad
function user(options) {
this.name = options.name;
}
var bad = new user({
name: ‘nope‘
});
// good
function User(options) {
this.name = options.name;
}
var good = new User({
name: ‘yup‘
});
6)不要使用尾隨或前導下劃線
// bad
this.__firstName__ = ‘Panda‘;
this.firstName_ = ‘Panda‘;
this._firstName = ‘Panda‘;
// good
this.firstName = ‘Panda‘;
7)前綴jQuery對象變量與$
// bad
var sidebar = $(‘.sidebar‘);
// good
var $sidebar = $(‘.sidebar‘);
// bad
$(‘ul‘, ‘.sidebar‘).hide();
// bad
function setSidebar() {
$(‘.sidebar‘).hide();
// ...stuff...
$(‘.sidebar‘).css({
‘background-color‘: ‘pink‘
});
}
// good
function setSidebar() {
var $sidebar = $(‘.sidebar‘);
$sidebar.hide();
// ...stuff...
$sidebar.css({
‘background-color‘: ‘pink‘
});
}
// bad
$(‘.sidebar‘).find(‘ul‘).hide();
// good
$(‘.sidebar ul‘).hide();
// good
$(‘.sidebar > ul‘).hide();
// good
$sidebar.find(‘ul‘).hide();
5.css命名
| 公共的 | common.css |
|---|---|
| 其實和common差不多 | base.css |
| 動畫 | animation.css |
| 皮膚 | skin.css |
| 文字 | font.css |
| 主題 | themes.css |
| 打印樣式 | print.css |
| 顏色 | color.css |
6.圖片命名
1)第一部分是圖片的邏輯歸屬分類
2)第二部分是圖片的表現內容
3)第三部分是圖片的內容的類型（有些圖片還會有第四部分，表示圖片表現的狀態。）
4)tabbar_home_icon, [email protected]，tabbar_categories_icon
原文鏈接：https://segmentfault.com/a/1190000008777858#articleHeader0
項目命名規範（二）