JavaScript——如何构建自己的JS库?

版权声明:本文为博主原创文章,大家喜欢的话,多多转载吧! https://blog.csdn.net/u011500356/article/details/50292981

一:为什么要构建JS库?

    当然,能够更好的实现以后代码的复用,最终达到高效开发的目的。比如我们所见的比较大型和优秀的库。JQuery、Prototype等……里面包含了很多小而精悍的小函数。使用自己库中这些小函数不但让我们的代码更加简单,而且可读性大大增强。

二:如何构建?

     原理性解释:利用了JS中的函数闭包,这样就能够调用自定义的$函数了。

   1、使用模板。代码如下:

<span style="font-family:KaiTi_GB2312;font-size:18px;">(function(){
    
    //将命名空间{}注册到window对象中
    window['myNameSpace'] = {}
    
    //此处写自定义的函数、功能
    function $(){
        //代码
    }
    
    //将$函数注册到window对象里
    window['myNameSpace']['$'] = $;  
    
})();</span>

   测试实例:构建自己的$函数

    第一步:编写自己的库,添加函数,并进行封装。

<span style="font-family:KaiTi_GB2312;font-size:18px;">(function(){
	
	window['BJ'] = {}
	
	function $(){
		//代码
		var elements = new Array();
		for(var i = 0;i < arguments.length;i++){
			var element = arguments[i];
			//如果是输入的参数是字符串就打印出ID
			if(typeof element =='string'){
				element = document.getElementById(element);
			}
			
			//如果只有一个参数,那么就直接返回element
			if(arguments.length == 1){
				return element;
			}
			
			//否则,将它放到数组中
			elements.push(element);
		}
		
		return elements;
	}
	
	function test(){
		alert('its easy to do it ! very interesting!');
	}
	
	window['BJ']['$'] = $;
	
	window['BJ']['test'] = test;
	
})();</span>

    第二步:在HTML页调用它。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用JavaScript</title>
</head>



<script type="text/javascript" src="BJ--test.js"></script>   <!--引用自己封装的JS文件-->

<script type="text/javascript"> 

	function testClick(){
		var testInput = BJ.$("testid","test2");
		for(var i = 0;i<testInput.length;i++){
			alert(testInput[i].value);
		}	
	}

</script>


<body>

<input type = "text" value = "test" id = "testid"/> 
<input type = "text" value = "test" id = "test2"/> 
<input type = "button" value = "clickme" onclick = "testClick()"/> 
</body>

</html></span>

  小结:对于前台的东西,其实考验的更多的是你的细心。对于调试工具和技巧的熟悉会让你事半功倍!捣鼓半天终于搞明白如何封装自己的JS库了。花了点功夫也确实是,细心度有待提高,技巧要多练才行,三天不练手生啊。继续Fighting!


展开阅读全文

没有更多推荐了,返回首页