什么是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 οnlοad="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" οnclick="testClick()"/>
</body>
</html>
构建自己的js库,提高我们的效率。