如何擺脫專案命名困難的尷尬局面

西安小哥發表於2019-03-03

如何高效的命名你的專案

在做一個專案的時候，我們往往遭遇命名問題的困惑，當看到一些非專業人的程式碼，看到他們凌亂的碼法，有時候真的苦不堪言。深刻知道一個良好的命名規範的重要性，同時在專案中也會遇到一些命名的瓶頸。所以有必要寫一篇關於常見命名的方式。以下是通過3年的程式設計經驗，以及參考網上知名的開源專案總結的一點經驗。希望共勉

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.如果一個單詞描述不了，名詞加動詞

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.如果一個單詞描述不了，名詞加動詞

share-to-friends，share-to-community，weex-pay，alipay-pay，user-integral，
game-page，docs-page等等反正就是自我想象。

3.中間用-或者_連線為了方便歸類、一目瞭然

在目前做的pc端和移動端，簡單的對他們分個類：

1.移動廣告(mobile-advertisement)

2.移動社交(mobile-social)

3.移動電子商務(mobile-bussiness)

4.手機遊戲(mobile-game)

5.手機電視(mobile-tv)

6.移動電子閱讀(mobile-reading)

7.手機搜尋(mobile-search)

8.移動支付(mobile-pay)

9.手機內容共享(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.用可讀的同義詞代替保留詞。

// bad
var superman = {
  class: 'alien'
};

// bad
var superman = {
  klass: 'alien'
};

// good
var superman = {
  type: 'alien'
};複製程式碼

4.函式用駝峰形式（動詞+名詞）

login(),logout(),expandList(),getTotal(),keySearch(),submitForm(),cancel(),goMore(),searchAll(),searchCurrent().clearContent().uploadImage().searchResult()這些都是常用事件，可以清晰知道每一項的意義。

es5的語法規範

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';複製程式碼

6.字首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();複製程式碼