前端開發(fā)規(guī)范
一歉糜、通用規(guī)范
- 1吧寺、TAB鍵用兩個(gè)空格代替
- 2、CSS樣式屬性或者JAVASCRIPT代碼后統(tǒng)一不加“所禀；”蛹屿。
- 3屁奏、文件內(nèi)容編碼均統(tǒng)一為UTF-8。
二错负、JavaScript書寫規(guī)范
- 1坟瓢、命名規(guī)范
文件名、文件夾名
全部小寫犹撒，多單詞的使用中橫線分隔
如：aaa-bbb折联、ccc-ddd
標(biāo)簽名
全部小寫，多單詞的使用中橫線分隔
如：aaa-bbb识颊、ccc-ddd
常量名
全部大寫并單詞間用下劃線分隔
如：CSS_BTN_CLOSE诚镰、TXT_LOADING
對(duì)象的屬性或方法名
小駝峰式（little camel-case）
如：init、bindEvent祥款、updatePosition
類名（構(gòu)造器）
駝峰式
如：Current清笨、DefaultConfig
函數(shù)名
小駝峰式
如：current()、defaultConfig()
變量名
小駝峰式
如：current刃跛、defaultConfig
私有變量名抠艾、私有函數(shù)
小駝峰式但需要用_開頭
如：_current、_defaultConfig桨昙、_private()
2检号、使用嚴(yán)格的條件判斷符腌歉。用===代替==，用!==代替!=谨敛，避免掉入==造成的陷阱究履，在條件判斷時(shí)，這樣的一些值表示false脸狸。
3最仑、其他的遵循esLint的規(guī)則就行了
三、實(shí)際項(xiàng)目開發(fā)簡介
- 1炊甲、目錄結(jié)構(gòu)
- 1） api --- 接口模塊目錄
- 2） base --- 基礎(chǔ)組件目錄
- 3） common --- 公共模塊目錄泥彤，主要存放公用圖片，公共方法卿啡、類吟吝、工具包，以及公共樣式颈娜、全局樣式
- 4） page --- 頁面模塊目錄剑逃，主要以頁面為單位放置
- 5） router --- 路由模塊目錄（小程序暫時(shí)沒有）
- 2、文件結(jié)構(gòu)
- 1）api文件夾
- a官辽、 接口請(qǐng)求統(tǒng)一使用axios（小程序則直接引入已封裝的http工具類）
- b蛹磺、 文件按后端接口模塊創(chuàng)建 es: 接口url為 '.../api/info/get-user'，所以api目錄下就需要?jiǎng)?chuàng)建一個(gè)info.js的文件for后端的info模塊
- c同仆、 當(dāng)涉及到公共參數(shù)之類的萤捆，統(tǒng)一寫入 api/config.js 文件中，通過模塊引入的方式引用公共參數(shù)
- 2）base文件夾和page文件夾
<!--文件命名規(guī)范請(qǐng)使用 "-" 隔開的寫法命名俗批，即 "demo-page" -->
<template>
<!--模版的第一個(gè)class定義為文件名俗或，且其他class不用駝峰命名法，皆用 "aaa-bbb" 定義 例如："example-wrapper"-->
<!--模版內(nèi)部盡量不要出現(xiàn)定義style屬性岁忘，除非你給我個(gè)理由Ｐ廖俊！臭觉！-->
<!--如果使用組件昆雀，標(biāo)簽也不要使用駝峰，同樣通過 "-" 隔開蝠筑， 例如 <aaa-bbb></aaa-bbb>-->
<div class="demo">
<div class="example-wrapper"></div>
</div>
</template>
<script type="text/ecmascript-6">
/**
* 重點(diǎn)Ｄ臁！Ｊ惨摇Ｍ旆狻！
* 常量全部定義在外面臣镣，主體函數(shù)引用
* 主體函數(shù)不要涉及到常量的定義
* 用 "AAA_BBB" 定義常量
* 例如: const DATA_TYPE = 'xxxxxx'
*/
export default {
/**
* 主體內(nèi)部排序規(guī)則８ㄔ浮Ｖ橇痢！
* 1点待、props
* 2阔蛉、data
* 3、生命周期函數(shù) (包括其他函數(shù))
* 4癞埠、methods
* 5状原、watcher
* 6、components
*/
/**
* components 內(nèi)部寫法示例
* components: {
* AaaBbb,
* BbbCcc
* }
*/
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
/**
* 樣式寫法Ｃ缱佟５咔！
* 層級(jí)的嵌套盡量跟template的層級(jí)嵌套一樣
* 不要出現(xiàn)直接定義標(biāo)簽樣式的情況通铲，例如直接定義 div p span img 的樣式毕莱，盡量使用類去寫樣式
*/
</style>
- 3）common文件夾，主要存放公用圖片颅夺，公共方法朋截、類、工具包吧黄，以及公共樣式质和、全局樣式
- 4）router 文件夾
示例寫法：
// const Login = () => import('page/login/login') => 示例寫法
- 5）小程序page文件夾和base文件夾寫法基本跟vue寫法相似
主要不同的地方 –>
/**
* 主體內(nèi)部排序規(guī)則！Ｖ勺帧！
* 1厦酬、props
* 2胆描、data
* 3、生命周期函數(shù) (包括其他函數(shù))
* 4仗阅、methods
* 5昌讲、watch
* 6、components
* 7减噪、config
*/
/**
* components 內(nèi)部寫法示例
* components = {
* ‘a(chǎn)aa-bbb’: AaaBbb,
* ‘bbb-ccc’: BbbCcc
* }
*/
四短绸、git版本控制規(guī)則
- 1、開發(fā)階段
每個(gè)人開發(fā)各大板塊都新建一個(gè)屬于自己的分支進(jìn)行開發(fā)筹裕，當(dāng)中間插入某些跟當(dāng)前分支無關(guān)的板塊時(shí)醋闭，從master新建一個(gè)分支出來開發(fā)插入的板塊。
- 2朝卒、發(fā)布測試階段
將每個(gè)人的代碼合并到releasing分支证逻，解決完所有沖突后，合并到released分支抗斤，部署到測試環(huán)境或發(fā)布測試版小程序
- 3囚企、發(fā)布生產(chǎn)階段
將master主分支與released分支進(jìn)行合并丈咐，部署到生產(chǎn)服務(wù)器。
/**
* 有補(bǔ)充的可以自己寫進(jìn)來或者自己覺得比較合理的也可以提出來
* 畢竟我們要統(tǒng)一一套屬于自己團(tuán)隊(duì)的規(guī)范龙宏。
**/
