|
什么是js库？
我们知道一些js库，如JQurey，我们在使用JQuery时js文件中我们首先会引用一个默认的js库，jquery.js文件，这个文件就是构建的js库，我们通过使用这个库，调用库中的函数，用更少的代码实现复杂的界面显示。
编写自己的js库，需要注意的问题：
建立js库时注意的两个问题，使自己的库构建的更加优雅合理：
1 不要版本检测。
不依赖于浏览器的样式，和浏览器的版本，而是依赖于脚本语言js的强大。
2 使用命名空间。
所说的命名空间不是真正的命名空间，只是能在脚本内营造的一个属于自己的小空间的技巧而已。
命名空间的唯一性：
方法的名字相同，默认使用最后一个方法。
一般命名为IC （ItCast）
命名空间不共享：
库中的任何函数只在库中使用，保证自己使用$()函数，使用js小技巧。
(function(){
//运行的代码。
})(); //后面的括号表示运行，定以函数后运行。前面的括号表示分隔符，定义函数。
编写自己的js库。
模板：
- <span style="font-size: 18px;">(function(){
-
-
-
- //自己的命名空间，外部无法访问。
- //定义了自己的函数$()
- Function $()
- {
- //代码。
- //测试是否成功。
- Alert("你好！");
- }
-
- //构造自己的命名空间。
- Window['myNameSpace']={}
- //将自己的命名空间注册到window，并且注册自己的$函数。
- Window['myNameSpace']['$']=$;
-
-
-
- })();
- </span>
在html中进行测试：
- <span style="font-size: 18px;"><html>
- <head>
- <title>js库测试</title>
- <script type="text/javascript" src="myNameSpace.js"</javascript>
- </head>
- /*调用自己建立的 $()方法。window可以省略*/
- <body onload="window.myNameSpace.$();">
- </body>
- </html>
- pan>
完善自己的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./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库，提高我们的效率。
|
