研究了一年多的js，也差不多写一个自己的js库了。我写这个不算框架，只是一个小型的js工具库，所以我用的名字是Library。主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。
这个工具库的主要特点是：
【跨浏览器】能在以下浏览器使用：IE6，IE7，IE8，Firefox 3.5.3，Chrome 3.0，Safari 4.0.3，Opera 10.10ie系列是必须的，其他能支持最新版本就够了。
【使用命名空间】当然不是真正“命名空间”，只是一些全局变量，用途相似而已。有如下命名空间：$$：代表Object，保存对象相关方法，也代替最常用的getElementById方法；$$B：代表Browser，保存浏览器信息；$$A：代表Array，保存数组和类数组的相关方法；$$F：代表Function，保存函数的相关方法；$$D：代表Dom，文档对象的相关操作和方法；$$E：代表Event，dom事件的相关操作和兼容处理；$$CE：代表CustomEvent，用于程序对象的自定义事件；$$S：代表String，保存字符串的相关方法。虽然我不反对有节制地扩展原生对象，但可以的话还是避免命名污染吧。用多个命名空间（而不用单个）只因管理容易，用起来方便。用两个$，不是要更多美刀（虽然很想），而是避免跟流行的框架冲突。使用全部变量时我没有用window.x的形式，因为那样会导致一些问题，具体参考这里。
【使用匿名函数】貌似是jquery发扬光大的，就是把代码嵌在一个function里面。其实就是利用闭包，一来可以使用局部变量，二来可以防止命名冲突。
【使用对象检测】“对象检测天生地优于浏览器检测”，出自“ppk谈JavaScript”的真理。能用对象检测的都尽量用，当然有些实在太难搞的也不要太执着。对象检测方面jQuery的support做的很好，建议去看一下。
追求目标是：
【小体积】这里的体积不是说字符的多少，而是属性和方法的数量。工具库的属性和方法必须是很有用的，最好是“不得不加”的。当然随着使用的增加，工具库也会慢慢的扩大，但要坚持这个原则。
【高效率】高效是不变的追求，当然是在权衡利弊之后。说到高效不得不佩服一下google，它不但代码追求效率，而且下载的代码是已经经过浏览器检测的。具体可以自己用各个浏览器下载看看试试。
建立目的是：
【整合常用方法】把常用的方法整合到一起，既利于代码复用，也便于维护。但也不可避免地添加一些无关的方法，从而增加了代码量，降低了效率。
【解决兼容问题】解决一些常见的兼容性问题，减轻编码负担。
各个部分说明
【Object】
命名空间是：$$
$$本身就是最常用的方法：document.getElementById它还包括以下几个方法：extend、deepextend和wrapper。其中extend跟prototype.js的Object.extend是一样的，用来扩展对象，是用得最久的方法之一了。而deepextend是深度扩展，这里的深度跟深度复制里面的意思差不多，参考的是jQuery的extend。
emptyFunction保存了一个空的function，主要用来代替空function节省资源。
wrapper就复杂一点，主要用来做继承，主要参考有啊的$extends（跟prototype的Class.create也类似）。wrapper是$extends的简化版，只保留了关键的几个部分：
代码 O.wrapper = function (me, parent) { var ins = function () { me.apply( this , arguments); }; var subclass = function () {}; subclass.prototype = parent.prototype; ins.prototype = new subclass; return ins;};跟传统原型继承的区别是用了一个空的函数作为初始化程序，防止非prototype属性方法的继承。
【Browser】
命名空间是：$$B
通过userAgent获取浏览器信息，主要获取浏览器的类型和版本。这里基本是参考有啊的Browser，要了解这部分首先要知道各浏览器的userAgent。下面是各浏览器（ie系列和其他浏览器的最新版）的userAgent：ie6Mozilla/4.0 (compatible; MSIE 6.0; ...)ie7Mozilla/4.0 (compatible; MSIE 7.0; ...)ie8Mozilla/4.0 (compatible; MSIE 8.0; ...)ffMozilla/5.0 (...) Gecko/20090824 Firefox/3.5.3chromeMozilla/5.0 (...) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.27 Safari/532.0safariMozilla/5.0 (...) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1operaOpera/9.80 (...) Presto/2.2.15 Version/10.10
先通过判断特有字符来判断浏览器类型：
var b = { msie: / msie / .test(ua) && ! / opera / .test(ua), opera: / opera / .test(ua), safari: / webkit / .test(ua) && ! / chrome / .test(ua), firefox: / firefox / .test(ua), chrome: / chrome / .test(ua)};获取版本信息就比较麻烦，有啊Browser的方法就比较巧妙(有修改)：
var vMark = "" ; for ( var i in b) { if (b[i]) { vMark = " safari " == i ? " version " : i; break ; }}b.version = vMark && RegExp( " (?: " + vMark + " )[\\/: ]([\\d.]+) " ).test(ua) ? RegExp.$ 1 : " 0 " ;但参考上面的userAgent会发现opera的获取应该也是用"version"才对啊，问题是它在10之前的userAgent是这样的：Opera/9.99 (...) Presto/9.9.9并没有用"version"，为了适用大部分情况还是不要用"version"好了，而且这个判断用的也不多。
【Array】
命名空间是：$$A
里面包括以下方法：isArray, forEach, map, filter, every, some, indexOf, lastIndexOf以上方法除了isArray，都是JavaScript 1.6里数组增加的方法。
其中isArray用来判断对象是否数组，indexOf和lastIndexOf是元素定位方法，其他几个是迭代方法。在自定义的这些迭代方法，不但能应用在数组上，还能应用在类数组，像NodeList，arguments这些对象，也能应用在一般的对象上。
这里我参考了爱民的JSEnhance.js的数组扩展部分，对这几个自定义迭代方法中相同的结构进行整合。首先定义一个基本的迭代函数each：
Code function each( object, callback ) { if ( undefined === object.length ){ for ( var name in object ) { if (false === callback( object[name], name, object )) break; } } else { for ( var i = 0, len = object.length; i < len; i++ ) { if (i in object) { if (false === callback( object[i], i, object )) break; } } }};当有length属性（数组或类数组）时根据索引迭代，否则用for...in历遍对象的属性。由于在方法的说明中规定了"elements that are deleted are not visited"，所以要用if (i in object)来判断一下。要注意的是当callback返回false时会跳出循环，利用callback的返回值，就可以在callback内部间接控制外部的跳出操作了。
然后准备自定义的迭代方法：
代码 each({ forEach: function ( object, callback, thisp ){ each( object, function (){ callback.apply(thisp, arguments); } ); }, map: function ( object, callback, thisp ){ var ret = []; each( object, function (){ ret.push(callback.apply(thisp, arguments)); }); return ret; }, filter: function ( object, callback, thisp ){ var ret = []; each( object, function (item){ callback.apply(thisp, arguments) && ret.push(item); }); return ret; }, every: function ( object, callback, thisp ){ var ret = true ; each( object, function (){ if ( ! callback.apply(thisp, arguments) ){ ret = false ; return false ; }; }); return ret; }, some: function ( object, callback, thisp ){ var ret = false ; each( object, function (){ if ( callback.apply(thisp, arguments) ){ ret = true ; return false ; }; }); return ret; } }迭代部分给each来做，这里只要控制callback的具体操作就可以了。这里利用了闭包，使callback可以修改迭代方法的返回值。every和some就利用callback的返回值跳出循环。
定义好这些方法后，再用each历遍这些方法，并加入到命名空间中：
Code each( , function(method, name){ ret[name] = function( object, callback, thisp ){ if (object[name]) { return object[name]( callback, thisp ); } else { return method( object, callback, thisp ); } } });在方法执行时，会先判断对象本身有没有指定的方法，没有的话才使用自定义的迭代方法。
【Function】
命名空间是：$$F
里面现在只有两个方法：bind和bindAsEventListener。这两个是prototype.js里面的经典方法了，是用来给function绑定this的。原理是利用call/apply改变调用方法的对象：
var args = slice.call(arguments, 2 ); return function () { return fun.apply(thisp, args.concat(slice.call(arguments)));}其中用到Array.prototype.slice把arguments对象转成数组，不知道是谁发现的，知道这个用法就行了。ps：不止slice，其他像concat，join等也能这样使用。
bindAsEventListener跟bind不同的是会把第一个参数设定为event对象，专门用在事件回调函数中：
var args = slice.call(arguments, 2 ); return function (event) { return fun.apply(thisp, [E.fixEvent(event)].concat(args));}其中用到fixEvent处理event的兼容性，后面Event的部分会详细说明。
【Dom】
命名空间是：$$D
这部分是工具库中最大，最复杂也最重要的部分。主要是储存了一些Dom操作，并解决一般的兼容性问题。
其中getScrollTop和getScrollLeft分别是获取文档滚动的scrollTop和scrollLeft。一般来说如果在标准模式下应该用documentElement获取，否则用body获取。但chrome和safari（都是用WebKit渲染引擎）即使在标准模式下也要用body来获取。这里用的方法是：
var doc = node ? node.ownerDocument : document; return doc.documentElement.scrollTop || doc.body.scrollTop;优先获取documentElement的再选择body的，这样就基本能解决了。但这个其实是不完善的，如果给文档添加如下样式：
body { height : 300px ; overflow : scroll ; width : 500px ; }在ie6/7会发现在标准模式下body的部分会按指定高度和宽度呈现，而且能带滚动条。就是说documentElement和body能各自设置scrollTop。那这个时候该获取哪个就说不清了，还好一般情况并不需要这样设置的（至少我是没碰过）。对于这样的特例，知道有这个情况就行了，没必要为了它增加太多代码。ps：获取的scrollLeft/scrollLeft是不会有负值的。
contains方法是判断参数1元素对象是否包含了参数2元素对象。主要利用ie的contains和w3c的compareDocumentPosition来判断。具体参考这里的比较文档位置部分。
有两个元素坐标相关的方法：rect和clientRect。其中rect是相对浏览器文档的位置，clientRect是相对浏览器视窗的位置。当支持getBoundingClientRect时，利用它配合getScrollLeft/getScrollTop获取文档位置。否则用循环获取offsetParent的offsetLeft/offsetTop的方式获取。具体参考这里的比较元素位置部分。
还有三个样式相关的方法：curStyle、getStyle、setStylecurStyle是用来获取元素的最终样式表的，根据支持情况返回getComputedStyle(w3c)或currentStyle(ie)。ps：这里要优先判断getComputedStyle，因为opera也支持currentStyle。
getStyle是用来获取元素指定样式属性的最终样式值的。支持getComputedStyle的直接用它获取样式的computed value就行，关于computed value可以参考这里。而currentStyle虽然跟getComputedStyle有点像都是获取最终样式，但两者得到的值的形式是不同的。它不像getComputedStyle那样返回渲染完成后准确的规格统一的值，而只是一个设置值。而且这个值还不一定就是渲染后的准确值。程序主要做的就是在ie中尽量获取接近getComputedStyle的值。
首先是处理透明度，ie虽然用的是滤镜但它的值除以100就跟w3c的"opacity"的值一样了：
if ( / alpha\(opacity=(.*)\) / i.test(style.filter)) { var opacity = parseFloat(RegExp.$ 1 ); return opacity ? opacity / 100 : 0 ;} return 1 ;还有"float"，这个比较简单换成"styleFloat"就行了。
获取样式后还有一个工作是转换单位。当判断得到的值是一个数值而单位又不是px的话，就会进行转换。方法是参考jQuery的curCSS的，理解之前先认识两个比较少用的属性：runtimeStyle和pixelLeft。
runtimeStyle是ie特有的属性，用法跟style差不多，但它有着最高的优先级。就是说如果在runtimeStyle设置了样式就会忽略掉style中同样的样式。具体可以参考birdshome的“关于HTML Object中三个Style实例的区别”和“关于使用runtimeStyle属性问题讨论”而pixelLeft的作用是以像素px为单位返回元素的left样式值，ie（还能用在runtimeStyle）和opera支持。
知道这两个东西后，就能理解它的原理了：1，先备份原来的值：
style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;2，设置runtimeStyle的left为currentStyle的left：
elem.runtimeStyle.left = elem.currentStyle.left;目的是利用runtimeStyle的优先级保证修改style后能按原来的样式显示；3，设置style的left为要转换的值，并巧妙地利用pixelLeft获取这个值的px单位形式：
style.left = ret || 0 ;ret = style.pixelLeft + " px " ;4，最后恢复原来的left值：
style.left = left;elem.runtimeStyle.left = rsLeft;这样就能在不改变渲染样式的情况下转换成像素值了。ps：jQuery中有说明这个方法也是Dean Edwards提出的，神啊。
最后还有一个setStyle用来设置样式，主要用来批量设置样式和解决一些兼容问题。可以用以下两种方式的调用：$$D.setStyle(元素或元素集合, { 样式属性名: 属性值, ... })$$D.setStyle(元素或元素集合, 样式属性名, 属性值)第一个参数是要设置样式的元素或元素集合，如果是单个元素会自动转成单元素集合：
if ( ! elems.length) { elems = [ elems ]; }第二个参数是一个键值对集合，键是样式属性名，值是对应的属性值。如果只设置一个样式，可以设第二个参数是样式属性名，第三个参数是属性值，由程序新建一个键值对集合：
if ( typeof style == " string " ) { var s = style; style = {}; style[s] = value; }再用forEach历遍元素集合，绑定的函数里给元素设置用for in列出的所有样式。ps：单个元素设置单个样式应该直接设置，除非是有兼容问题。
剩下的就是解决兼容问题了。首先是透明度，ie是用滤镜的，如果直接设置filter会把其他滤镜都替换没了。参考jQuery的方法，先获取原来的filter，替换掉透明滤镜的部分，再加上要设置好的透明滤镜：
elem.style.filter = (elem.currentStyle.filter || "" ).replace( / alpha\([^)]*\) / , "" ) + " alpha(opacity= " + value * 100 + " ) " ;挺巧妙的方法，记得值要乘以100对应w3c的"opacity"。
至于"float"就比较简单，ie用"styleFloat"其他用"cssFloat"就行了。
【Event】
命名空间是：$$E
这个是兼容性的老问题了，这里包含三个方法：addEvent，removeEvent，fixEvent。
addEvent和removeEvent分别是添加和移除事件，以前我是用ie的attachEvent跟w3c的addEventListener做兼容。但看到Dean Edwards的方法后，就改用他的了，除了兼容性更好外还能解决一些bug（详细看这里的cloneNode的bug部分）。代码中的addEvent/removeEvent根据需要在Dean代码的基础上做了些修改，不过原理还是一样的。还兼容了"mouseenter"和"mouseleave"事件。
而fixEvent是用来修正event对象的兼容性的，主要是添加一些w3c的属性和方法，上面bindAsEventListener就用到了它。这里我只做了ie的兼容，其他都是直接使用event，这样就做不到细致的兼容，不过够用就行了。jQuery的fix就做的比较完善，值得研究。
【CustomEvent】
命名空间是：$$CE
上面的Event只能用在dom事件上，但程序有时会需要一些“自定义”事件。CustomEvent就是用在程序的自定义事件的。
这里主要仿照Event来做的，也包括addEvent和removeEvent，还有一个fireEvent方法用于手动触发事件。它的主要用途是给程序添加钩子（hook），能同时添加多个程序。
【String】
命名空间是：$$S
我比较少做String的高级应用，所以暂时也没什么方法需要放进来。里面有一个camelize方法，用来把横杠形式的字符串（例如"border-top"）转换成驼峰形式（例如"borderTop"）。原理是利用replace第二个参数是function时的技巧：
return s.replace( / -([a-z]) / ig, function (all, letter) { return letter.toUpperCase(); });这个可以用在样式属性名的转换，在getStyle/setStyle中就使用了它。
调用方式
最后说说调用方式，跟调用一般函数方法是一样的，只是前面要带上命名空间。例如：$$.extend(...)像$$由于本身就是function，可以直接这样用：$$(...)链式调用或许比较酷，但不太适合用在这样的工具库上，除非是扩展原生对象（这里也没有使用）。
版本下载Cloudgamer JavaScript Library v0.1完整版本 压缩版本
转载于:https://www.cnblogs.com/cloudgamer/archive/2009/10/29/Cloudgamer_JavaScript_Library.html
相关资源：Cloudgamer JavaScript Library v0.1 JS工具库.rar