如何擺脫項目命名困難的尷尬局面

如何高效的命名你的項目

在作一個項目的時候,咱們每每遭遇命名問題的困惑,當看到一些非專業人的代碼,看到他們凌亂的碼法,有時候真的苦不堪言。深入知道一個良好的命名規範的重要性,同時在項目中也會遇到一些命名的瓶頸。因此有必要寫一篇關於常見命名的方式。如下是經過3年的編程經驗,以及參考網上知名的開源項目總結的一點經驗。但願共勉javascript

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-swipercss

  • 3.中間用-或者_鏈接爲了方便歸類、一目瞭然

    node_models、async-demo、array-union、array-differ、babel-each。html

2.文件命名

  • 1.最好用一個單詞描述

如下變量名能夠加css、js、html,例如index.html、index.js、index.css。vue

經常使用組件命名 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等等反正就是自我想象。java

  • 3.中間用-或者_鏈接爲了方便歸類、一目瞭然

在目前作的pc端和移動端,簡單的對他們分個類:node

  • 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)

關於以上的項目均可以用名詞+須要的動詞命名,達到見詞知意jquery

3.html佈局命名

能夠參考DIV+CSS規範命名大全集合可是我以爲寫的並非很好,很全面。由於每每比較糾結的是每個大布局中小布局的命名。git

外套 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

總結github

  • 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();

5.css命名

公共的 common.css
其實和common差很少 base.css
動畫 animation.css
皮膚 skin.css
文字 font.css
主題 themes.css
打印樣式 print.css
顏色 color.css

6.圖片命名

  • 一、第一部分是圖片的邏輯歸屬分類
  • 二、第二部分是圖片的表現內容
  • 三、第三部分是圖片的內容的類型(有些圖片還會有第四部分,表示圖片表現的狀態。)
  • 四、tabbar_home_icon, navigationbar_showtime_icon@2x.png,tabbar_categories_icon

 

Paste_Image.png

 

7.分享demo

  • 1.餓了麼部分組織構架

 

Paste_Image.png

 

  • 2.騰訊omi

 

相關文章
相關標籤/搜索