主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架。
工具库已经在近几个效果中使用:
JavaScript 多级联动浮动菜单 (第二版)
JavaScript 浮动定位提示效果
JavaScript Table行定位效果
JavaScript Table排序
这个工具库的主要特点是:
【跨浏览器】
能在以下浏览器使用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari 4.0.3,Opera 10.10
ie系列是必须的,其他能支持最新版本就够了。
【使用命名空间】
当然不是真正“命名空间”,只是一些全局变量,用途相似而已。
有如下命名空间:
$$:代表Object,保存对象相关方法,也代替最常用的getElementById方法;
$$B:代表Browser,保存浏览器信息;
$$A:代表Array,保存数组和类数组的相关方法;
$$F:代表Function,保存函数的相关方法;
$$D:代表Dom,文档对象的相关操作和方法;
$$E:代表Event,事件的相关操作和兼容处理;
$$S:代表String,保存字符串的相关方法。
虽然我不反对有节制地扩展原生对象,但可以的话还是避免命名污染吧。
用多个命名空间(而不用单个)只因管理容易,用起来方便。
用两个$,不是要更多美刀(虽然很想),而是避免跟流行的框架冲突。
使用全部变量时我没有用window.x的形式,因为那样会导致一些问题,具体参考这里。
【使用匿名函数】
貌似是jquery发扬光大的,就是把代码嵌在一个function里面。
其实就是利用闭包,一来可以使用局部变量,二来可以防止命名冲突。
【使用对象检测】
“对象检测天生地优于浏览器检测”,出自“ppk谈JavaScript”的真理。
能用对象检测的都尽量用,当然有些实在太难搞的也不要太执着。
对象检测方面jQuery的support做的很好,建议去看一下。
追求目标是:
【小体积】
这里的体积不是说字符的多少,而是属性和方法的数量。
工具库的属性和方法必须是很有用的,最好是“不得不加”的。
当然随着使用的增加,工具库也会慢慢的扩大,但要坚持这个原则。
【高效率】
高效是不变的追求,当然是在权衡利弊之后。
说到高效不得不佩服一下google,它不但代码追求效率,而且下载的代码是已经经过浏览器检测的。
具体可以自己用各个浏览器下载看看试试。
建立目的是:
【整合常用方法】
把常用的方法整合到一起,既利于代码复用,也便于维护。
但也不可避免地添加一些无关的方法,从而增加了代码量,降低了效率。
【解决兼容问题】
解决一些常见的兼容性问题,减轻编码负担。
各个部分说明
【Object】
命名空间是:$$
$$本身就是最常用的方法:document.getElementById
它还包括两个方法:extend和deepextend。
其中extend跟prototype.js的Object.extend是一样的,用来扩展对象,是用得最久的方法之一了。
而deepextend是深度扩展,这里的深度跟深度复制里面的意思差不多,参考的是jQuery的extend。
【Browser】
命名空间是:$$B
通过userAgent获取浏览器信息,主要获取浏览器的类型和版本。
这里基本是参考有啊的Browser,要了解这部分首先要知道各浏览器的userAgent。
下面是各浏览器的userAgent(除了ie其他是目前最新版):
ie6
Mozilla/4.0 (compatible; MSIE 6.0; ...)
ie7
Mozilla/4.0 (compatible; MSIE 7.0; ...)
ie8
Mozilla/4.0 (compatible; MSIE 8.0; ...)
ff
Mozilla/5.0 (...) Gecko/20090824 Firefox/3.5.3
chrome
Mozilla/5.0 (...) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.27 Safari/532.0
safari
Mozilla/5.0 (...) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1
opera
Opera/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的方法就比较巧妙(有修改):