如何更合理的书写js

前言

今天在github上发现的一篇关于代码规范，我觉得关于怎么写代码这一点是比较重要的
.我个人认为基础是重要的，我便着重记录了下基础的语法。想要看全部内容的人可以点击下面的
github链接。
github

类型

原始值：存取直接作用于它自身。

string
number
boolean
null
underfined
`var foo = 1;
var bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9`

复杂类型：: 存取时作用于它自身值的引用。

object
array
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 = {};`

不要使用保留字作为键名

// 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 = [];`

向数组增加元素时使用 Array#push 来替代直接赋值。

`var someStack = [];

// bad
someStack[someStack.length] = ‘abracadabra’;

// good
someStack.push(‘abracadabra’);`

当你需要拷贝数组时，使用 Array#slice

`var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();`

使用 Array#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;`

超过 100 个字符的字符串应该使用连接符写成多行。

注：若过度使用，通过连接符连接的长字符串可能会影响性能

`// 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 连接而不是使用连接符

`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 = ‘

‘;

for (i = 0; i < length; i++) {
items += ‘

‘ + messages[i].message + ‘

‘;
}

return items + ‘‘;
}

// good
function inbox(messages) {
items = [];

for (i = 0; i < length; i++) {
// use direct assignment in this case because we’re micro-optimizing.
items[i] = ‘

‘ + messages[i].message + ‘

‘;
}

return ‘

‘ + items.join(‘’) + ‘‘;
}`

函数

函数表达式：

`// 匿名函数表达式
var anonymous = function() {
return true;
};

// 命名函数表达式
var named = function named() {
return true;
};

// 立即调用的函数表达式（IIFE）
(function () {
console.log(‘Welcome to the Internet. Please follow me.’);
}());`

永远不要在一个非函数代码块（if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。

注： ECMA-262 把块定义为一组语句。函数声明不是语句。阅读对 ECMA-262 这个问题的说明。

`// 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…
}`

属性

使用 . 来访问对象的属性

`var luke = {
jedi: true,
age: 28
};

// bad
var isJedi = luke[‘jedi’];

// good
var isJedi = luke.jedi;`

当通过变量访问属性时使用中括号 []。

`var luke = {
jedi: true,
age: 28
};

function getProp(prop) {
return luke[prop];
}

var isJedi = getProp(‘jedi’);`

变量

总是使用 var 来声明变量。不这么做将导致产生全局变量。我们要避免污染全局命名空间。

`// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();`

使用 var 声明每一个变量。这样做的好处是增加新变量将变的更加容易，而且你永远不用再担心调换错 ; 跟 ,。

`// bad
var items = getItems(),
goSportsTeam = true,
dragonball = ‘z’;

// bad
// （跟上面的代码比较一下，看看哪里错了）
var items = getItems(),
goSportsTeam = true;
dragonball = ‘z’;

// good
var items = getItems();
var goSportsTeam = true;
var dragonball = ‘z’;`

最后再声明未赋值的变量。当你需要引用前面的变量赋值时这将变的很有用。

`// bad
var i, len, dragonball,
items = getItems(),
goSportsTeam = true;

// bad
var i;
var items = getItems();
var dragonball;
var goSportsTeam = true;
var len;

// good
var items = getItems();
var goSportsTeam = true;
var dragonball;
var length;
var i;`

在作用域顶部声明变量。这将帮你避免变量声明提升相关的问题。

`// bad
function () {
test();
console.log(‘doing stuff..’);

//..other stuff..

var name = getName();

if (name === ‘test’) {
return false;
}

return name;
}

// good
function () {
var name = getName();

test();
console.log(‘doing stuff..’);

//..other stuff..

if (name === ‘test’) {
return false;
}

return name;
}

// bad - 不必要的函数调用
function () {
var name = getName();

if (!arguments.length) {
return false;
}

this.setFirstName(name);

return true;
}

// good
function () {
var name;

if (!arguments.length) {
return false;
}

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

return true;
}`

分号

// bad
(function () {
  var name = 'Skywalker'
  return name
})()
// good
(function () {
  var name = 'Skywalker';
  return name;
})();
// good (防止函数在两个 IIFE 合并时被当成一个参数
;(function () {
  var name = 'Skywalker';
  return name;
})();

添加分号是比较重要的，这关乎到你的代码压缩和性能，没有正确使用分号浏览器会自动
添加，这会损失一部分性能，并且压缩的效果会大打折扣。［会把中间的空格视为代码块］

这里还有2篇规范一起记录下来以备用。［目前水平太渣］

jsx代码规范-react
Airbnb CSS / Sass 指南