一、命名規(guī)范

1.??變量

命名方法：小駝峰式命名法，首字母小寫。studentInfo、userInfo

命名建議：使用英文單詞組合，語義清晰

忌：var a=0;var nihao=true;

注明：無法用英文詮釋的單詞可使用首拼，例：var hkb={};//戶口本

2.??常量

命名方法：全部大寫，下劃線分隔

命名規(guī)范：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞

例：var MAX_COUNT=10;

3.??函數(shù)

命名方法：小駝峰式命名法，首字母小寫。isStudent、getUserInfo

命名建議：前綴最好為動詞

????

4.??構(gòu)造函數(shù)

說明：構(gòu)造函數(shù)也屬于函數(shù)的一種，只不過采用new 運算符創(chuàng)建對象

命名方法：大駝峰式命名法，首字母大寫。

例：function Student(name){

?this.name = name;

}

var st = new Student('tom');

5.??構(gòu)造函數(shù)成員

說明：公共屬性和方法：跟變量和函數(shù)的命名一樣

二、注釋規(guī)范

1.??單行注釋

說明：單行注釋以兩個斜線開始，以行尾結(jié)束

?注釋位置：1、代碼上方 ?2、代碼右方

?例如：

?// 調(diào)用了一個函數(shù)

setTitle();

var maxCount = 10; // 設(shè)置最大量

2. ?多行注釋

/*

* 代碼執(zhí)行到這里后會調(diào)用setTitle()函數(shù)

* setTitle()：設(shè)置title的值

*/

3. ?函數(shù)注釋

/** 開始，注此處兩個星

* 以星號開頭，緊跟一個空格，第一行為函數(shù)說明

* @param {類型}?參數(shù) 單獨類型的參數(shù)

* @param {[類型|類型|類型]}?參數(shù) 多種類型的參數(shù)

* @param {類型} [可選參數(shù)] 參數(shù)?可選參數(shù)用[]包起來

* @return {類型} 說明

?@author 作者 創(chuàng)建時間 修改時間（短日期）改別人代碼要留名

* @example 舉例（如果需要）

*/

常用類型 Array、Number、Int、Float、Boolean、Object、Null、Undefined、String、Void

例：

/**

* 獲取樹組件的數(shù)據(jù)

* @param {Int} ?id

* @return {Array} 返回此id下的數(shù)組

* @author jialong2018/5/5

* @example 例

* var list=getTreeListItemDataForId (23);

*/

getTreeListItemDataForId (id){

return [];

}

// 無參數(shù)無返回值的函數(shù)在函數(shù)上方書寫單行注釋

setTitle();

4. ?未完成注釋

// TODO

三、文件信息規(guī)范

1.??作者信息

<!--

by: longjia 2018/5/5?

name: 商圈信息維護(hù)頁面

notes: 頁面說明

-->

2.??結(jié)構(gòu)

<!--

by: longjia 2018/5/5?

name: 商圈信息維護(hù)頁面

notes: 頁面說明

-->

class businessInforMaintain extends React.Component {

constructor(props, context) {

??????super(props, context);

??????this.state = {?}

方法

render() {

return ( )

????}

}

export default businessInforMaintain

3.??模板規(guī)范

結(jié)構(gòu)清晰、適當(dāng)書寫注釋、禁止直接使用p、h、span標(biāo)簽，可添加class使用。

4.??style樣式規(guī)范

a)??class采用駝峰命名，命名具有語義化（同變量命名規(guī)則）??

b)??樣式要有層級隸屬關(guān)系，層次結(jié)構(gòu)清晰?

c)??適當(dāng)添加注釋

禁忌：

a)??沒有層級結(jié)構(gòu)，平鋪直敘

b)??使用屬性[ src=xxx ] 選擇器，以及:nth選擇器（:first-child、:last-child除外）

c)??非語義化的命名方式

d)??直接使用 p{ } \ a{} \ h{} div{} 的元素選擇器

四、路由&組件規(guī)范

1.??router.js

a)?

import??shopFeature ?from ?'./routes/systemDataConfig/shopFeature';

<Route

path="systemDataConfig/shopFeature/" component={ shopFeature } />

2.??src\services\test.js

{

????????"menuName": "系統(tǒng)數(shù)據(jù)配置",

????????"forwardUrl": "/systemDataConfig",

????????"id": "113",

????????"children": [

??????????{

????????????"menuName": "店面類型維護(hù)",

????????????"forwardUrl": "/systemDataConfig/shopTypeMaintain/",

????????????"id": "115"

??????????},

??????????{

????????????"menuName": "商圈信息維護(hù)",

????????????"forwardUrl": "/businessInforMaintain/businessInforMaintain/",

????????????"id": "115"

??????????}

????????]

??????},

五、項目規(guī)范

1.??接口表

a)??存放位置

src\services\interface.js

b)??內(nèi)部規(guī)范

import url from './website';

level:{

lenovoshoplevels:url.lenovoStoreL+'/lenovoshoplevels'?//店面級別

??},;//接口對象

c)??接口對象規(guī)范

1.???保持和頁面同樣的層級結(jié)構(gòu)（文件的名稱）

2.???每個接口都需要帶有注釋

七、開發(fā)工具（Atom）常用插件

n?Atom Beautify?代碼格式化工具

n?docblockr 文檔化注釋

n?simplified-chinese-menu 簡體中文語言包

n?platformio-ide-terminal 終端工具

n?atom-ternjs ??js,nodejs,es6補全，高度定制化

n?autoclose-html ?閉合html標(biāo)簽

n?autoprefixer css瀏覽器兼容自動補全

n?autocomplete-paths ?填寫路徑的時候有提示

n?file-icons file文件icons圖標(biāo)，文件圖標(biāo)

n?minimap 代碼縮略圖

n?color-picker 取色器

總結(jié)

以上是生活随笔為你收集整理的React 前端开发规范（执行版）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。