JavaScript最全编码规范(上)

类型

基本类型:访问基本类型时,应该直接操作类型值

  1. string
  2. number
  3. boolean
  4. null
  5. undefined
var foo = 1;
var bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9

复合类型:访问复合类型时,应该操作其引用

  1. object
  2. array
  3. function
var foo = [1, 2];
var bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9

对象

使用字面量语法创建对象

// bad
var item = new Object();
// good
var item = {};

不要使用保留字,在IE8中不起作用,更多相关信息

// bad
var superman = {
default: { clark: 'kent' },
private: true
};
// good
var superman = {
defaults: { clark: 'kent' },
hidden: true
};

使用易读的同义词代替保留字

// bad
var superman = {
class: 'alien'
};
// bad
var superman = {
klass: 'alien'
};
// good
var superman = {
type: 'alien'
};

数组

// bad
var items = new Array();
// good
var items = [];

添加数组元素时,使用push而不是直接添加

var someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');

需要复制数组时,可以使用slice,jsPerf的相关文章

var len = items.length;
var itemsCopy = [];
var i;
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
itemsCopy = items.slice();

使用slice将类数组对象转为数组

function trigger() {
var args = Array.prototype.slice.call(arguments);
...
}

字符串

对字符串使用单引号

// bad
var name = "Bob Parr";
// good
var name = 'Bob Parr';
// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = 'Bob ' + this.lastName;

超过80个字符的字符串应该使用字符串连接符进行跨行

注意:对长字符串过度使用连接符将会影响性能。相关的文章和主题讨论: jsPerf & Discussion

// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// good
var errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';

以编程方式创建字符串的时应该使用Array的join方法而不是通过连接符,尤其是在IE中:jsPerf.

var items;
var messages;
var length;
var i;
messages = [{
state: 'success',
message: 'This one worked.'
}, {
state: 'success',
message: 'This one worked as well.'
}, {
state: 'error',
message: 'This one did not work.'
}];
length = messages.length;
// bad
function inbox(messages) {
items = '<ul>';
for (i = 0; i < length; i++) {
items += '<li>' + messages[i].message + '</li>';
}
return items + '</ul>';
}
// good
function inbox(messages) {
items = [];
for (i = 0; i < length; i++) {
items[i] = '<li>' + messages[i].message + '</li>';
}
return '<ul>' + items.join('') + '</ul>';
}

函数

函数表达式

// anonymous function expression
var anonymous = function() {
return true;
};
// named function expression
var named = function named() {
return true;
};
// immediately-invoked function expression (IIFE)
(function() {
console.log('Welcome to the Internet. Please follow me.');
})();

不要在非函数块中(if, while, etc)声明函数,尽管浏览器允许你分配函数给一个变量,但坏消息是,不同的浏览器用不同的方式解析它

注意:ECMA-262把块定义为一组语句,但函数声明不是一个语句:Read ECMA-262’s note on this issue.

// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
var test;
if (currentUser) {
test = function test() {
console.log('Yup.');
};
}

不要命名一个参数为arguments,否则它将优先于传递给每个函数作用域中的arguments对象,

// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
已有 3 条评论
  1. Dennisfrisk

    【揚歌-教學麥克風直營店】官方線上購物網站─JM-180B有線麥克風擴音器│無線麥克風擴音器│揚歌小蜜蜂│專營教學麥克風及教學擴音器

    https://mic-shop.com/

    Dennisfrisk 回复
  2. Marlinabova

    喜多福,乾拌麵,拌麵,乾麵,呷什麵,關廟麵,手工麵,手作麵,沙茶咖哩,川味麻辣 牛肉風味,油蔥香菇,香蒜麻醬,紅油烏醋,麻辣麻醬,川味麻辣,團購美食,sidofu,日曬麵條,古法手工精製,日光自然曬乾

    https://www.sidofu.net/

    Marlinabova 回复
  3. StephenadurN

    喜多福,乾拌麵,拌麵,乾麵,呷什麵,關廟麵,手工麵,手作麵,沙茶咖哩,川味麻辣 牛肉風味,油蔥香菇,香蒜麻醬,紅油烏醋,麻辣麻醬,川味麻辣,團購美食,sidofu,日曬麵條,古法手工精製,日光自然曬乾,乾拌麵網路票選,拌麵網路票選 ,乾拌麵台灣票選 ,拌麵台灣票選,乾拌麵排名,拌麵排名,2018乾拌麵之王

    https://www.sidofu.net/

    StephenadurN 回复
发表新评论