項目命名規範（二）

項目命名規範

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, navigationbar_showtime_icon@2x.png，tabbar_categories_icon

 

原文連接：https://segmentfault.com/a/1190000008777858#articleHeader0