js-构建自己的js库

什么是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库,提高我们的效率。

    原文作者:邢海芳
    原文地址: https://blog.csdn.net/xhf55555/article/details/8529929
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞