js-构建自己的js库

来源：互联网发布：吉他教学入门教程软件编辑：程序博客网时间：2024/06/06 09:50

什么是js库？

我们知道一些js库，如JQurey，我们在使用JQuery时js文件中我们首先会引用一个默认的js库，jquery.js文件，这个文件就是构建的js库，我们通过使用这个库，调用库中的函数，用更少的代码实现复杂的界面显示。

编写自己的js库，需要注意的问题：

建立js库时注意的两个问题，使自己的库构建的更加优雅合理：

1 不要版本检测。

不依赖于浏览器的样式，和浏览器的版本，而是依赖于脚本语言js的强大。

2 使用命名空间。

所说的命名空间不是真正的命名空间，只是能在脚本内营造的一个属于自己的小空间的技巧而已。

命名空间的唯一性：

方法的名字相同，默认使用最后一个方法。

一般命名为IC （ItCast）

命名空间不共享：

库中的任何函数只在库中使用，保证自己使用$()函数，使用js小技巧。

(function(){

//运行的代码。

})(); //后面的括号表示运行，定以函数后运行。前面的括号表示分隔符，定义函数。

编写自己的js库。

模板：

(function(){//自己的命名空间，外部无法访问。//定义了自己的函数$()Function $(){//代码。//测试是否成功。Alert("你好！");}//构造自己的命名空间。Window['myNameSpace']={}//将自己的命名空间注册到window，并且注册自己的$函数。Window['myNameSpace']['$']=$;})();

在html中进行测试：

<html><head><title>js库测试</title><script type="text/javascript" src="myNameSpace.js"</javascript></head>/*调用自己建立的 $()方法。window可以省略*/<body onload="window.myNameSpace.$();"></body></html>

完善自己的js库。

构建自己的$方法，作用是根据id来找出对象的值，构建方法，对需要根据模板把方法注册到window。

js代码为：

(function()  {//向window注册命名空间IC。  window['IC']={}function $(){//定义元素数组,数组对象。var elements=new Array();//对数组进行循环验证。arguments是js的一个内部对象返回，返回function传递的参数对象，数组形式。for(var i=0;i<arguments.length;i++){//定义element对象，把参数数组读出来。var element=arguments[i];//判断数组中的原元素是否是字符串类型。if(typeof element=='string'){element=document.getElementById(element);}//判断当前的参数知否只有一个，我们就直接返回这个参数。if(arguments.length==1){return element;}//如果多个参数的话。我们放入数组elements中。elements.push(element);}//把所有的全取出来并返回。return elements;} //向windows上注册命名空间IC，并向命名空间中注册$方法。window['IC']['$']=$;  })();

html代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"  content="text/html; charset=gb2312" /><title>无标题文档</title> <script type="text/javascript" src="create_jsKU.js" ></script> <script type="text/javascript"> function  testClick(){var testInput=IC.$("testId","testId2");for(var i=0;i<testInput.length;i++){alert(testInput[i].value);}} </script></head><body ><input type="text" value="test" id="testId" /><input type="text" value="test2" id="testId2" /><input type="button" value="clickme" onclick="testClick()"/></body></html>

构建自己的js库，提高我们的效率。