JS学习之路--构建自己的代码库

        大家都知道现在有许多比较成熟的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的替代者了。