React 前端开发规范（执行版）
一、命名規范
1.??變量
命名方法：小駝峰式命名法，首字母小寫。studentInfo、userInfo
命名建議：使用英文單詞組合，語義清晰
忌：var a=0;var nihao=true;
注明：無法用英文詮釋的單詞可使用首拼，例：var hkb={};//戶口本
2.??常量
命名方法：全部大寫，下劃線分隔
命名規范：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞
例：var MAX_COUNT=10;
3.??函數
命名方法：小駝峰式命名法，首字母小寫。isStudent、getUserInfo
命名建議：前綴最好為動詞
????
4.??構造函數
說明：構造函數也屬于函數的一種，只不過采用new 運算符創建對象
命名方法：大駝峰式命名法，首字母大寫。
例：function Student(name){
?this.name = name;
}
var st = new Student('tom');
5.??構造函數成員
說明：公共屬性和方法：跟變量和函數的命名一樣
二、注釋規范
1.??單行注釋
說明：單行注釋以兩個斜線開始，以行尾結束
?注釋位置：1、代碼上方 ?2、代碼右方
?例如：
?// 調用了一個函數
setTitle();
var maxCount = 10; // 設置最大量
2. ?多行注釋
/*
* 代碼執行到這里后會調用setTitle()函數
* setTitle()：設置title的值
*/
3. ?函數注釋
/** 開始，注此處兩個星
* 以星號開頭，緊跟一個空格，第一行為函數說明
* @param {類型}?參數 單獨類型的參數
* @param {[類型|類型|類型]}?參數 多種類型的參數
* @param {類型} [可選參數] 參數?可選參數用[]包起來
* @return {類型} 說明
?@author 作者 創建時間 修改時間（短日期）改別人代碼要留名
* @example 舉例（如果需要）
*/
常用類型 Array、Number、Int、Float、Boolean、Object、Null、Undefined、String、Void
例：
/**
* 獲取樹組件的數據
* @param {Int} ?id
* @return {Array} 返回此id下的數組
* @author jialong2018/5/5
* @example 例
* var list=getTreeListItemDataForId (23);
*/
getTreeListItemDataForId (id){
return [];
}
// 無參數無返回值的函數在函數上方書寫單行注釋
setTitle();
4. ?未完成注釋
// TODO
三、文件信息規范
1.??作者信息
<!--
by: longjia 2018/5/5?
name: 商圈信息維護頁面
notes: 頁面說明
-->
2.??結構
<!--
by: longjia 2018/5/5?
name: 商圈信息維護頁面
notes: 頁面說明
-->
class businessInforMaintain extends React.Component {
constructor(props, context) {
??????super(props, context);
??????this.state = {?}
方法
render() {
return ( )
????}
}
export default businessInforMaintain
3.??模板規范
結構清晰、適當書寫注釋、禁止直接使用p、h、span標簽，可添加class使用。
4.??style樣式規范
a)??class采用駝峰命名，命名具有語義化（同變量命名規則）??
b)??樣式要有層級隸屬關系，層次結構清晰?
c)??適當添加注釋
禁忌：
a)??沒有層級結構，平鋪直敘
b)??使用屬性[ src=xxx ] 選擇器，以及:nth選擇器（:first-child、:last-child除外）
c)??非語義化的命名方式
d)??直接使用 p{ } \ a{} \ h{} div{} 的元素選擇器
四、路由&組件規范
1.??router.js
a)?
import??shopFeature ?from ?'./routes/systemDataConfig/shopFeature';
<Route
path="systemDataConfig/shopFeature/" component={ shopFeature } />
2.??src\services\test.js
{
????????"menuName": "系統數據配置",
????????"forwardUrl": "/systemDataConfig",
????????"id": "113",
????????"children": [
??????????{
????????????"menuName": "店面類型維護",
????????????"forwardUrl": "/systemDataConfig/shopTypeMaintain/",
????????????"id": "115"
??????????},
??????????{
????????????"menuName": "商圈信息維護",
????????????"forwardUrl": "/businessInforMaintain/businessInforMaintain/",
????????????"id": "115"
??????????}
????????]
??????},
五、項目規范
1.??接口表
a)??存放位置
src\services\interface.js
b)??內部規范
import url from './website';
level:{
lenovoshoplevels:url.lenovoStoreL+'/lenovoshoplevels'?//店面級別
??},;//接口對象
c)??接口對象規范
1.???保持和頁面同樣的層級結構（文件的名稱）
2.???每個接口都需要帶有注釋
七、開發工具（Atom）常用插件
n?Atom Beautify?代碼格式化工具
n?docblockr 文檔化注釋
n?simplified-chinese-menu 簡體中文語言包
n?platformio-ide-terminal 終端工具
n?atom-ternjs ??js,nodejs,es6補全，高度定制化
n?autoclose-html ?閉合html標簽
n?autoprefixer css瀏覽器兼容自動補全
n?autocomplete-paths ?填寫路徑的時候有提示
n?file-icons file文件icons圖標，文件圖標
n?minimap 代碼縮略圖
n?color-picker 取色器
總結
以上是生活随笔為你收集整理的React 前端开发规范（执行版）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【VSCode PlatformIO】开
- 下一篇： 前端开发规范参考