程序员必备-创建js库

最新推荐文章于 2019-05-26 09:58:37 发布

chenjinge7

最新推荐文章于 2019-05-26 09:58:37 发布

阅读量930

点赞数 2

分类专栏：菜鸟程序设计文章标签： js库

本文链接：https://blog.csdn.net/chenjinge7/article/details/38323373

版权

菜鸟程序设计专栏收录该内容

53 篇文章 0 订阅

订阅专栏

牛腩Javascript中讲解的Javascript方法的构建都放在了HTML页面中,一方面这样会暴露出自己的方法实现过程,二是如果其他页面需要同样的方法的话那就还得将同样的方法重新写一遍,不能达到很好的重复利用.构建js库,通过脚本标签<script></script> src 属性引入,JS中的方法就可以随意调用了.不但不会在HTML页面中暴露实现方法,而且让函数的服用性大大提高了.另一方面,这是程序员经验积累的储蓄,可将一些有些的函数放进去,供以后需要之时,拿来就用.

接下来开始编写自己的js库,首先准备好模板:

<span style="font-size:14px;">(function(){

		window['namespace']={}
		window[''namespace'']['function']=$;
	
 })();</span>

这里注意,组合性的符号一定不要漏写,如果有源模板,要尽量粘贴复制,减少手写带来的错误.

利用该模板创建函数:

<span style="font-size:14px;">(function()  
          {  
        //向window注册命名空间IC。      
        window['JG']={}  
          
        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上注册命名空间JG，并向命名空间中注册$方法。  
        window['JG']['$']=$;  
 })();</span>

在script标签中,引用JS库:

接下来,js中的方法就可以被调用了,调用实例:

<span style="font-size: 14px;"><!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=gb2312" />
<title>js库测试</title>
<script type="text/javascript" src="JG.js" ></script>
<script type="text/javascript" >
	function ClickTest()
	{
/*		alert("函数开头无误！");*/
		var testInput=JG.$("testID");
		alert(testInput.value);
	}
</script>
</head>

<body>
<input type="text"  value="test" name="textfield"  id="testID"/>
<input name="btnClick" type="button" id="btnClick" value="ClickMe"  οnclick="ClickTest()" />
</body>
</html></span>