大家都知道现在有许多比较成熟的javascript代码库,比如:JQuery,Prototype等,里面有许多经过验证的非常好用的函数.我们在日常的编程中也会写一些比较好用的函数,而且这些函数的复用率也比较高,那么我们就有必要把这些函数收集起来构建我们自己的代码库.
那么我们在构建自己的代码库时有哪些需要注意的呢?
1、使用能力检测而不是浏览器版本检测
大家都知道现在市面上的浏览器多的数不过来，而且在不断的增加和更新，如果为了适应某个版本的浏览器而编写js代码，那么这些代码的可移植性将大大降低.
为什么要使用能力检测而不是浏览器版本检测呢?先让我们来看一些js与浏览器的知识:
JavaScript语言
- js是浏览器端脚本语言,解释性语言
- js代码由浏览器解释执行，所以浏览器中需要有js解释器(js引擎)
- 不同浏览器采用的js解释器标准不一样，所以会有一些具体语法上的细微差别
浏览器主要分为两大类：
- IE浏览器：不是完全采用W3C标准，有自己的一套标准
- Firefox类浏览器：完美支持W3C标准
浏览器对js的支持
- js可以被大多数浏览器支持
- VBScript只被IE浏览器支持
而且浏览器的发展趋势是越来越向W3C标准靠拢,所以采用能力检测的代码可移植性和可复用性才好.
下面以创建AJAX核心对象XMLHttpRequest对象为例,说明何为能力检测
if(ActiveXObject){
//IE浏览器的创建代码
}else if(XmlHttpRequest){
//Firefox类浏览器的创建代码
}else{alert("创建对象失败");}说明：如果浏览器支持ActiveXObject对象,那么就执行if子句的创建语句;如果支持XmlHttpRequest则执行else if子句,否则执行else子句.这就是能力检测,因为浏览器总体上分为两类,所以使用能力检测比采用版本检测要好.
2、使用命名空间
命名空间(namespace)这个东东主要是为了解决冲突而诞生的,总的一句话就是:同一个命名空间中的函数不能重名;不同命名空间中的函数可以重名,因为前面加上命名空间就可以区分了.
为什么要使用命名空间呢?
(1)javascript不支持函数重载,对于函数名相同而参数个数不同的函数,js只调用最后一个加载的js文件的最后一个同名函数.所以如果出现了同名函数,那么js只会调用最后一个,这个问题可以通过外包命名空间来解决.
(2)自定义的函数如果与内置函数同名,那么内置函数将失效.
下面给大家展示一个构建自己代码库的模板
(function(){
window['WH']={} //注册命名空间(实质是给window对象添加属性'WH',这个属性是一个对象)
function func1(){
//函数代码
alert("Hello World");
}
window['WH']['func1']=func1;//向命名空间WH注册func1函数(实质是给WH对象添加方法)
function abc(){
alert("abc");
}
window['WH']['abc']=abc;//向命名空间WH注册abc函数
})();
这里需要解释几点:
(1)所谓的命名空间其实就是给window对象添加一个属性,属性名是将要使用的命名空间的名字,属性值是一个对象,如下:
window['WH']={};
也可以写成:
window.WH=new Object();
(2)给命名空间中添加方法,其实就是给WH对象添加方法,如下:
window['WH']['func1']=func1;
也可以写成：
window.WH.func1=function(){
alert("Hello Word");
};
(3)其实所谓的命名空间就是把原本定义在window下的函数，定义在window下的一个对象里面，这样如果要调用方法func1，则只能写WH.func1(),而不能直接调用func1，因为func1是WH对象的一个私有方法。
(4)使用了命名空间，就不用害怕自己的函数和系统或者其他js库的函数重名了，这样岂不是甚好。
(5)整个代码库包含在一个匿名函数内部，而且这个匿名函数在浏览器加载页面时就会立即被执行，这样可以保证使用该代码库的页面在加载完成之后，WH对象已经被创建
最后再补充一点关于js实现伪重载的知识
上面说了js不支持重载，但是我们在使用一些函数时常会见到一些类似重载的情况，那么这些情况在内部是怎么处理的呢？
(1)通过arguments对象来判断参数的个数，arguments.length
(2)通过typeof运算符来判断参数类型，如：if(typeof(arg1)=='string')....
(3)通过if(参数名)来判断是否传了该参数
其实所谓的js函数重载是伪重载，是将不同的情况写在了一个函数里面，通过内部判断来执行不同的分支。
希望这篇文章能对大家有所帮助，将自己积累的好用js函数构建成自己的代码库，说不定哪一天你的代码库就变成了JQuery的替代者了。
- 2楼wwwwenhuan5天前 08:28
- 先学习别人的成熟的代码库，比如Jquery这样的。先要学习别人的东西，理解了，会用了是重要的。不过自己平时写的一些比较好用的小函数可以积累起来，方便自己以后使用。
- 1楼lfmilaoshi2013-01-15 18:57
- 《构建我们自己的代码库》是次要的，知道重要的是什么吗？