項目開發規範說明

前言

目前公司進入了聯合開發，不再是以前一個人單槍匹馬的闖蕩，有team的感覺就是好，但是團隊一起，也很煩惱，各種規範、環境、開發工具等等，需要統一才行，俗話說：工慾善其事必先利其器，先說斷，後不亂。

應用（項目）命名

• 文件夾命名
  最好用一個單詞描述

關鍵詞	備註
常用項目命名	trip（差旅）、ims（通信）、oas（辦公）、react、vue、prj（項目）、test（測試）、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下拉框
jquery-swiper	jquery輪播圖

- 中間用-或者_連接爲了方便歸類、一目瞭然

關鍵詞	備註
node_models	項目開發的依賴（libs庫）
gulp-cli	gulp爲栗子

文件命名

• 最好用一個單詞描述
  以下變量名可以加css、js、html，例如index.html、index.js、index.css

常用組件命名

關鍵詞	備註
index
message
menu
page	css 類
slider	滑塊
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	分享給社區
wxpay-pay	微信支付
alipay-pay	支付寶支付
user-integral	用戶積分
game-page	遊戲頁面
docs-page	文檔頁面

- 中間用-或者_連接爲了方便歸類、一目瞭然，在目前做的移動端：

關鍵詞	備註
mobile-advertisement	移動廣告
mobile-social	移動社交
mobile-bussiness	移動電子商務
mobile-game	手機遊戲
mobile-tv	手機電視
mobile-reading	移動電子閱讀
mobile-search	手機搜索
mobile-pay	移動支付
mobile-share	手機內容共享

關於以上的項目都可以用 “名詞” + “動詞” 命名，達到見詞知意

html佈局命名

一般都是根據項目的特性或者市面上大家都統一的方式做。

關鍵詞	容器	備註
外套	wrap，container
標題	title，subtitle
頭部	header，head，nav，sub-nav，menu，sub-menu，branding
主要內容	main，section，article，aside
左側	main-left，side-bar-left
右側	main-right，side-bar-right
內容	content，content-item，content-lists，card
底部	footer，partner（合作伙伴），joinu，site-info，copyright，friends

總結常用的

• 導航

  nav，nav-event，nav-style，nav-item，nav-link

• 內容

  title，box，warp，xx-item，item-title，item-link，item-image

• 底部

  footer-time，footer-box，footer-item，copyright，friends-link

js變量命名

• 全局變量、基礎類型和引用數據類型
  全局變量以下劃線開頭，例如：

關鍵詞	備註
_list	列表
_approList	審批列表
_userList	用戶列表
_stop	停止
_chkUser	檢查用戶
…

- 基礎類型

關鍵詞	備註
字符串	var count=”“
布爾類型	var status=false
數字類型	var total=12

在js裏面如果，不確定的類型也可以用null，因爲js會隱式轉換

• 引用數據類型

關鍵詞	備註
數組	var barArr=[],
對象	var barObj={},
函數	var submitFn=function(){}

ps：儘量不要用語言保留的關鍵字命名，例如：default、class、improt、export、module等等，用可讀的同義詞代替。

例如：

  var obj = {class: ''} //不好的
  var obj = {klass: ''} //一般
  var obj = {type: ''} //好的

• 函數用小駝峯形式（動詞+名詞），例如：getList()

關鍵詞	備註
sign()	登錄
reg()	註冊
cancel()	取消
getList()	獲取列表
getTotal()	獲取總數
keySearch()	關鍵字搜索
submitForm()	提交表單
clearContent()	清楚內容
uploadImg()	上傳圖片

- 構造函數和類使用大駝峯（動詞+名詞），例如：UserList()

  //不好的
  function user(options) {}
  var us = new user({})

  //好的
  function User(options) {}
  var us = new User({})

• 儘量不要使用尾隨或前導下劃線

  //不好的
  var _variable_ = ''
  var _variable = ''
  var variable_ = ''

  //好的
  var variable = ''

我們公司規定了，全局變量使用前導下劃線，所以一般根據公司規定來，一般不建議使用前導下劃線

• 在項目中存在jQuery的時候，一般會在變量前面加一一個“$”，來表明這個是jQuery對象，和原生js寫的進行區別

var $variable = ”

2.5. css命名

關鍵詞	備註
公共的	common.css
其實和common差不多	base.css
動畫	animation.css
皮膚	skin.css
文字	font.css
主題	themes.css
打印樣式	print.css
顏色	color.css

2.5. 圖片命名

圖片命名分成幾類，例如：
1、一般的圖片可根據分類和表現的內容劃分：

normal_loading.jpg/png //默認懶加載時的圖片

2、小圖標劃分：

home_icon.jpg/png //首頁圖標
tags_icon.jpg/png //標籤圖標

3、大小劃分

[email protected]/png //商品圖片大小

本公司的前端的應用的目錄結構，其實後端的目錄結構先差無幾

• 項目命名爲 trip

  trip/
  ├─ dist
  ├─ node_modules
  ├─ src
  ├─ .babelrc
  ├─ .eslintrc
  ├─ .project
  ├─ manifest.json
  ├─ gulpfile.js
  ├─ webpack.config.js
  ├─ package.json
  ├─ package-lock.json
  └─ xtend@4.0.1

2.6. 開發工具

推薦使用：VSCode
- VSCode下載地址
- 訪問密碼：6PphIw