前端小技巧:JavaScript 编码规范
1. 类型
1.1【可选】 基本类型: 当你访问一个基本类型时,直接操作它的值。
string number boolean null undefined symbol
符号(Symbols)不能完全的被 polyfill,因此在不能原生支持symbol类型的浏览器或环境中,不应该使用symbol类型。
1.2 【可选】 复杂类型: 当你访问一个复杂类型时,直接操作其值的引用。
object array function
const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9
2. 引用
2.1 【必须】 使用
const
定义你的所有引用;避免使用
var
原因? 这样能够确保你不能重新赋值你的引用,否则可能导致错误或者产生难以理解的代码。
// 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 都是块级作用域。
// const 和 let 只存在于他们定义的块级作用域中。 { let a = 1; const b = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError
3. 对象
3.1 【必须】 使用字面量语法创建对象。
// bad const item = new Object(); // good const item = {};
3.2 【推荐】 在创建具有动态属性名称的对象时使用计算属性名。原因? 它允许你在一个地方定义对象的所有属性。
function getKey(k) { return `a key named ${k}`; } // bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, };
3.3 【推荐】 用对象方法简写。
// bad const value = 1; const atom = { value: value, addValue: function (newValue) { return atom.value + newValue; }, }; // good const value = 1; const atom = { value, addValue(newValue) { return atom.value + newValue; }, };
3.4 【推荐】 用属性值简写。
const ScreenBody = 'Screen Body'; // bad const obj = { ScreenBody: ScreenBody, }; // good const obj = { ScreenBody, };
3.5 【推荐】 声明对象时,将简写的属性放在前面。原因? 这样更容易的判断哪些属性使用的简写。
const ScreenBody = 'Screen Body'; const ModalText = 'Modal Text'; // bad const obj = { One: 1, two: 2, ScreenBody, Three: 3, Fourth: 4, ModalText, }; // good const obj = { ScreenBody, ModalText, One: 1, two: 2, Three: 3, Fourth: 4, };
3.6 【必须】 只使用引号标注无效标识符的属性。
// bad const bad = { 'foo': 3, 'bar': 4, 'data-blah': 5, }; // good const good = { foo: 3, bar: 4, 'data-blah': 5, };
3.7 【推荐】 不能直接调用
Object.prototype的方法,如: hasOwnProperty,propertyIsEnumerable,isPrototypeOf
原因? 这些方法可能被有问题的对象上的属性覆盖 - 如 { hasOwnProperty: false } - 或者,对象是一个空对象 Object.create(null)
// bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // best const has = Object.prototype.hasOwnProperty; // 在模块范围内的缓存中查找一次 console.log(has.call(object, key)); /* or */ import has from 'has'; // https://www.npmjs.com/package/has console.log(has(object, key));
3.8 【推荐】 使用对象扩展操作符(spread operator)浅拷贝对象,而不是用 Object.assign方法。 使用对象的剩余操作符(rest operator)来获得一个新对象,该对象省略了某些属性。
// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // 变异的 `original` ಠ_ಠ delete copy.a; // 这.... // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
4. 数组
4.1 【必须】 使用字面量语法创建数组。
// bad const items = new Array(); // good const items = [];