目录
嵌入规则
Javascript程序应该尽量放在.js的文件中，需要调用的时候在页面中以<script src="filename.js">的形式包含进来。Javascript代码若不是该页面专用的，则应尽量避免在页面中直接编写Javascript代码。
对齐缩进与换行
- 缩进
- 在同一系统中应采用同一种缩进标准，本文提倡缩进大小为4个空格。各编译器对Tab键所代替的空白大小定义不同。建议在设置开发环境时，将编辑器里的Tab快捷键重新设置成4个空格。多数编译器提供了此功能。否则建议按4次空格来进行缩进。
- 换行
在以下位置必须换行：
- 每个独立语句结束后；
- if、else、catch、finally、while等关键字前；
- 运算符处换行时，运算符必须在新行的行首。
- 对于因为单行长度超过限制时产生的换行，参考行长度中的策略进行分隔。
- 字符串过长截断
每行代码应小于80个字符。若代码较长应尽量换行，换行应选择在操作符和标点符号之后，最好是在分号“;”或逗号“,”之后。下一行代码相对上一行缩进4个空格。这样可以有效防止复制粘贴引起的代码缺失等错误并增强可读性。
- 三元运算符过长
<script>
// 无需换行
var result = condition ? resultA : resultB;
// 条件超长的情况
var result = thisIsAVeryVeryLongCondition ? resultA : resultB;
// 结果分支超长的情况
var result = condition
? thisIsAVeryVeryLongCondition
:resultB;
var result = condition
? resultA
: thisIsAVeryVeryLongCondition;
</script><script>
// 最后一个结果很长，但不建议合并条件和第一个分支
// 不要这么干
var result = condition ? resultA
: thisIsAVeryVeryLongCondition;
</script>- 过长的逻辑条件组合
<script>
// 注意逻辑运算符前的缩进
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// code
}
</script>- 过长的JSON和数组
<script>
// 引文-数字的映射
var mapping = {
one: 1, two: 2, three: 3, four: 4, five: 5,
six: 6, seven: 7, eight:8, nine: 9, ten: 10,
eleven: 11
}
</script>- eturn语句
命名
命名的方法通常有以下几类：
1. 命名法说明
- 1).camel命名法，形如thisIsAnApple
- 2).pascal命名法，形如ThisIsAnApple
- 3).下划线命名法，形如this_is_an_apple ·
- 4).中划线命名法，形如this-is-an-apple
根据不同类型的内容，必须严格采用如下的命名法：
- 变量名：必须使用camel命名法
- 参数名：必须使用camel命名法
- 函数名：必须使用camel命名法
- 方法/属性：必须使用camel命名法
- 私有（保护）成员：必须以下划线_开头
- 常量名：必须使用全部大写的下划线命名法，如IS_DEBUG_ENABLED
- 类名：必须使用pascal命名法
- 枚举名：必须使用pascal命名法
- 枚举的属性：必须使用全部大写的下划线命名法
- 命名空间：必须使用camel命名法
- 语义：命名同时还需要关注语义，如：
- 变量名应当使用名词；
- boolean类型的应当使用is、has等起头，表示其类型；·
- 函数名应当用动宾短语；
- 类名应当用名词。
声明
变量的声明
尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明。但我们还是应该养成这个好习惯。这样可以比较容易的检测出那些未经声明的变量，避免其变为隐藏的全局变量，造成隐患。
在函数的开始应先用 var 关键字声明函数中要使用的局部变量，注释变量的功能及代表的含义，且应以字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域，用 var 关键字声明的局部变量只在函数内有效，而未经 var 声明的变量则被视为全局变量。示例：
<script>
var valueA = "a";
var valueB = "b";
function f1() {
var valueA = "c";
alert("valueA=" + valueA); // output: valueA=c
valueB = "d";
alert("valueB=" + valueB); // output: valueB=d
}
f1();
alert("valueA=" + valueA); // output: valueA=a
alert("valueB=" + valueB); // output: valueB=d
</script>类型
- 原始值: 相当于传值
- string
- number
- boolean
- null
- undefined
<script>
var foo = 1,
bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9
</script>- 复杂类型: 相当于传引用
- object
- array
- function
<script>
var foo = [1, 2],
bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9
</script>对象
- 使用字面值创建对象
<script>
// bad
var item = new Object();
// good
var item = {};
</script>- 不要使用保留字 reserved words 作为键
<script>
// bad
var superman = {
class: 'superhero',
default: { clark: 'kent' },
private: true
};
// good
var superman = {
klass: 'superhero',
defaults: { clark: 'kent' },
hidden: true
};
</script>数组
- 使用字面值创建数组
<script>
// bad
var items = new Array();
// good
var items = [];
</script>- 如果你不知道数组的长度，使用push
<script>
var someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');
</script>- 当你需要拷贝数组时使用slice. jsPerf
<script>
var len = items.length,
itemsCopy = [],
i;
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
itemsCopy = items.slice();
</script>- 使用slice将类数组的对象转成数组
<script>
function trigger() {
var args = Array.prototype.slice.call(arguments);
...
}
</script>字符串
- 对字符串使用单引号 ”
<script>
// bad
var name = "Bob Parr";
// good
var name = 'Bob Parr';
// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = 'Bob ' + this.lastName;
</script>- 超过80个字符的字符串应该使用字符串连接换行
- 注: 如果过度使用，长字符串连接可能会对性能有影响
<script>
// 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.';
</script>- 编程时使用join而不是字符串连接来构建字符串，特别是IE
<script>
var items,
messages,
length, 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] = messages[i].message;
}
return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}
</script>函数
- 函数表达式:
<script>
// 匿名函数表达式
var anonymous = function() {
return true;
};
// 有名函数表达式
var named = function named() {
return true;
};
// 立即调用函数表达式
(function() {
console.log('Welcome to the Internet. Please follow me.');
})();
</script>- 绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。
- 注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句.
<script>
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
if (currentUser) {
var test = function test() {
console.log('Yup.');
};
}
</script>- 绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.
<script>
// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}
</script>属性
- 当使用变量访问属性时使用中括号.
<script>
var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
</script>变量
- 总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。
<script>
// bad
superPower = new SuperPower();
// good
var superPower = new SuperPower();
</script>- 使用一个 var 以及新行声明多个变量，缩进4个空格。
<script>
// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';
// good
var items = getItems(),
goSportsTeam = true,
dragonball = 'z';
</script>- 最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。
<script>
// bad
var i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
var i, items = getItems(),
dragonball,
goSportsTeam = true,
len;
// good
var items = getItems(),
goSportsTeam = true,
dragonball,
length,
i;
</script>- 在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。
<script>
// 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;
}
return true;
}
// good
function() {
if (!arguments.length) {
return false;
}
var name = getName();
return true;
}
</script>条件表达式和等号
- 适当使用 === 和 !== 以及 == 和 !=
- 条件表达式的强制类型转换遵循以下规则：
- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
- 字符串 如果是空字符串 ” 则被计算为 false, 否则为 true
javascript
<script>
if ([0]) {
// true
// An array is an object, objects evaluate to true
}
</script>
- 使用快捷方式
<script>
// bad
if (name !== '') {
// ...stuff...
}
// good
if (name) {
// ...stuff...
}
// bad
if (collection.length > 0) {
// ...stuff...
}
// good
if (collection.length) {
// ...stuff...
}
</script>块
- 给所有多行的块使用大括号
<script>
// bad
if (test)
return false;
// good
if (test) return false;
// good
if (test) {
return false;
}
// bad
function() { return false; }
// good
function() {
return false;
}
</script>注释
注释要尽量简单，清晰明了。着重注释的意思，对不太直观的部分进行注解
JavaScript 的注释有两种”//” 和”/* …. */”
- 建议”//”用作代码行注释
- “/* …. */”形式用作对整个代码段的注销，或较正式的声明中，如函数参数、功能、文件功能等的描述中
- >另：复制粘贴应注意注释是否与代码对应。
- 使用 /* … / 进行多行注释，包括描述，指定类型以及参数值和返回值
<script>
// bad
// make() returns a new element
// based on the passed in tag name
//
// @param <String> tag
// @return <Element> element
function make(tag) {
// ...stuff...
return element;
}
// good
/**
* make() returns a new element
* based on the passed in tag name
*
* @param <String> tag
* @return <Element> element
*/
function make(tag) {
// ...stuff...
return element;
}
</script>- 使用 // 进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行.
<script>
// bad
var active = true; // is current tab
// good
// is current tab
var active = true;
// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
var type = this._type || 'no type';
return type;
}
// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
var type = this._type || 'no type';
return type;
}
</script>- 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解
<script>
function Calculator() {
// FIXME: shouldn't use a global here
total = 0;
return this;
}
function Calculator() {
// TODO: total should be configurable by an options param
this.total = 0;
return this;
}
</script>空白
将tab设为4个空格
// bad function() { ∙∙var name; } // bad function() { ∙var name; } // good function() { ∙∙∙∙var name; }大括号前放一个空格
// bad function test(){ console.log('test'); } // good function test() { console.log('test'); } // bad dog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog' }); // good dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog' });在做长方法链时使用缩进.
// bad $('#items').find('.selected').highlight().end().find('.open').updateCount(); // good $('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount(); // bad var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); // good var leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .class('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led);
逗号
不要将逗号放前面
// bad var once , upon , aTime; // good var once, upon, aTime; // bad var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // good var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' };不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。
// bad var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; // good var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ];
分号
语句结束一定要加分号
// bad (function() { var name = 'Skywalker' return name })() // good (function() { var name = 'Skywalker'; return name; })(); // good ;(function() { var name = 'Skywalker'; return name; })();
类型转换
- 在语句的开始执行类型转换.
字符串:
// => this.reviewScore = 9; // bad var totalScore = this.reviewScore + ''; // good var totalScore = '' + this.reviewScore; // bad var totalScore = '' + this.reviewScore + ' total score'; // good var totalScore = this.reviewScore + ' total score';对数字使用
parseInt并且总是带上类型转换的基数.var inputValue = '4'; // bad var val = new Number(inputValue); // bad var val = +inputValue; // bad var val = inputValue >> 0; // bad var val = parseInt(inputValue); // good var val = Number(inputValue); // good var val = parseInt(inputValue, 10); // good /** * parseInt was the reason my code was slow. * Bitshifting the String to coerce it to a * Number made it a lot faster. */ var val = inputValue >> 0;布尔值:
var age = 0; // bad var hasAge = new Boolean(age); // good var hasAge = Boolean(age); // good var hasAge = !!age;
命名约定
避免单个字符名，让你的变量名有描述意义。
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }当命名对象、函数和实例时使用驼峰命名规则
// bad var OBJEcttsssss = {}; var this_is_my_object = {}; var this-is-my-object = {}; function c() {}; var u = new user({ name: 'Bob Parr' }); // good var thisIsMyObject = {}; function thisIsMyFunction() {}; var user = new User({ name: 'Bob Parr' });当命名构造函数或类时使用驼峰式大写
// bad function user(options) { this.name = options.name; } var bad = new user({ name: 'nope' }); // good function User(options) { this.name = options.name; } var good = new User({ name: 'yup' });命名私有属性时前面加个下划线
_// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; // good this._firstName = 'Panda';当保存对
this的引用时使用_this.// bad function() { var self = this; return function() { console.log(self); }; } // bad function() { var that = this; return function() { console.log(that); }; } // good function() { var _this = this; return function() { console.log(_this); }; }
存取器
- 属性的存取器函数不是必需的
如果你确实有存取器函数的话使用getVal() 和 setVal(‘hello’)
// bad dragon.age(); // good dragon.getAge(); // bad dragon.age(25); // good dragon.setAge(25);如果属性是布尔值，使用isVal() 或 hasVal()
// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; }可以创建get()和set()函数，但是要保持一致
function Jedi(options) { options || (options = {}); var lightsaber = options.lightsaber || 'blue'; this.set('lightsaber', lightsaber); } Jedi.prototype.set = function(key, val) { this[key] = val; }; Jedi.prototype.get = function(key) { return this[key]; };
构造器
给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题。
function Jedi() { console.log('new jedi'); } // bad Jedi.prototype = { fight: function fight() { console.log('fighting'); }, block: function block() { console.log('blocking'); } }; // good Jedi.prototype.fight = function fight() { console.log('fighting'); }; Jedi.prototype.block = function block() { console.log('blocking'); };方法可以返回
this帮助方法可链。// bad Jedi.prototype.jump = function() { this.jumping = true; return true; }; Jedi.prototype.setHeight = function(height) { this.height = height; }; var luke = new Jedi(); luke.jump(); // => true luke.setHeight(20) // => undefined // good Jedi.prototype.jump = function() { this.jumping = true; return this; }; Jedi.prototype.setHeight = function(height) { this.height = height; return this; }; var luke = new Jedi(); luke.jump() .setHeight(20);可以写一个自定义的toString()方法，但是确保它工作正常并且不会有副作用。
function Jedi(options) { options || (options = {}); this.name = options.name || 'no name'; } Jedi.prototype.getName = function getName() { return this.name; }; Jedi.prototype.toString = function toString() { return 'Jedi - ' + this.getName(); };
事件
当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器
// bad $(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', function(e, listingId) { // do something with listingId });更好:
// good $(this).trigger('listingUpdated', { listingId : listing.id }); ... $(this).on('listingUpdated', function(e, data) { // do something with data.listingId });
模块
- 模块应该以
!开始，这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误 - 这个文件应该以驼峰命名，并在同名文件夹下，同时导出的时候名字一致
- 加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它
总是在模块顶部声明
'use strict';// fancyInput/fancyInput.js !function(global) { 'use strict'; var previousFancyInput = global.FancyInput; function FancyInput(options) { this.options = options || {}; } FancyInput.noConflict = function noConflict() { global.FancyInput = previousFancyInput; return FancyInput; }; global.FancyInput = FancyInput; }(this);
jQuery
缓存jQuery查询
// bad function setSidebar() { $('.sidebar').hide(); // ...stuff... $('.sidebar').css({ 'background-color': 'pink' }); } // good function setSidebar() { var $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... $sidebar.css({ 'background-color': 'pink' }); }对DOM查询使用级联的
$('.sidebar ul')或$('.sidebar ul')，jsPerf对有作用域的jQuery对象查询使用
find// bad $('.sidebar', 'ul').hide(); // bad $('.sidebar').find('ul').hide(); // good $('.sidebar ul').hide(); // good $('.sidebar > ul').hide(); // good (slower) $sidebar.find('ul'); // good (faster) $($sidebar[0]).find('ul');
3461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
