[译]JavaScript规范

类型

原始值: 相当于传值

[javascript]view plain copy
        
    
string  
number  
boolean  
null  
undefined  
var foo = 1,  
    bar = foo;  
  
bar = 9;  
  
console.log(foo, bar); // => 1, 9  

复杂类型: 相当于传引用

[javascript] view plain copy
1. object
2. array
3. function
4. var foo = [1, 2],
5. bar = foo;
7. bar[0] = 9;
9. console.log(foo[0], bar[0]); // => 9, 9

对象

使用字面值创建对象
[javascript] view plain copy
1. // bad
2. var item = new Object();
4. // good
5. var item = {};
不要使用保留字 reserved words 作为键
[javascript] view plain copy
1. // bad
2. var superman = {
3. class: 'superhero',
4. default: { clark: 'kent' },
5. private: true
6. };
8. // good
9. var superman = {
10. klass: 'superhero',
11. defaults: { clark: 'kent' },
12. hidden: true
13. };

数组

使用字面值创建数组
[javascript] view plain copy
1. // bad
2. var items = new Array();
4. // good
5. var items = [];
如果你不知道数组的长度，使用push
[javascript] view plain copy
1. var someStack = [];
4. // bad
5. someStack[someStack.length] = 'abracadabra';
7. // good
8. someStack.push('abracadabra');
当你需要拷贝数组时使用slice. jsPerf
[javascript] view plain copy
1. var len = items.length,
2. itemsCopy = [],
3. i;
5. // bad
6. for (i = 0; i < len; i++) {
7. itemsCopy[i] = items[i];
8. }
10. // good
11. itemsCopy = items.slice();
使用slice将类数组的对象转成数组.
[javascript] view plain copy
1. function trigger() {
2. var args = Array.prototype.slice.call(arguments);
3. ...
4. }

字符串

对字符串使用单引号 ''
[javascript] view plain copy
1. // bad
2. var name = "Bob Parr";
4. // good
5. var name = 'Bob Parr';
7. // bad
8. var fullName = "Bob " + this.lastName;
10. // good
11. var fullName = 'Bob ' + this.lastName;
超过80个字符的字符串应该使用字符串连接换行
注: 如果过度使用，长字符串连接可能会对性能有影响. jsPerf & Discussion
[javascript] view plain copy
1. // bad
2. 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.';
4. // bad
5. var errorMessage = 'This is a super long error that \
6. was thrown because of Batman. \
7. When you stop to think about \
8. how Batman had anything to do \
9. with this, you would get nowhere \
10. fast.';
13. // good
14. var errorMessage = 'This is a super long error that ' +
15. 'was thrown because of Batman.' +
16. 'When you stop to think about ' +
17. 'how Batman had anything to do ' +
18. 'with this, you would get nowhere ' +
19. 'fast.';
编程时使用join而不是字符串连接来构建字符串，特别是IE: jsPerf.
[javascript] view plain copy
1. var items,
2. messages,
3. length, i;
5. messages = [{
6. state: 'success',
7. message: 'This one worked.'
8. },{
9. state: 'success',
10. message: 'This one worked as well.'
11. },{
12. state: 'error',
13. message: 'This one did not work.'
14. }];
16. length = messages.length;
18. // bad
19. function inbox(messages) {
20. items = '<ul>';
22. for (i = 0; i < length; i++) {
23. items += '<li>' + messages[i].message + '</li>';
24. }
26. return items + '</ul>';
27. }
29. // good
30. function inbox(messages) {
31. items = [];
33. for (i = 0; i < length; i++) {
34. items[i] = messages[i].message;
35. }
37. return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
38. }

<函数

函数表达式:
[javascript] view plain copy
1. // 匿名函数表达式
2. var anonymous = function() {
3. return true;
4. };
6. // 有名函数表达式
7. var named = function named() {
8. return true;
9. };
11. // 立即调用函数表达式
12. (function() {
13. console.log('Welcome to the Internet. Please follow me.');
14. })();
绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。
注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明.
[javascript] view plain copy
1. // bad
2. if (currentUser) {
3. function test() {
4. console.log('Nope.');
5. }
6. }
8. // good
9. if (currentUser) {
10. var test = function test() {
11. console.log('Yup.');
12. };
13. }
绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.
[javascript] view plain copy
1. // bad
2. function nope(name, options, arguments) {
3. // ...stuff...
4. }
6. // good
7. function yup(name, options, args) {
8. // ...stuff...
9. }

属性

当使用变量访问属性时使用中括号.
[javascript] view plain copy
1. var luke = {
2. jedi: true,
3. age: 28
4. };
6. function getProp(prop) {
7. return luke[prop];
8. }
10. var isJedi = getProp('jedi');

变量

总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。
[javascript] view plain copy
1. // bad
2. superPower = new SuperPower();
4. // good
5. var superPower = new SuperPower();
使用一个 var 以及新行声明多个变量，缩进4个空格。
[javascript] view plain copy
1. // bad
2. var items = getItems();
3. var goSportsTeam = true;
4. var dragonball = 'z';
6. // good
7. var items = getItems(),
8. goSportsTeam = true,
9. dragonball = 'z';
最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。
[javascript] view plain copy
1. // bad
2. var i, len, dragonball,
3. items = getItems(),
4. goSportsTeam = true;
6. // bad
7. var i, items = getItems(),
8. dragonball,
9. goSportsTeam = true,
10. len;
12. // good
13. var items = getItems(),
14. goSportsTeam = true,
15. dragonball,
16. length,
17. i;
在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。
[javascript] view plain copy
1. // bad
2. function() {
3. test();
4. console.log('doing stuff..');
6. //..other stuff..
8. var name = getName();
10. if (name === 'test') {
11. return false;
12. }
14. return name;
15. }
17. // good
18. function() {
19. var name = getName();
21. test();
22. console.log('doing stuff..');
24. //..other stuff..
26. if (name === 'test') {
27. return false;
28. }
30. return name;
31. }
33. // bad
34. function() {
35. var name = getName();
37. if (!arguments.length) {
38. return false;
39. }
41. return true;
42. }
44. // good
45. function() {
46. if (!arguments.length) {
47. return false;
48. }
50. var name = getName();
52. return true;
53. }

条件表达式和等号

适当使用 === 和 !== 以及 == 和 !=.
条件表达式的强制类型转换遵循以下规则：
- 对象被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字如果是 +0, -0, or NaN 被计算为 false , 否则为 true
- 字符串 如果是空字符串 '' 则被计算为 false, 否则为 true
[javascript] view plain copy
1. if ([0]) {
2. // true
3. // An array is an object, objects evaluate to true
4. }
使用快捷方式.
[javascript] view plain copy
1. // bad
2. if (name !== '') {
3. // ...stuff...
4. }
6. // good
7. if (name) {
8. // ...stuff...
9. }
11. // bad
12. if (collection.length > 0) {
13. // ...stuff...
14. }
16. // good
17. if (collection.length) {
18. // ...stuff...
19. }
阅读 Truth Equality and JavaScript 了解更多

块

给所有多行的块使用大括号
[javascript] view plain copy
1. // bad
2. if (test)
3. return false;
5. // good
6. if (test) return false;
8. // good
9. if (test) {
10. return false;
11. }
13. // bad
14. function() { return false; }
16. // good
17. function() {
18. return false;
19. }

注释

使用 /** ... */ 进行多行注释，包括描述，指定类型以及参数值和返回值
[javascript] view plain copy
1. // bad
2. // make() returns a new element
3. // based on the passed in tag name
4. //
5. // @param <String> tag
6. // @return <Element> element
7. function make(tag) {
9. // ...stuff...
11. return element;
12. }
14. // good
15. /**
16. * make() returns a new element
17. * based on the passed in tag name
18. *
19. * @param <String> tag
20. * @return <Element> element
21. */
22. function make(tag) {
24. // ...stuff...
26. return element;
27. }
使用 // 进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行.
[javascript] view plain copy
1. // bad
2. var active = true; // is current tab
4. // good
5. // is current tab
6. var active = true;
8. // bad
9. function getType() {
10. console.log('fetching type...');
11. // set the default type to 'no type'
12. var type = this._type || 'no type';
14. return type;
15. }
17. // good
18. function getType() {
19. console.log('fetching type...');
21. // set the default type to 'no type'
22. var type = this._type || 'no type';
24. return type;
25. }
如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解
[javascript] view plain copy
1. function Calculator() {
3. // FIXME: shouldn't use a global here
4. total = 0;
6. return this;
7. }
8. function Calculator() {
10. // TODO: total should be configurable by an options param
11. this.total = 0;
13. return this;
14. }

空白

将tab设为4个空格
[javascript] view plain copy
1. // bad
2. function() {
3. ∙∙var name;
4. }
6. // bad
7. function() {
8. ∙var name;
9. }
11. // good
12. function() {
13. ∙∙∙∙var name;
14. }
大括号前放一个空格
[javascript] view plain copy
1. // bad
2. function test(){
3. console.log('test');
4. }
6. // good
7. function test() {
8. console.log('test');
9. }
11. // bad
12. dog.set('attr',{
13. age: '1 year',
14. breed: 'Bernese Mountain Dog'
15. });
17. // good
18. dog.set('attr', {
19. age: '1 year',
20. breed: 'Bernese Mountain Dog'
21. });
在做长方法链时使用缩进.
[javascript] view plain copy
1. // bad
2. $('#items').find('.selected').highlight().end().find('.open').updateCount();
4. // good
5. $('#items')
6. .find('.selected')
7. .highlight()
8. .end()
9. .find('.open')
10. .updateCount();
12. // bad
13. var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
14. .attr('width', (radius + margin) * 2).append('svg:g')
15. .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
16. .call(tron.led);
18. // good
19. var leds = stage.selectAll('.led')
20. .data(data)
21. .enter().append('svg:svg')
22. .class('led', true)
23. .attr('width', (radius + margin) * 2)
24. .append('svg:g')
25. .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
26. .call(tron.led);

逗号

不要将逗号放前面
[javascript] view plain copy
1. // bad
2. var once
3. , upon
4. , aTime;
6. // good
7. var once,
8. upon,
9. aTime;
11. // bad
12. var hero = {
13. firstName: 'Bob'
14. , lastName: 'Parr'
15. , heroName: 'Mr. Incredible'
16. , superPower: 'strength'
17. };
19. // good
20. var hero = {
21. firstName: 'Bob',
22. lastName: 'Parr',
23. heroName: 'Mr. Incredible',
24. superPower: 'strength'
25. };
不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。
[javascript] view plain copy
1. // bad
2. var hero = {
3. firstName: 'Kevin',
4. lastName: 'Flynn',
5. };
7. var heroes = [
8. 'Batman',
9. 'Superman',
10. ];
12. // good
13. var hero = {
14. firstName: 'Kevin',
15. lastName: 'Flynn'
16. };
18. var heroes = [
19. 'Batman',
20. 'Superman'
21. ];

分号

语句结束一定要加分号
[javascript] view plain copy
1. // bad
2. (function() {
3. var name = 'Skywalker'
4. return name
5. })()
7. // good
8. (function() {
9. var name = 'Skywalker';
10. return name;
11. })();
13. // good
14. ;(function() {
15. var name = 'Skywalker';
16. return name;
17. })();

类型转换

在语句的开始执行类型转换.
字符串:
[javascript] view plain copy
1. // => this.reviewScore = 9;
3. // bad
4. var totalScore = this.reviewScore + '';
6. // good
7. var totalScore = '' + this.reviewScore;
9. // bad
10. var totalScore = '' + this.reviewScore + ' total score';
12. // good
13. var totalScore = this.reviewScore + ' total score';
对数字使用 parseInt 并且总是带上类型转换的基数.
[javascript] view plain copy
1. var inputValue = '4';
3. // bad
4. var val = new Number(inputValue);
6. // bad
7. var val = +inputValue;
9. // bad
10. var val = inputValue >> 0;
12. // bad
13. var val = parseInt(inputValue);
15. // good
16. var val = Number(inputValue);
18. // good
19. var val = parseInt(inputValue, 10);
21. // good
22. /**
23. * parseInt was the reason my code was slow.
24. * Bitshifting the String to coerce it to a
25. * Number made it a lot faster.
26. */
27. var val = inputValue >> 0;
布尔值:
[javascript] view plain copy
1. var age = 0;
3. // bad
4. var hasAge = new Boolean(age);
6. // good
7. var hasAge = Boolean(age);
9. // good
10. var hasAge = !!age;

命名约定

避免单个字符名，让你的变量名有描述意义。
[javascript] view plain copy
1. // bad
2. function q() {
3. // ...stuff...
4. }
6. // good
7. function query() {
8. // ..stuff..
9. }
当命名对象、函数和实例时使用驼峰命名规则
[javascript] view plain copy
1. // bad
2. var OBJEcttsssss = {};
3. var this_is_my_object = {};
4. var this-is-my-object = {};
5. function c() {};
6. var u = new user({
7. name: 'Bob Parr'
8. });
10. // good
11. var thisIsMyObject = {};
12. function thisIsMyFunction() {};
13. var user = new User({
14. name: 'Bob Parr'
15. });
当命名构造函数或类时使用驼峰式大写
[javascript] view plain copy
1. // bad
2. function user(options) {
3. this.name = options.name;
4. }
6. var bad = new user({
7. name: 'nope'
8. });
10. // good
11. function User(options) {
12. this.name = options.name;
13. }
15. var good = new User({
16. name: 'yup'
17. });
命名私有属性时前面加个下划线 _
[javascript] view plain copy
1. // bad
2. this.__firstName__ = 'Panda';
3. this.firstName_ = 'Panda';
5. // good
6. this._firstName = 'Panda';
当保存对 this 的引用时使用 _this.
[javascript] view plain copy
1. // bad
2. function() {
3. var self = this;
4. return function() {
5. console.log(self);
6. };
7. }
9. // bad
10. function() {
11. var that = this;
12. return function() {
13. console.log(that);
14. };
15. }
17. // good
18. function() {
19. var _this = this;
20. return function() {
21. console.log(_this);
22. };
23. }

存取器

属性的存取器函数不是必需的
如果你确实有存取器函数的话使用getVal() 和 setVal('hello')
[javascript] view plain copy
1. // bad
2. dragon.age();
4. // good
5. dragon.getAge();
7. // bad
8. dragon.age(25);
10. // good
11. dragon.setAge(25);
如果属性是布尔值，使用isVal() 或 hasVal()
[javascript] view plain copy
1. // bad
2. if (!dragon.age()) {
3. return false;
4. }
6. // good
7. if (!dragon.hasAge()) {
8. return false;
9. }
可以创建get()和set()函数，但是要保持一致
[javascript] view plain copy
1. function Jedi(options) {
2. options || (options = {});
3. var lightsaber = options.lightsaber || 'blue';
4. this.set('lightsaber', lightsaber);
5. }
7. Jedi.prototype.set = function(key, val) {
8. this[key] = val;
9. };
11. Jedi.prototype.get = function(key) {
12. return this[key];
13. };

构造器

给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题。
[javascript] view plain copy
1. function Jedi() {
2. console.log('new jedi');
3. }
5. // bad
6. Jedi.prototype = {
7. fight: function fight() {
8. console.log('fighting');
9. },
11. block: function block() {
12. console.log('blocking');
13. }
14. };
16. // good
17. Jedi.prototype.fight = function fight() {
18. console.log('fighting');
19. };
21. Jedi.prototype.block = function block() {
22. console.log('blocking');
23. };
方法可以返回 this 帮助方法可链。
[javascript] view plain copy
1. // bad
2. Jedi.prototype.jump = function() {
3. this.jumping = true;
4. return true;
5. };
7. Jedi.prototype.setHeight = function(height) {
8. this.height = height;
9. };
11. var luke = new Jedi();
12. luke.jump(); // => true
13. luke.setHeight(20) // => undefined
15. // good
16. Jedi.prototype.jump = function() {
17. this.jumping = true;
18. return this;
19. };
21. Jedi.prototype.setHeight = function(height) {
22. this.height = height;
23. return this;
24. };
26. var luke = new Jedi();
28. luke.jump()
29. .setHeight(20);
可以写一个自定义的toString()方法，但是确保它工作正常并且不会有副作用。
[javascript] view plain copy
1. function Jedi(options) {
2. options || (options = {});
3. this.name = options.name || 'no name';
4. }
6. Jedi.prototype.getName = function getName() {
7. return this.name;
8. };
10. Jedi.prototype.toString = function toString() {
11. return 'Jedi - ' + this.getName();
12. };

事件

当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器
[javascript] view plain copy
1. // bad
2. $(this).trigger('listingUpdated', listing.id);
4. ...
6. $(this).on('listingUpdated', function(e, listingId) {
7. // do something with listingId
8. });
更好:
[javascript] view plain copy
1. // good
2. $(this).trigger('listingUpdated', { listingId : listing.id });
4. ...
6. $(this).on('listingUpdated', function(e, data) {
7. // do something with data.listingId
8. });

模块

模块应该以 ! 开始，这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误
这个文件应该以驼峰命名，并在同名文件夹下，同时导出的时候名字一致
加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它
总是在模块顶部声明 'use strict';
[javascript] view plain copy
1. // fancyInput/fancyInput.js
3. !function(global) {
4. 'use strict';
6. var previousFancyInput = global.FancyInput;
8. function FancyInput(options) {
9. this.options = options || {};
10. }
12. FancyInput.noConflict = function noConflict() {
13. global.FancyInput = previousFancyInput;
14. return FancyInput;
15. };
17. global.FancyInput = FancyInput;
18. }(this);

类型

对象

数组

字符串

<函数

属性

变量

条件表达式和等号

块

注释

空白

逗号

分号

类型转换

命名约定

存取器

构造器

事件

模块

猜你喜欢