host on Github
http://www.w3.org/wiki/JavaScript_best_practices
Call things by their name — easy, short and readable variable and function names
bad:
var x1, x2;
var incrementorForMainLoopWhichSpansFromTenToTwenty;
good:
function isLegalDrinkingAge()
匈牙利命名法(Hungarian notation),可以方便地知道变量的类型:
sFamilyName: 字符串
oMember: 对象
bIsLegal: 布尔
使用英语。
让你的代码讲故事,让别人像读故事一样读懂你的代码。
原因显而易见,那如何避免呢?
bad:
var current = null;
function init(){…};
function change(){…};
function verify(){…};
1.定义成一个对象:
var myNameSpace = {
current: null,
init: function(){…},
change: function(){…},
verify: function(){...}
};
缺点:每一个需要调用的地方,都要带上对象的名字。比如:
myNameSpace.init();
2.通过一个匿名方法包裹(模块模式):
myNameSpace = function(){
var current = null;
function init(){…}
function change(){…}
function verify(){…}
}();
缺点:外部不能访问。如果给外部提供调用,就要将特定的内容return出去:
3.
myNameSpace = function(){
var current = null;
function verify(){…}
return{
init:function(){…}
change:function(){…}
}
}();
4.最佳实践:
myNameSpace = function(){
var current = null;
function init(){…}
function change(){…}
function verify(){…}
return{
init:init,
change:change
}
}();
不直接返回变量或方法,而是返回指向它们的指针。这样的话,不非得通过myNameSpace来访问其中的变量和方法。
另外,可以以另外的名字(更为简短的)来返回,如return {set: change};
5.如果不想暴露任何信息到外部,直接包起来即可:
function(){
var current = null;
function init(){…}
function change(){…}
function verify(){…}
return{
init:init,
change:change
}
}();
浏览器对于js很是宽容,但这不表明你就可以随意写。
JSLint
单行注释(//),如果只是通过删除空格空行压缩的话,会出问题。
对于多行注释的一个技巧:在注释结束符之前写两个反杠(//),这样可以通过在注释开始符前增加或删除 //
来打开或关闭代码块:
/*
function init() {
}
// */
打开代码块:
// /*
function init() {
}
// */
比如在js里面直接对元素的样式值(类似 color, font-size)进行修改,而是通过操作元素的class值来实现。
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';
==>
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
数组:
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
==>
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys'
];
条件判断使用三目运算符:
var a = (x ? 100) ? 1 : -1;
赋值:
var x = v || 10;
当v不存在值,把x设为 10。
保持函数功能的单一也方便其他人维护。
对于方法,要有输入,有输出,而不是把功能都方在方法内部。
在浏览器禁用javascript的情况下,保证主要功能可用。
bad:
for(var i = 0; i < arr.length; i++) {…}
good:
for(var i = 0, iMax = arr.length; i < iMax; i++) {…}
不要只针对某个浏览器或某个版本进编码,尽量使编码标准代码。如果必须这样做,将文件单独放起来,
并以浏览器名称及版本号命名。
对于数据,在处理之前要多加验证。
bad:
在javascript代码中掺杂了大量的html
good:
加载模板创建html内容
选择一个适合自己项目的js库。尽量不要同时使用多个库
comments powered by Disqus