JS学习之路--构建自己的代码库
大家都知道现在有许多比较成熟的javascript代码库,比如:JQuery,Prototype等,里面有许多经过验证的非常好用的函数.我们在日常的编程中也会写一些比较好用的函数,而且这些函数的复用率也比较高,那么我们就有必要把这些函数收集起来构建我们自己的代码库.
那么我们在构建自己的代码库时有哪些需要注意的呢?
1、使用能力检测而不是浏览器版本检测
大家都知道现在市面上的浏览器多的数不过来,而且在不断的增加和更新,如果为了适应某个版本的浏览器而编写js代码,那么这些代码的可移植性将大大降低.
为什么要使用能力检测而不是浏览器版本检测呢?先让我们来看一些js与浏览器的知识:
JavaScript语言
浏览器主要分为两大类:
浏览器对js的支持
而且浏览器的发展趋势是越来越向W3C标准靠拢,所以采用能力检测的代码可移植性和可复用性才好.
下面以创建AJAX核心对象XMLHttpRequest对象为例,说明何为能力检测
(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的替代者了。