《早该知道的7个 JavaScript 技巧》由会员分享，可在线阅读，更多相关《早该知道的7个 JavaScript 技巧（11页珍藏版）》请在金锄头文库上搜索。
1、早该知道的 7 个 JavaScript 技巧我写 JavaScript 代码已经很久了，都记不起是什么年代开始的了。对于JavaScript 这种语言近几年所取得的成就，我感到非常的兴奋；我很幸运也是这些成就的获益者。我写了不少的文章，章节，还有一本专门讨论它的书，然而，我现在依然能发现一些关于这种语言的新知识。下面的描述的就是过去让我不由得发出“啊！”的感叹的编程技巧，这些技巧你应该现在就试试，而不是等着未来的某个时候偶然的发现它们。简洁写法简洁写法JavaScript 里我最喜欢的一种东西就是生成对象和数组的简写方法。在过去，如果你想创建一个对象，你需要这样：var car = new
2、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 moviesTh
3、atNeedBetterWriters = new Array(Transformers,Transformers2,Avatar,Indiana Jones 4);简写版的是这样：var moviesThatNeedBetterWriters = Transformers,Transformers2,Avatar,Indiana Jones 4 ;对于数组，这里有个问题，其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ，就像这样 var car = new Array(); carcolour = red; carwheels = 4; carhubcaps = spinni
4、ng; carage = 4;数组不是万能的；这样写不对，会让人困惑。图组实际上是对象的功能，人们混淆了这两个概念。另外一个非常酷的简写方法是使用与三元条件符号。你不必写成下面的样子var direction; if(x function delicious(o)var out = ;for(var i=0;i + oi.d + ;out += ;document.getElementById(delicious).innerHTML = out;这是调用 Delicious 网站提供的 Web service 功能，获得 JSON 格式的最近的无序书签列表。基本上，JSON 是最轻便的描述复
5、杂数据结构的方法，而且它能在浏览器里运行。你甚至可以在 PHP 里用json_decode() 函数来运行它。JavaScript 的自带函数(Math, Array 和 String)让我感到惊奇的一个事情是，当我研究了JavaScript 里的math和String函数后，发现它们能极大的简化我的编程劳动。使用它们，你可以省去复杂的循环处理和条件判断。例如，当我需要实现一个功能，找出数字数组里最大的一个数时，我过去是这样写出这个循环的，就像下面： var numbers = 3,342,23,22,124; var max = 0; for(var i=0;i max)max = numb
6、ersi; alert(max);我们不用循环也能实现：var numbers = 3,342,23,22,124; numbers.sort(function(a,b)return b - a); alert(numbers0);需要注意的是，你不能对一个数字字符数组进行 sort() ，因为这种情况下它只会按照字母顺序进行排序。如果你想知道更多的用法，可以阅读 这篇不错的关于 sort() 的文章的文章。再有一个有意思的函数就是 Math.max()。这个函数返回参数里的数字里最大的一个数字： Math.max(12,123,3,2,433,4); / returns 433因为这个函数能
7、够校验数字，并返回其中最大的一个，所以你可以用它来测试浏览器对某个特性的支持情况：var scrollTop= Math.max(doc.documentElement.scrollTop,doc.body.scrollTop );这个是用来解决 IE 问题的。你可以获得当前页面的 scrollTop 值，但是根据页面上 DOCTYPE的不同，上面这两个属性中只有一个会存放这个值，而另外一个属性会是 undefined，所以你可以通过使用 Math.max() 得到这个数。阅读这篇文章你会得到更多的关于使用数学函数来简化简化 JavaScript 的知识的知识。另外有一对非常有用的操作字符串的
8、函数是 split() 和 join()。我想最有代表性的例子应该是，写一个功能，用来给页面元素附加 CSS 样式。是这样的，当你给页面元素附加一个 CSS class 时，要么它是这个元素的第一个 CSS class，或者是它已经有了一些 class, 需要在已有的 class 后加上一个空格，然后追加上这个 class。而当你要去掉这个 class 时，你也需要去掉这个class 前面的空格(这个在过去非常重要，因为有些老的浏览器不认识后面跟着空格的 class)。于是，原始的写法会是这样：function addclass(elm,newclass)var c = elm.classNa
9、me;elm.className = (c = ) ? newclass : c+ +newclass; 你可以使用 split() 和 join() 函数自动完成这个任务： function addclass(elm,newclass)var classes = elm.className.split( );classes.push(newclass);elm.className = classes.join( ); 这会确保所有的 class 都被空格分隔，而且你要追加的 class 正好放在最后。事件委派事件委派Web 应用都是由事件驱动运转的。我喜欢事件处理，尤其喜欢自己定义事件。它能
10、使你的产品可扩展，而不用改动核心代码。有一个很大的问题（也可以说是功能强大的表现），是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器，事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题 (这尤其让一些新手头疼) ，以及像 IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题，你不得不承认尽量少使用事件编程是个明智的做法。于是 事件委托 就出现了。当页面上某个元素上的事件触发时，而在 DOM 继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处
11、理。究竟是什么意思？这样说吧，页面上有很多超链接，你不想直接使用这些链接，想通过一个函数来调用这个链接，HTML 代码是这样的：Great Web resourcesOpera Web Standards CurriculumSitepointA List ApartYUI BlogBlame it on the voicesOddly specific常见的做法是通过循环这些链接，将每个链接上附加一个事件处理器：/ Classic event handling example (function()var resources = document.getElementById(resourc
12、es);var links = resources.getElementsByTagName(a);var all = links.length;for(var i=0;iall;i+)/ Attach a listener to each linklinksi.addEventListener(click,handler,false);function handler(e)var x = e.target; / Get the link that was clickedalert(x);e.preventDefault(); )();我们用一个事件处理器也能完成这项任务：(function(
13、)var resources = document.getElementById(resources);resources.addEventListener(click,handler,false);function handler(e)var x = e.target; / get the link thaif(x.nodeName.toLowerCase() = a)alert(Event delegation: + x);e.preventDefault(); )();因为点击事件就发生在这些页面元素里，你要做的就是比较它们的 nodeName，找出应该回应这个事件的那个元素。免责声明：
14、上面说的这两个关于事件的例子，在所有浏览器里都能运行，除了IE6，在 IE6 上你需要使用一个事件模型，而不是简单的 W3C 的标准实现。这也就是我们推荐使用一些工具包的原因。这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想，举个例子，你需要动态的往这个链接表里追加更多的链接。使用事件委托后，你就不需要做其它修改了；否则的话，你需要重新循环这个链接表，重新给每个链接安装事件处理器。匿名函数和模块化匿名函数和模块化在 JavaScript 里最令人懊恼的事情是变量没有使用范围。任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的，这就是说，这个页面上的其它脚本也可以访问它，
15、而且可以覆盖重写它。解决办法是，把你的变量放在一个匿名函数内部，定义完之后立即调用它。例如，下面的写法将会产生三个全局变量和两个全局函数：var name = Chris; var age = 34; var status = single; function createMember()/ . function getMemberDetails()/ . 如果这个页面上的其它脚本里也存在一个叫 status 的变量，麻烦就会出现。如果我们把它们封装在一个myApplication 里，这个问题就迎刃而解了： var myApplication = function()var name = C
16、hris;var age = 34;var status = single;function createMember()/ .function getMemberDetails()/ . ();但是，这样一来，在函数外面就没有什么功能了。如果这是你需要的，那就可以了。你还可以省去函数的名称：(function()var name = Chris;var age = 34;var status = single;function createMember()/ .function getMemberDetails()/ . )();如果你想在函数外面也能使用里面的东西，那就要做些修改。为了能访问cr
