小程序開發語言規範

小程序目錄規範

組件文件

所有組件相關文件統一放在components目錄下。

圖片文件

項目圖片文件放置於根目錄的image文件夾下，組件獨有的圖片放在當前組件image目錄下

模型文件

模型文件主要用於編寫各類業務模型。項目模型文件放置於根目錄的models文件夾下，組件相關模型放置於components目錄下的models文件夾中。

WXML規範

1. WXML規範

wxml標籤可以單獨出現的情況，儘量單獨出現，如

<input />

2. 註釋規範

除組件外的其他塊級元素，均需註釋出其功能，並在其上下空出一行與其他代碼進行區分。

CSS規範

1. CSS規範

採用flex進行佈局，禁止使用float以及vertical-align。
單位採用vw跟vh做到兼容不同設備。

JS規範

1. JS規範

1. 變量名以及函數名統一採用駝峯命名法；
2. 常量需用const 聲明；
3. 採用ES6 關鍵字let定義變量，儘量不使用var；
4. 刪除js文件中未用到的生命週期函數，保持代碼的整潔。
5. 點擊事件函數命名方式爲 on + 事件名 或者業務名。
6. 每個函數之間用一個空行分離結構。

javascript語言規範（補充）

約定JavaScript使用ES6標準開發

關鍵字

任何時候，避免使用語言保留關鍵字命名。

變量聲明

使用let代替var聲明變量，

 let loadding = -1;
 loadding = 0;

使用const聲明常量，常量名要求大寫，多個詞之間以下劃線_連接。

 const { HOST, GET_URL } = require("../../utils/api.js");

js允許一個聲明可以有多個變量。我們約定，一個聲明只有一個變量。

//推薦寫法
let a = 0; 
let b = 1;
let c = 2;
//不推薦寫法
let a = 0, b = 1, c = 2;

字符串

字符串統一使用單引號’’，不使用雙引號""

 let title = '標題標題標題標題標題標題標題';

字符串需要換行或由代碼生成的字符串時使用模板字符串 ``

//推薦寫法
// 字符串換行
let content = `文本文本文本文本文本文本文本文本文本`;
  
// 代碼拼接生成字符串
let editor = '編輯內容';
let text = `本文本文本文本文本文${editor}`; 
//不推薦寫法
// 字符串換行,使用 \n
let content = '文本文本文本文本文本文本文本文本文本、 \n 文本文本文本文本文本 \n文本文本文本。';
  
// 代碼拼接生成字符串
let editor = '編輯內容';
let text = '本文本文本文本文本文' + editor; 

標題函數

使用箭頭函數。箭頭函數不僅簡潔，還可以保留this指向

 [1,2,3].map((item, index) => {
   let res = item + index;
   return res + 1;
 });

函數只有一個參數時，參數的()省略:

let show = a => {
    alert(a*2);
 }

函數體只有一個return語句時，函數體的{}省略：

 let show = (a,b) => a+b;

數組

使用字面量創建數組

 let arr = [];

使用新方法forEach，map，filter，reduce處理數組數據，代碼書寫更簡潔

//推薦寫法
// 取出數組裏的偶數
let arr = [1,2,3,4,5,6,7,8];
let result = arr.filter(item=>item%2===0)
// 輸出：[2, 4, 6, 8]
//不推薦寫法
// 取出數組裏的偶數
let arr = [1,2,3,4,5,6,7,8];
let result = [];
for(let i=0; i<arr.length; i++) {
  let item = arr[i];
  if(item%2===0) {
      result.push(item)
  }
}
// 輸出：[2, 4, 6, 8]

this

用到this轉換的地方，統一使用that

let that = this;