一、命名規範

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.   每個介面都需要帶有註釋

七、專案地址

專案GIT地址：http://gitlab.xpaas.lenovo.com/DLX/pcsd-bp-web-admin.git

專案測試地址：http://10.120.112.94

八、開發工具（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 取色器