JavaScript 新手24条实用建议[TUTS+](2)

引用: “没那么多繁文缛节来烦你;你就信我一次好了(或者你也可以自己试一试)—— 这真的是迄今能找到的最快办法了!

用点土办法,也别管它背后究竟发生了什么抽象的东西,通常土办法都比那些优雅的办法要快捷得多!”

– James Padolsey, james.padolsey.com

8. 减少全局变量

引用: “把你踩在全局的那些乱七八糟的脚印都归于一人名下,能显著降低与其他应用、小工具或JS库冲突的可能性。”

– Douglas Crockford

复制内容到剪贴板 代码:var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name

更好的写法

复制内容到剪贴板 代码:var DudeNameSpace = {
   name : 'Jeffrey',
   lastName : 'Way',
   doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

注意看,我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的。

9. 写好注释

可能一开始你会觉得并无必要,但相信我,你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时,结果却发现很难想起当时写某句东西时脑子在想的什么了,是不是很让人沮丧呢?或者,如果有同事要修订你的代码呢?一定,一定要为你代码里的重要部分加上注释。

复制内容到剪贴板 代码:// 遍历数组,输出各自名称
for(var i = 0, len = array.length; i < len; i++) {
   console.log(array);
}

10. 试试渐进增强

一定要记得为未启用JavaScript的情况提供替代方案。大家可能会认为,“大部分我的访客都启用了JavaScript的,我才不用担心”。这样的话,你可就大错特错了!

你有没有试过看看禁用JavaScript后你那漂亮的滑动器都成啥样了?(你可以下载 Web Developer ToolBar 轻松完成这项任务。)禁用之后你的网站可能就彻底失去了可用性!经验之谈:开发初期总是按照没有JavaScript来设计你的网站,之后再进行渐进地功能增强,小心翼翼地改变你地布局。

11. 不要传递字串给 “setInterval” 或 “setTimeout”

看看下面的代码:

复制内容到剪贴板 代码:setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

不仅执行不高效,而且和 eval 函数有着同样的高风险。千万不要把字串传递给 setInterval 和 setTimeout。恰当的做法是,传递一个函数名:

复制内容到剪贴板 代码:setInterval(someFunction, 3000);

12. 不要使用with语句

初识之下,“with”语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如:

复制内容到剪贴板 代码:with (being.person.man.bodyparts) {
   arms = true;
   legs = true;
}

– 等价于 —

复制内容到剪贴板 代码:being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

不幸的是,测试表明,若你要为对象插入新成员,with的表现非常糟糕,它的执行速度非常缓慢。替代方案是声明一个变量:

复制内容到剪贴板 代码:var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. 使用 {},而不用New Object()

在JavaScript有多种方式能新建对象。最传统的方法是 new 语句,如下:

复制内容到剪贴板 代码:var o = new Object();
o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
   console.log(this.name);
}

不过,这一方法读起来却比较糟糕。我强烈建议你采用下面这种在文字样式上更为强健的写法:

更好的写法

复制内容到剪贴板 代码:var o = {
   name: 'Jeffrey',
   lastName = 'Way',
   someFunction : function() {
      console.log(this.name);
   }
};

注意,如果你想新建一个空对象,用 {} 就能行:

复制内容到剪贴板 代码:var o = {};

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwgsj.html