早该知道的 7 个JavaScript 技巧[转]

简洁写法

对象的简写
在过去，如果你想创建一个对象，你需要这样：

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法能够达到同样的效果：

var car = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
}

这样就简单多了，你不需要反复使用这个对象的名称。
这样 car 就定义好了，也许你会遇到 invalidUserInSession 的问题，这只有你在使用IE时会碰到，只要记住一点，不要右大括号前面写分号，你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样：

var moviesThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4');

简写版是这样：

var moviesThatNeedBetterWriters = [
'Transformers','Transformers2','Avatar','Indiana Jones 4'];

对于数组，这里有个问题，其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ，就像这样：

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

数组不是万能的；这样写不对，会让人困惑。图组实际上是对象的功能，人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子：

var band = {
"name":"The Red Hot Chili Peppers",
"members":
[
{
"name":"Anthony Kiedis",
"role":"lead vocals"
},
{
"name":"Michael 'Flea' Balzary",
"role":"bass guitar, trumpet, backing vocals"
},
{
"name":"Chad Smith",
"role":"drums,percussion"
},
{
"name":"John Frusciante",
"role":"Lead Guitar"
}
],
"year":"2009"
}

<div id="delicious"></div>
<script>
function delicious(o){
var out = '<ul>';
for(var i=0;i<o.length;i++)
{
out += '<li><a href="' + o[i].u + '">' + o[i].d + '</a></li>';
}
out += '</ul>';

document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

<h2>Great Web resources</h2>
<ul id="resources">
<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
<li><a href="http://sitepoint.com/">Sitepoint</a></li>
<li><a href="http://alistapart.com/">A List Apart</a></li>
<li><a href="http://yuiblog.com/">YUI Blog</a></li>
<li><a href="http://blameitonthevoices.com/">Blame it on the voices</a></li>
<li><a href="http://oddlyspecific.com/">Oddly specific</a></li>
</ul>

// 典型的事件处理例子
(function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var all = links.length;

for(var i=0;i<all;i++)
{
// Attach a listener to each link
links[i].addEventListener('click',handler,false);
};
function handler(e)
{
var x = e.target; // Get the link that was clicked
alert(x);
e.preventDefault();
};
})();

(function(){
var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);

function handler(e)
{
var x = e.target; // get the link tha

if(x.nodeName.toLowerCase()== 'a')
{
alert('Event delegation:' + x);
e.preventDefault();
}
};
})();

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';

function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
}();

var myApplication = function()
{
var name = 'Chris';
var age = '34';
var status = 'single';

return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
//myApplication.createMember() 和
//myApplication.getMemberDetails() 就可以使用了。

var myApplication = function()
{
var name = 'Chris';
var age = '34';
var status = 'single';

function createMember(){
// [...]
}

function getMemberDetails(){
// [...]
}

return{
create:createMember,
get:getMemberDetails
}
}();
//现在写成 myApplication.get() 和 myApplication.create() 就行了。

我把这个称作 “revealing module pattern.”

可配置化

一旦我把所写的JavaScript代码发布到这个世界上，就有人想改动它，通常是人们想让它完成一些它本身完成不了的任务—但通常也是我写的程序不够灵活，没有提供用户可自定义的功能。

解决办法是给你的脚本增加一个配置项对象。
我 曾经写过一篇深入介绍JavaScript配置项对象的文章，下面是其中的要点：

@ 在你的脚本了添加一个叫做

configuration

的对象。
@ 这个对象里面，存放所有人们在使用这个脚本时经常要改动的东西：
* CSS ID 和类名称;
* 按钮的名称，标签字等;
* 诸如”每页显示图片数”的值， “图像的显示的尺寸”的值;
* 地点，位置，以及语言设置。
@ 将这个对象作为一个公用属性返回给用户，这样用户可以修改覆盖它。

通常情况下这是你编程过程中的最后一步要做的事情。我把这些集中表现在了一个例子里： “Five things to do to a script before handing it over to the next developer.”

实际上，你也希望你的代码能够让人们很方面的使用，并且根据他们各自的需要进行一些改动。
如果你实现了这个功能，你会少收到一些抱怨你的脚本的人发送给你的让你困惑的邮件，这些信件会告诉你，有人修改了你的脚本，而且很好用。

与后台交互

在这么多年的编程经历中，我所领悟到的一个重要的事情就是，JavaScript是一个很优秀的开发界面交互的语言，但如果用来处理数字或访问数据源，那就有点使不上劲了。

最初，我学习JavaScript，是用来替代Perl的，因为我很讨厌非要把代码拷贝到

cgi-bin

文件夹下才能使Perl运行。
后来，我明白了应该使用一种后台工作的语言来处理主要的数据，而不能什么事情都让JavaScript去做。更重要的是我们要考虑安全性和语言特征。

如果我访问一个Web service, 我可以获取到JSON-P 格式的数据，在客户端浏览器里我把它做各种各样的数据转换，但当我有了服务器时，我有了更多的方法来转换数据，我可以在Server端生成JSON或HTML格式的数据返回给客户端，以及缓存数据等操作。
如果你事先了解了并准备了这些，你会长期收益，省去了很多头疼的时间。

编写适用各种浏览器的程序是种浪费时间，使用工具包吧！

在我最初开始搞Web开发时，在访问页面时，究竟是使用

document.all

还是使用

document.layers

的问题上痛苦的挣扎了很久。
我选择了

document.layers

，因为我喜欢任何层都是自己的document的思想 (而且我写了太多的

document.write

来生成元素)。
层模式最终失败了，于是我开始使用

document.all

。
当Netscape 6 公布只支持 W3C DOM 模型时，我很高兴，但其实用户并不关心这些。
用户只是看见这种浏览器不能显示大多数浏览器都能正常显示的东西—这是我们编码的问题。
我们编写了短视的代码，只能运行在当前的环境下，而不幸的是，我们的运行环境却在不停的改变。

我已经浪费了太多的时间来处理对各种浏览器各种版本兼容的问题。
善于处理这类问题提供了我一个好的工作机会。但现在我们不必在忍受这种痛苦了。

一些工具包，例如 YUI, jQuery 以及 Dojo 都能够帮我们处理这类问题。
它们通过抽象各种接口实现来处理浏览器的各种问题，像版本不兼容，设计缺陷等，把我们从痛苦中解救出来。
除非你要测试某个Beta版的浏览器，千万不要在自己的程序里添加修正浏览器的缺陷的代码，因为你很有可能当浏览器已经修改了这个问题时，你却忘了删除你的代码。

另一方面，完全依赖于工具包也是个短视的行为。工具包可以帮你快速的开发，但如果你不深入理解JavaScript，你也会做错事。

原文地址：http://www.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

转载地址：http://www.aqee.net/2010/05/06/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/