跨平臺RN開發的React規範（ES6）

阿新 • • 發佈：2019-01-15

規範

1.0 基本命名規範

js的class命名規範是駝峰AaBbCc
js的function規範是aaBbCc
js的元件命名規範是aa_bb_cc

1.1 基本型別：直接存取。

字元創
數值
布林型別
null
undefined

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
1.2 複雜型別：通過引用的方式存取。

物件
陣列
函式

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9,9
引用

2.1 對所有的引用型別使用 const ; 不要使用 var 。

為什麼？這確保你無法對引用型別重新賦值，也不會導致出現 bug 或難以理解。
// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
2.2 如果你一定需要可變動的引用，使用 let 替代 var 。

為什麼？因為 let 是塊級作用域，而 var 是函式作用域。
// bad
var count = 1;
if(true){
count += 1;
}

// good, use the let
let count = 1;
if(true){
count += 1;
}
2.3 注意 let 和 const 都是塊級作用域。

{
let a = 1;
const b = 1;
}
console.log(a);//ReferenceError
console.log(b);//ReferenceError
物件

3.1 使用字面值建立物件。

// bad
const item = new Object();

// good
const item = {};
3.2 如果你的程式碼在瀏覽器環境下執行，別使用保留字作為鍵值。但是在ES6模組或伺服器端使用則沒有問題。

// bad
const person = {
default: { name: ‘peter’ },
private: true
}

// good
const person = {
defaults: { name: ‘peter’ },
hidden: true
}
3.3 使用同義字替換需要使用的保留字。

// bad
const person = {
class: ‘info’
}

// bad
const person = {
kclass: ‘info’
}

// good
const person = {
type: ‘info’
}
3.4 建立有動態屬性名的物件時，使用可被計算的屬性名稱。

為什麼？因為這樣讓你在一個地方定義所有的物件屬性。
function getKey(k){
return a key named ${k};
}

// bad
const obj = {
id: 5,
name: ‘peter’
}
obj[getKey[‘enabled’]] = true;

// good
const obj = {
id: 5,
name: ‘peter’,
[getKey[‘enabled’]]: true;
}
3.5 使用物件方法的簡寫。

// bad
const atom = {
value: 1,

  addValue: function(value){
      return atom.value + value;
  }

}

// good
const atom = {
value: 1,

  addValue(value){
      return atom.value + value;
  }

}
3.6 使用物件屬性值的簡寫。

const name = ‘peter’;

// bad
const obj = {
name: name
}

// good
const obj = {
name
}
3.7 在物件屬性宣告前把簡寫的屬性分組。

const name = ‘name’;
const age = ‘age’;

// bad
const obj = {
name,
sex: ‘男’,
age,
height: ‘170’
}

// good
const obj = {
name,
age,
sex: ‘男’,
height: ‘170’
}
陣列

4.1 使用字面值建立陣列。

// bad
const items = new Array();

// good
const items = [];
4.2 向陣列新增元素時使用 Array#push 替代直接賦值。

const names = [];

// bad
names[0] = ‘peter’;

// good
names.push(‘peter’);
4.3 使用拓展運算子 … 複製陣列。

const items = [‘xiaoxin’, ‘xiaoqiang’, ‘xiaowanzi’];

// bad
const itemsCopy = [];
for(let i = 0; i < items.length; i++){
itemsCopy[i] = items[i];
}

// good
const itemsCopy = […items];
解構

5.1 使用解構存取和使用多屬性物件。

為什麼？因為解構能減少臨時引用屬性。
// bad
function getFullName(user){
const fileName = user.firstName;
const lastName = user.lastName;

  return `${firstName} ${lastName}`

}

// good
function getFullName(user){
const { firstName, lastName } = user;

  return `${firstName} ${lastName}`

}

// best
function getFullName({ firstName, lastName }){
return ${firstName} ${lastName}
}
5.2 對陣列使用解構賦值。

cosnt arr = [1,2,3,4];

// bad
const first = arr[0];
const second = arr[1];

//good
const [first, second] = arr;
Strings

6.1 字串使用單引號 ” 。

// bad
const name = “peter”;

// good
const name = ‘peter’;
6.2 字串超過80個位元組使用字串連線號連線。

// bad
const info = ‘American colleges and universities awarded about one million seven hundred thousand bachelor\’s degrees in the school year ending in twenty ten.’;

// good
const info = ‘American colleges and universities awarded about one million seven hundred thousand bachelor\’s ’
+ ‘degrees in the school year ending in twenty ten.’
6.3 程式化生成字串時，使用模板字串替代字串連線。

// bad
function sayHi(name){
return ‘How are you, ’ + name + ‘?’;
}

// good
function sayHi(name){
return How are you ${name}?
}
函式

7.1 使用函式宣告代替函式表示式。

為什麼？因為函式宣告是可命名的，所以他們在呼叫棧中更容易被識別。此外，函式宣告會把整個函式提升，而函式表示式只會把函式的引用變數名提升。
// bad
const foo = function(){
}

// good

function foo(){
}
7.2 函式表示式：

//立即呼叫的函式表示式
(() => {
console.log(‘Welcome to my home!’);
})()
7.3 永遠不要在一個非函式程式碼塊（ if， while 等）中宣告一個函式，把那個函式賦給一個變數。瀏覽器允許你這麼做，但它們的解析表現不一致。

7.4 直接給函式的引數指定預設值，不要使用一個變化的函式引數。

// bad
function handleThings(opts){
opts = opts || {};
}

// still bad
function handleThings(opt){
if(opts === void 0){
opts = {};
}
}

// good
function handleThings(opts = {}){

}
箭頭函式

8.1 當你必須使用函式表示式（或傳遞一個匿名函式）時，使用箭頭函式符號。

為什麼？因為箭頭函式創造了新的 this 執行環境，通常情況下都能滿足你的需求，而且這樣的寫法更為簡潔。
// bad
[1, 2, 3].map(function (x) {
return x * x;
})

// good
[1, 2, 3].map(x => {
return x * x;
})
8.2 如果一個函式適合用一行寫出並且只有一個引數，那就把花括號、圓括號和 return 都省略掉。如果不是，那就不要省略。

// good
[1, 2, 3].map(x => x * x);

// good
[1, 2, 3].map((total, x) => {
return total + x;
})
建構函式

9.1 總是使用 class 。避免直接操作 prototype 。

// bad
function Queue(contents = []){
this._queue = […contents];
}
Queue.prototype.pop = function(){
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}

// good
class Queue {
constructor(contents = []){
this._queue = […contents];
}
pop(){
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
9.2 使用 extends 繼承。

為什麼？因為 extends 是一個內建的原型繼承方法並且不會破壞 instanceof 。
// bad
const inherits = require(‘inherits’);
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}

// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}
9.3 方法可以返回 this 來幫助鏈式呼叫。

// bad
Jedi.prototype.jump = function() {
this.jumping = true;
return true;
};

Jedi.prototype.setHeight = function(height) {
this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
class Jedi {
jump() {
this.jumping = true;
return this;
}

  setHeight(height) {
      this.height = height;
      return this;
  }

}

const luke = new Jedi();

luke.jump().setHeight(20);
9.4 可以寫一個自定義的 toString() 方法，但要確保它能正常執行並且不會引起副作用。

class Jedi {
constructor(options = {}) {
this.name = options.name || ‘no name’;
}

  getName() {
      return this.name;
  }

  toString() {
      return `Jedi - ${this.getName()}`;
  }

}
模組

10.1 總是使用（import / export）而不是其他非標準模組系統。你可以編譯為你喜歡的模組系統。

// bad
const AirbnbStyleGuide = require(‘./AirbnbStyleGuide’);
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from ‘./AirbnbStyleGuide’;
export default AirbnbStyleGuide.es6;

// best
import { es6 } from ‘./AirbnbStyleGuide’;
export default es6;
10.2 不要使用萬用字元 import。

為什麼？這樣能確保你只有一個預設的 export。
// bad
import * as AirbnbStyleGuide from ‘./AirbnbStyleGuide’;

// good
import AirbnbStyleGuide from ‘./AirbnbStyleGuide’;
10.3 不要從 import 中直接 export。

// bad
// filename es6.js
export { es6 as default } from ‘./airbnbStyleGuide’;

// good
// filename es6.js
import { es6 } from ‘./AirbnbStyleGuide’;
export default es6;
屬性

11.1 使用 . 來訪問物件的屬性。

const student = {
name: ‘peter’,
age: 27
}

// bad
const person = student[‘name’];

// good
const person = student.name;
11.2 當通過變數訪問屬性時使用中括號 [].

const student = {
name: ‘peter’,
age: 27
}

function getName(name){
return student[name];
}

const name = getName(‘name’);
變數

12.1 一直使用 const 來宣告變數，如果不這樣就會產生全域性變數。

// bad
name = ‘peter’;

// good
const name = ‘peter’;
12.2 使用 const 宣告每一個變數。

// bad
const name = ‘peter’,
age = 27;

// good
const name = ‘peter’;
const age = 27;
12.3 在你需要的地方給變數賦值，但請他它們放在一個合理的位置。

// bad
function(hasName) {
const name = getName();

  if (!hasName) {
      return false;
  }

  this.setFirstName(name);

  return true;

}

// good
function(hasName) {
if (!hasName) {
return false;
}

  const name = getName();
  this.setFirstName(name);

  return true;

}
比較運算子 & 等號

13.1 優先使用 === 和 !== 而不是 == 和 != 。

13.2 使用簡寫。

// bad
if (name !== ”) {
}

// good
if (name) {
}

// bad
if (name.length > 0) {
}

// good
if (name.length) {
}
逗號

14.1 行首逗號，不需要。

// bad
const story = [
once
, upon
, aTime
];

// good
const story = [
once,
upon,
aTime,
];

// bad
const hero = {
firstName: ‘Ada’
, lastName: ‘Lovelace’
, birthYear: 1815
, superPower: ‘computers’
};

// good
const hero = {
firstName: ‘Ada’,
lastName: ‘Lovelace’,
birthYear: 1815,
superPower: ‘computers’,
};
14.2 行尾逗號，需要。

為什麼？這會讓 git diff 更乾淨。另外，像 babel 這樣的轉譯器會移除結尾多於的逗號，也就是說你不必擔心老舊瀏覽器的結尾逗號問題。
// bad
const student = {
name: ‘peter’,
age: 27
}

// good
const student = {
name: ‘peter’,
age: 27,
}
分號

15.1 使用分號

// bad
(function() {
const name = ‘Skywalker’
return name
})()

// good
(() => {
const name = ‘Skywalker’;
return name;
})();

// good (防止函式在兩個 IIFE 合併時被當成一個引數)
;(() => {
const name = ‘Skywalker’;
return name;
})();
型別轉換

16.1 在語句開始時執行型別轉換。

// => this.reviewScore = 9;

// bad
const totalScore = this.reviewScore + ”;

// good
const totalScore = String(this.reviewScore);
16.2 字串

const inputValue = ‘4’;

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);
16.3 對數字使用 parsetInt 轉換，病帶上型別轉換的基數。

// good
/**
* 使用 parseInt 導致我的程式變慢，
* 改成使用位操作轉換數字快多了。
*/
const val = inputValue >> 0;
16.4 布林

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// good
const hasAge = !!age;
命名規則

17.1 避免單字母命名。命名應具備描述性。

// bad
function q() {
// …stuff…
}

// good
function query() {
// ..stuff..
}
17.2 使用駝峰式命名物件、函式和例項。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
17.3 使用帕斯卡式命名建構函式或類。

// bad
function user(options) {
this.name = options.name;
}

const bad = new user({
name: ‘nope’,
});

// good
class User {
constructor(options) {
this.name = options.name;
}
}

const good = new User({
name: ‘yup’,
});
17.4 使用下劃線 _ 開頭命名私有屬性。

// bad
this.firstName = ‘Panda’;
this.firstName_ = ‘Panda’;

// good
this._firstName = ‘Panda’;
17.5 別儲存 this 的引用。使用箭頭函式或 Function#bind。

// bad
function foo() {
const self = this;
return function() {
console.log(self);
};
}

// bad
function foo() {
const that = this;
return function() {
console.log(that);
};
}

// good
function foo() {
return () => {
console.log(this);
};
}
17.6 如果你的檔案只輸出一個類，那你的檔名必須和類名完全保持一致。

// file contents
class CheckBox {
// …
}
export default CheckBox;

// in some other file
// bad
import CheckBox from ‘./checkBox’;

// bad
import CheckBox from ‘./check_box’;

// good
import CheckBox from ‘./CheckBox’;
17.7 當你匯出預設的函式時使用駝峰式命名。你的檔名必須和函式名完全保持一致。

function makeStyleGuide() {
}

export default makeStyleGuide;
17.8 當你匯出單例、函式庫、空物件時使用帕斯卡式命名。

const AirbnbStyleGuide = {
es6: {
}
};

export default AirbnbStyleGuide;

跨平臺RN開發的React規範（ES6）

規範

跨平臺RN開發的React規範（ES6）

React規範（一）

前端基於react,後端基於.net core2.0的開發之路（1）介紹

4.前端基於react,後端基於.net core2.0的開發之路（4）前端打包，編譯，路由，模型，服務

windows下配置React-Native（Android）開發環境總結

Rust 移動端跨平臺複雜圖形渲染專案開發系列總結（目錄）

記一次基於react、cra2、typescript的pwa專案由開發到部署（三）

阿里java開發規範（6）---MySQL資料庫

Java開發規範（一）

ES6中的模組化規範（一）

React Native開發之路（一）

Web常見約定規範（精選）

【轉】如何為Apache JMeter開發插件（一）

java_web項目開發經驗總結（一）

項目命名規範（二）

最詳細的 Android Toolbar 開發實踐總結（轉）

軟件project—思考項目開發那些事（一）

安卓MP3播放器開發實例（3）之進度條和歌詞更新的實現

安卓開發筆記 Activity（四）

一些規範（自用）

跨平臺RN開發的React規範（ES6）

規範

相關推薦