javascript十个最常用的自定义函数

悟透JavaScript
本文是"悟透JavaScript "一书中的第一部分,看后感觉非常不错,作者李战,此书已经出版,如果读者有兴趣可以点击一下链接查看更多信息 http://book.cnblogs.com/zt/wtjs/ 引子
编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总想改变这个世界。

你看，数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的，如果没有代码来施加外力，她总保持自己原来的状态。而代码就象能量，他存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下，数据可以转变为代码，而代码却又有可能被转变为数据，或许还存在一个类似E=MC2形式的数码转换方程呢。然而，就是在数据和代码间这种即矛盾又统一的运转中，总能体现出计算机世界的规律，这些规律正是我们编写的程序逻辑。
phphc.com

不过，由于不同程序员有着不同的世界观，这些数据和代码看起来也就不尽相同。于是，不同世界观的程序员们运用各自的方法论，推动着编程世界的进化和发展。

众所周知，当今最流行的编程思想莫过于面向对象编程的思想。为什么面向对象的思想能迅速风靡编程世界呢？因为面向对象的思想首次把数据和代码结合成统一体，并以一个简单的对象概念呈现给编程者。这一下子就将原来那些杂乱的算法与子程序，以及纠缠不清的复杂数据结构，划分成清晰而有序的对象结构，从而理清了数据与代码在我们心中那团乱麻般的结。我们又可以有一个更清晰的思维，在另一个思想高度上去探索更加浩瀚的编程世界了。

在五祖弘忍讲授完《对象真经》之后的一天，他对众弟子们说：“经已讲完，想必尔等应该有所感悟，请各自写个偈子来看”。大弟子神秀是被大家公认为悟性最高的师兄，他的偈子写道：“身是对象树，心如类般明。朝朝勤拂拭，莫让惹尘埃！”。此偈一出，立即引起师兄弟们的轰动，大家都说写得太好了。只有火头僧慧能看后，轻轻地叹了口气，又随手在墙上写道：“对象本无根，类型亦无形。本来无一物，何处惹尘埃？”。然后摇了摇头，扬长而去。大家看了慧能的偈子都说：“写的什么乱七八糟的啊，看不懂”。师父弘忍看了神秀的诗偈也点头称赞，再看慧能的诗偈之后默然摇头。就在当天夜里，弘忍却悄悄把慧能叫到自己的禅房，将珍藏多年的软件真经传授于他，然后让他趁着月色连夜逃走... 内容来自phphc.com

后来，慧能果然不负师父厚望，在南方开创了禅宗另一个广阔的天空。而慧能当年带走的软件真经中就有一本是《JavaScript真经》！

回归简单

要理解JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。

JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。这就好比中国古典的朴素唯物思想，把世界最基本的元素归为金木水火土，其他复杂的物质都是由这五种基本元素组成。

JavaScript中的代码只体现为一种形式，就是function。

注意：以上单词都是小写的，不要和Number, String, Object, Function等JavaScript内置函数混淆了。要知道，JavaScript语言是区分大小写的呀!

任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种，也就typeof返回值表明的类型。除此之外没有其他类型了。 copyright PHPHC

先说说简单数据类型吧。

undefined: 代表一切未知的事物，啥都没有，无法想象，代码也就更无法去处理了。
注意：typeof(undefined) 返回也是 undefined。
可以将undefined赋值给任何变量或属性，但并不意味了清除了该变量，反而会因此多了一个属性。

null: 有那么一个概念，但没有东西。无中似有，有中还无。虽难以想象，但已经可以用代码来处理了。
注意：typeof(null)返回object，但null并非object，具有null值的变量也并非object。

boolean: 是就是，非就非，没有疑义。对就对，错就错，绝对明确。既能被代码处理，也可以控制代码的流程。
copyright PHPHC

number: 线性的事物，大小和次序分明，多而不乱。便于代码进行批量处理，也控制代码的迭代和循环等。
注意：typeof(NaN)和typeof(Infinity)都返回number 。
NaN参与任何数值计算的结构都是NaN，而且 NaN != NaN 。
Infinity / Infinity = NaN 。

string: 面向人类的理性事物，而不是机器信号。人机信息沟通，代码据此理解人的意图等等，都靠它了。

简单类型都不是对象，JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。
内容来自phphc.com

所谓“对象化”，就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力。

javascript十个最常用的自定义函数
如果不使用类库或者没有自己的类库，储备一些常用函数总是有好处的。 （10）addEvent 网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现： 01.function addEvent(elm, evType, fn, useCapture) { 02. if (elm.addEventListener) { 03. elm.addEventListener(evType, fn, useCapture);//DOM2.0 04. return true; 05. } 06. else if (elm.attachEvent) { 07. var r = elm.attachEvent('on' + evType, fn);//IE5+ 08. return r; 09. } 10. else { 11. elm['on' + evType] = fn;//DOM 0 12. } 13.} 下面是Dean Edwards 的版本 01.function addEvent(elm, evType, fn, useCapture) { 02. if (elm.addEventListener) { 03. elm.addEventListener(evType, fn, useCapture);//DOM2.0 04. return true; 05. } 06. else if (elm.attachEvent) { 07. var r = elm.attachEvent('on' + evType, fn);//IE5+ 08. return r; 09. } 10. else { 11. elm['on' + evType] = fn;//DOM 0 12. } 13.} 下面是Dean Edwards 的版本 01.// addEvent/removeEvent written by Dean Edwards, 2005 02.// with input from Tino Zijdel 03.// http://dean.edwards.name/weblog/2005/10/add-event/ 04.function addEvent(element, type, handler) { 05. //为每一个事件处理函数分派一个唯一的ID 06. if (!handler.$$guid) handler.$$guid = addEvent.guid++; 07. //为元素的事件类型创建一个哈希表 08. if (!element.events) element.events = {}; 09. //为每一个"元素/事件"对创建一个事件处理程序的哈希表 10. var handlers = element.events[type]; 11. if (!handlers) { 12. handlers = element.events[type] = {}; 13. //存储存在的事件处理函数(如果有) 14. if (element["on" + type]) { 15. handlers[0] = element["on" + type]; 16. } 17. } 18. //将事件处理函数存入哈希表 19. handlers[handler.$$guid] = handler; 20. //指派一个全局的事件处理函数来做所有的工作 21. element["on" + type] = handleEvent; 22.}; 23.//用来创建唯一的ID的计数器 24.addEvent.guid = 1; 25.function removeEvent(element, type, handler) { 26. //从哈希表中删除事件处理函数 27. if (element.events && element.events[type]) { 28. delete element.events[type][handler.$$guid]; 29. } 30.}; 31.function handleEvent(event) { 32. var returnValue = true; 33. //抓获事件对象(IE使用全局事件对象) 34. event = event || fixEvent(window.event); 35. //取得事件处理函数的哈希表的引用 36. var handlers = this.events[event.type]; 37. //执行每一个处理函数 38. for (var i in handlers) { 39. this.$$handleEvent = handlers[i]; 40. if (this.$$handleEvent(event) === false) { 41. returnValue = false; 42. } 43. } 44. return returnValue; 45.}; 46.//为IE的事件对象添加一些“缺失的”函数 47.function fixEvent(event) { 48. //添加标准的W3C方法 49. event.preventDefault = fixEvent.preventDefault; 50. event.stopPropagation = fixEvent.stopPropagation; 51. return event; 52.}; 53.fixEvent.preventDefault = function() { 54. this.returnValue = false; 55.}; 56.fixEvent.stopPropagation = function() { 57. this.cancelBubble = true; 58.}; 功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。 另，我还珍藏了一个HTML5工作组的版本： 01.var addEvent=(function(){ 02. if(document.addEventListener){ 03. return function(el,type,fn){ 04. if(el.length){ 05. for(var i=0;i<el.length;i++){ 06. addEvent(el[i],type,fn); 07. } 08. }else{ 09. el.addEventListener(type,fn,false); 10. } 11. }; 12. }else{ 13. return function(el,type,fn){ 14. if(el.length){ 15. for(var i=0;i<el.length;i++){ 16. addEvent(el[i],type,fn); 17. } 18. }else{ 19. el.attachEvent('on'+type,function(){ 20. return fn.call(el,window.event); 21. }); 22. } 23. }; 24. } 25.})(); （9）addLoadEvent（） 我以前讨论过这函数，不细说，就是慢了一点，各大类库基本无视它，自行实现domReady版本。下面是Simon Willison 的实现： 01.var addLoadEvent = function(fn) { 02. var oldonload = window.onload; 03. if (typeof window.onload != 'function') { 04. window.onload = fn; 05. }else { 06. window.onload = function() { 07. oldonload(); 08. fn(); 09. } 10. } 11.} （8） getElementsByClass（） 我有收集癖，手头上拥有许多版本，最后集思广益自己实现了一个。下面是我的实现： 01.var getElementsByClassName = function (searchClass, node,tag) { 02. if(document.getElementsByClassName){ 03. return document.getElementsByClassName(searchClass) 04. }else{ 05. node = node || document; 06. tag = tag || "*"; 07. var classes = searchClass.split(" "), 08. elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 09. patterns = [], 10. returnElements = [], 11. current, 12. match; 13. var i = classes.length; 14. while(--i >= 0){ 15. patterns.push(new RegExp("(^|//s)" + classes[i] + "(//s|$)")); 16. } 17. var j = elements.length; 18. while(--j >= 0){ 19. current = elements[j]; 20. match = false; 21. for(var k=0, kl=patterns.length; k<kl; k++){ 22. match = patterns[k].test(current.className); 23. if (!match) break; 24. } 25. if (match) returnElements.push(current); 26. } 27. return returnElements; 28. } 29.} （7）cssQuery（） 别名为getElementsBySeletor，由Dean Edwards最先实现，Prototype.js，JQuery等类库都有相应实现，其中JQuery把它整合到$（）选择器中，名声盖过其前辈。不过IE8等新锐浏览器已经实现querySelector与querySelectorAll方法，待到IE6与IE7报废之日，它就无用了。无忧里有它的实现原理讲解。由于太长，就不粘出来了，具体可到原作者网站看看。