精华内容
下载资源
问答
  • 写一个自己javascript库

    千次阅读 2013-12-16 20:30:00
    ...编写JavaScript库要注意的问题编写JavaScript库的模板代码编写JavaScript库(实例)完善JavaScript库(实例) ....编写JavaScript库要注意...为了让自己JS库构建的更加优雅、合理,我们编写JS库时要注意两方面的


    行文目录:点击对应目录进行跳转







    一.编写JavaScript库要注意的问题


    为了让自己的JS库构建的更加优雅、合理,我们编写JS库时要注意两方面的内容:

    1.不要使用版本检测,而要使用能力检测

    由于浏览器的类型和版本太多,以及不断的新的浏览器出现,我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。"浏览器检测"也叫"版本检测"通常被认为是一种错误的做法,浏览器检测的最佳实践是能力检测,通常也被称为对象检测,指的是在代码执行之前检测某个脚本对象or方法是否存在,而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在,那么说明浏览器能够使用它,而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式

    1. // JavaScript Document 
    2. if(document.body && document.body.getElementsByTagName){ 
    3.     //使用document.body.getElementsByTagName的代码 
    4.     } 
    1. // JavaScript Document 
    2. if(document.body && document.body.getElementsByTagName){ 
    3.     //使用document.body.getElementsByTagName的代码 
    4.     } 
    // JavaScript Document
    if(document.body && document.body.getElementsByTagName){
    	//使用document.body.getElementsByTagName的代码
    	}

    2.使用命名空间

    当使用多个js库文件时,为了避免在调用时不同js库文件的同名函数的冲突,一般会使用命名空间来解决。JavaScript支持同名函数,但只使用最后一个加载的函数(不支持重载,不会考虑参数,只看函数名字), 哪一个最后被加载,哪一个就会被调用到。所以不使用命名空间的话,就很容易遇到同名函数冲突的问题。

          使用命名空间的两点原则:唯一性不共享

    唯一性:挑选一个独一无二的命名空间的名字(如Google Maps在所有的标识符中都添加了G前缀),注意js是大小写敏感的。

    不共享:不共享意味着什么都不共享;当你创建自己的$函数时你可能会与著名的库(如Prototype)中的$函数发生冲突而导致Prototype中的$无法使用,为了不与著名的一些库(jQuery、prototype)或者其他已有的一些函数冲突,使用匿名函数来实现代码的不共享。如:要保证只有你自己使用这个$()函数,你可以使用一个JS小技巧。

    //匿名函数
    (function(){
    //code,运行的代码
    })();

    注意:()在JavaScript中有两种含义:一是运算符;二是分隔符
    上面匿名函数需要说明两点:
         ①红色括号里是一个匿名函数,红色括号代表分割,表示里面的函数是一个部分;
         ②绿色括号表示一个运算符,表示红色括号里面的函数要运行;相当于定义完一个匿名函数后就让它直接运行。


    二.编写JavaScript库模板


    1.可以使用下面的模板来编写自己的JavaScript库

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312">//JavaScript库模板代码 
    2.     (function (){ 
    3.         function $(){ 
    4.             alert("被调用到喽!");  
    5.             /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法;
    6.             其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作,
    7.             所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/  
    8.             } 
    9.            
    10.           //注册命名空间 'myNameSpace' 到window对象上   
    11.             window['myNameSpace'] = {}   
    12.            
    13.           //把$函数注册到 'myNameSpace'命名空间中 
    14.           window['myNameSpace']['$']=$; 
    15.            
    16.         })();</SPAN> 
    1. <span style="font-family: FangSong_GB2312;">//JavaScript库模板代码 
    2.     (function (){ 
    3.         function $(){ 
    4.             alert("被调用到喽!");  
    5.             /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法;
    6.             其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作,
    7.             所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/  
    8.             } 
    9.            
    10.           //注册命名空间 'myNameSpace' 到window对象上   
    11.             window['myNameSpace'] = {}   
    12.            
    13.           //把$函数注册到 'myNameSpace'命名空间中 
    14.           window['myNameSpace']['$']=$; 
    15.            
    16.         })();</span> 
    //JavaScript库模板代码
    	(function (){
    		function $(){
    			alert("被调用到喽!"); 
    			/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法;
    			其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作,
    			所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/ 
    			}
    		  
    		  //注册命名空间 'myNameSpace' 到window对象上  
                window['myNameSpace'] = {}  
              
    		  //把$函数注册到 'myNameSpace'命名空间中
    		  window['myNameSpace']['$']=$;
              
    		})();


    2.在HTML页面上引用自己JS库中的函数方式

    首先,执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入到HTML文件标题下方,例如

    1. <SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312"><title>ICTest</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="IC.js"></script> 
    4. </SPAN></SPAN> 
    1. <span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;"><title>ICTest</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="IC.js"></script> 
    4. </span></span> 
    <title>ICTest</title>
    <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置-->
    <script language="JavaScript" type="text/javascript" src="IC.js"></script>
    

    然后,在body属性中调用JS库中的函数,两种方式

    <body οnlοad="myNameSpace.$()"></body>   //myNameSpace为定义的命名空间,可以调用自己构建的JS库文件中到函数了

    <body οnlοad="window.myNameSpace.$()"></body> //在命名空间前加上window也可实现调用JS库中的函数


    三.编写自己的JavaScript库(实例)


    实现一个在网页加载时弹出对话框的简单实例,本实例我们采用编程软件Dreamweaver 8。


    1.创建自己的JS库,此处命名空间我命名为WALY.js

      注意:大家可以使用自己喜欢的名字作为命名空间的名字,这样使得即使一起使用其他人编写的库时也不会发生相互干扰的情况。

    1. <SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312">//ZAJ.js库代码 
    2.     (function (){ 
    3.         function $(){ 
    4.             alert("AZJ.js库被调用到喽!");  
    5.             } 
    6.            
    7.           //注册命名空间 'AZJ' 到window对象上   
    8.             window['AZJ'] = {}   
    9.            
    10.           //把$函数注册到 'AZJ'命名空间中 
    11.           window['AZJ']['$']=$; 
    12.            
    13.         })();</SPAN></SPAN> 
    1. <span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;">//ZAJ.js库代码 
    2.     (function (){ 
    3.         function $(){ 
    4.             alert("AZJ.js库被调用到喽!");  
    5.             } 
    6.            
    7.           //注册命名空间 'AZJ' 到window对象上   
    8.             window['AZJ'] = {}   
    9.            
    10.           //把$函数注册到 'AZJ'命名空间中 
    11.           window['AZJ']['$']=$; 
    12.            
    13.         })();</span></span> 
    //ZAJ.js库代码
    	(function (){
    		function $(){
    			alert("AZJ.js库被调用到喽!"); 
    			}
    		  
    		  //注册命名空间 'AZJ' 到window对象上  
                window['AZJ'] = {}  
              
    		  //把$函数注册到 'AZJ'命名空间中
    		  window['AZJ']['$']=$;
              
    		})();

    2.在HTML页面代码中调用JS库,进行验证是否调用到WALY.js中的函数。HTML文件名为WALYTest.html

    1. <SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312"><head> 
    2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    3. <title>调用js库测试</title> 
    4. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    5. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    6.  
    7. </head> 
    8. <body onload="AZJ.$();"> <!--在页面加载时,调用AZJ.js库中的函数;这里也可使用<body οnlοad="window.AZJ.$();">--> 
    9. </body></SPAN></SPAN> 
    1. <span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;"><head> 
    2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    3. <title>调用js库测试</title> 
    4. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    5. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    6.  
    7. </head> 
    8. <body onload="AZJ.$();"> <!--在页面加载时,调用AZJ.js库中的函数;这里也可使用<body οnlοad="window.AZJ.$();">--> 
    9. </body></span></span> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>调用js库测试</title>
    <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置-->
    <script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
    
    </head>
    <body οnlοad="AZJ.$();"> <!--在页面加载时,调用AZJ.js库中的函数;这里也可使用<body οnlοad="window.AZJ.$();">-->
    </body>

    3.运行网页,运行结果如图



    四.完善JavaScript库


    这里主要在JS库匿名函数中编写两个常用的方法:

    1.$()方法

    2.getElementsByClassName()方法


    实例初探:js库中只编写$()方法

    1.建立"AZJ.js"库,编写$()方法,代码如下

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js库代码 
    2.     (function (){ 
    3.         //注册命名空间 'AZJ' 到window对象上   
    4.         window['AZJ'] = {}  
    5.          
    6.         //$函数等同于getElementByID; 
    7.         function $(){ 
    8.             var elements=new Array();  
    9.             //将传来的参数进行遍历 
    10.             for(var i=0;i<arguments.length;i++){ 
    11.                 var element=arguments[i]; 
    12.                 //若参数为字符串类型,则取得该参数的id 
    13.                 if(typeof element=='string'){ 
    14.                     element=document.getElementById(element); 
    15.                     } 
    16.                 //若参数长度为1,即只传递进来一个参数,则直接返回 
    17.                 if(arguments.length==1){ 
    18.                     return element; 
    19.                     } 
    20.                 //若有多个参数传递进来,则将处理后的值压入elements数组中 
    21.                 elements.push(element); 
    22.                 } 
    23.                 //返回处理后的参数 
    24.                 return elements; 
    25.             } 
    26.            
    27.            
    28.           //把创建的函数$注册到 'window.AZJ'命名空间中 
    29.           window['AZJ']['$']=$; 
    30.            
    31.         })();</SPAN> 
    1. <span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js库代码 
    2.     (function (){ 
    3.         //注册命名空间 'AZJ' 到window对象上   
    4.         window['AZJ'] = {}  
    5.          
    6.         //$函数等同于getElementByID; 
    7.         function $(){ 
    8.             var elements=new Array();  
    9.             //将传来的参数进行遍历 
    10.             for(var i=0;i<arguments.length;i++){ 
    11.                 var element=arguments[i]; 
    12.                 //若参数为字符串类型,则取得该参数的id 
    13.                 if(typeof element=='string'){ 
    14.                     element=document.getElementById(element); 
    15.                     } 
    16.                 //若参数长度为1,即只传递进来一个参数,则直接返回 
    17.                 if(arguments.length==1){ 
    18.                     return element; 
    19.                     } 
    20.                 //若有多个参数传递进来,则将处理后的值压入elements数组中 
    21.                 elements.push(element); 
    22.                 } 
    23.                 //返回处理后的参数 
    24.                 return elements; 
    25.             } 
    26.            
    27.            
    28.           //把创建的函数$注册到 'window.AZJ'命名空间中 
    29.           window['AZJ']['$']=$; 
    30.            
    31.         })();</span> 
    //ZAJ.js库代码
    	(function (){
    	    //注册命名空间 'AZJ' 到window对象上  
            window['AZJ'] = {} 
    		
    	    //$函数等同于getElementByID;
    		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);
    					}
    				//若参数长度为1,即只传递进来一个参数,则直接返回
    				if(arguments.length==1){
    					return element;
    					}
    				//若有多个参数传递进来,则将处理后的值压入elements数组中
    				elements.push(element);
    				}
    				//返回处理后的参数
    				return elements;
    			}
    		  
              
    		  //把创建的函数$注册到 'window.AZJ'命名空间中
    		  window['AZJ']['$']=$;
              
    		})();

    2.在HTML页面进行测试

    当从界面只传递一个参数时,代码设计

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.$("testID"); 
    7.         alert(testInput.value); 
    8.     } 
    9. </script> 
    10. </head> 
    11. <body > 
    12. <input type="text" value="AZJtest" id="testID"/> 
    13. <input type="button" value="Click Me" onclick="testClick()"/> 
    14. </body></SPAN> 
    1. <span style="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.$("testID"); 
    7.         alert(testInput.value); 
    8.     } 
    9. </script> 
    10. </head> 
    11. <body > 
    12. <input type="text" value="AZJtest" id="testID"/> 
    13. <input type="button" value="Click Me" onclick="testClick()"/> 
    14. </body></span> 
    <title>调用js库测试</title>
    <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置-->
    <script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
    <script language="JavaScript" type="text/javascript" >
    	function testClick(){
    		var testInput=AZJ.$("testID");
    		alert(testInput.value);
    	}
    </script>
    </head>
    <body >
    <input type="text" value="AZJtest" id="testID"/>
    <input type="button" value="Click Me" οnclick="testClick()"/>
    </body>

    运行结果为:点击"Click Me"按钮,弹出网页消息:AZJtest



    当从界面传递两个参数时,代码设计

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.$("testID","testID2"); 
    7.         //由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来 
    8.         for(var i=0;i<testInput.length;i++){ 
    9.         alert(testInput[i].value); 
    10.         } 
    11.          
    12.     } 
    13. </script> 
    14. </head> 
    15. <body > 
    16. <input type="text" value="AZJtest" id="testID"/> 
    17. <input type="text" value="AZJtest2" id="testID2"/> 
    18. <input type="button" value="Click Me" onclick="testClick()"/> 
    19. </body></SPAN> 
    1. <span style="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.$("testID","testID2"); 
    7.         //由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来 
    8.         for(var i=0;i<testInput.length;i++){ 
    9.         alert(testInput[i].value); 
    10.         } 
    11.          
    12.     } 
    13. </script> 
    14. </head> 
    15. <body > 
    16. <input type="text" value="AZJtest" id="testID"/> 
    17. <input type="text" value="AZJtest2" id="testID2"/> 
    18. <input type="button" value="Click Me" onclick="testClick()"/> 
    19. </body></span> 
    <title>调用js库测试</title>
    <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置-->
    <script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
    <script language="JavaScript" type="text/javascript" >
    	function testClick(){
    		var testInput=AZJ.$("testID","testID2");
    		//由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来
    		for(var i=0;i<testInput.length;i++){
    		alert(testInput[i].value);
    		}
    		
    	}
    </script>
    </head>
    <body >
    <input type="text" value="AZJtest" id="testID"/>
    <input type="text" value="AZJtest2" id="testID2"/>
    <input type="button" value="Click Me" οnclick="testClick()"/>
    </body>

    运行结果,单击"Click Me"按钮,先弹出AZJtest,再弹出AZJtest2




    实例深入:编写getElementByClassName()方法

    1.在"AZJ.js"库中编写getElementByClassName()方法,代码设计如下

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js库代码 
    2.     (function (){ 
    3.         //注册命名空间 'AZJ' 到window对象上   
    4.         window['AZJ'] = {}  
    5.          
    6.           //getElementsByClassName包含两个参数:类名,标签名 
    7.           function getElementsByClassName(className,tag){ 
    8.               //对tag进行过滤,取出所有对象,如取出所有input类型对象。 
    9.               var allTags=document.getElementsByTagName(tag); 
    10.               var matchingElements=new Array(); 
    11.                
    12.               //正则表达式 
    13.               className = className.replace(/\-/g,"\\-"); 
    14.               var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)"); 
    15.                
    16.               var element; 
    17.                
    18.               //将取出的tag对象存入数组中。 
    19.               for(var i=0;i<allTags.length;i++){ 
    20.                   element =allTags[i]; 
    21.                   if(regex.test(element.className)){ 
    22.                       matchingElements.push(element); 
    23.                       } 
    24.                   } 
    25.               return matchingElements; 
    26.               } 
    27.           //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中 
    28.           window['AZJ']['getElementsByClassName']=getElementsByClassName; 
    29.         })();</SPAN> 
    1. <span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js库代码 
    2.     (function (){ 
    3.         //注册命名空间 'AZJ' 到window对象上   
    4.         window['AZJ'] = {}  
    5.          
    6.           //getElementsByClassName包含两个参数:类名,标签名 
    7.           function getElementsByClassName(className,tag){ 
    8.               //对tag进行过滤,取出所有对象,如取出所有input类型对象。 
    9.               var allTags=document.getElementsByTagName(tag); 
    10.               var matchingElements=new Array(); 
    11.                
    12.               //正则表达式 
    13.               className = className.replace(/\-/g,"\\-"); 
    14.               var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)"); 
    15.                
    16.               var element; 
    17.                
    18.               //将取出的tag对象存入数组中。 
    19.               for(var i=0;i<allTags.length;i++){ 
    20.                   element =allTags[i]; 
    21.                   if(regex.test(element.className)){ 
    22.                       matchingElements.push(element); 
    23.                       } 
    24.                   } 
    25.               return matchingElements; 
    26.               } 
    27.           //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中 
    28.           window['AZJ']['getElementsByClassName']=getElementsByClassName; 
    29.         })();</span> 
    //ZAJ.js库代码
    	(function (){
    	    //注册命名空间 'AZJ' 到window对象上  
            window['AZJ'] = {} 
    		
              //getElementsByClassName包含两个参数:类名,标签名
    		  function getElementsByClassName(className,tag){
    			  //对tag进行过滤,取出所有对象,如取出所有input类型对象。
    			  var allTags=document.getElementsByTagName(tag);
    			  var matchingElements=new Array();
    			  
    			  //正则表达式
    			  className = className.replace(/\-/g,"\\-");
    			  var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");
    			  
    			  var element;
    			  
    			  //将取出的tag对象存入数组中。
    			  for(var i=0;i<allTags.length;i++){
    				  element =allTags[i];
    				  if(regex.test(element.className)){
    					  matchingElements.push(element);
    					  }
    				  }
    			  return matchingElements;
    			  }
    	      //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中
    		  window['AZJ']['getElementsByClassName']=getElementsByClassName;
    		})();

    2.在HTML页面进行测试

    测试方式同上面传递两个参数的方式,代码设计如下

    1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.getElementsByClassName("testme","input"); 
    7.         //由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来 
    8.         for(var i=0;i<testInput.length;i++){ 
    9.         alert(testInput[i].value); 
    10.         } 
    11.          
    12.     } 
    13. </script> 
    14. </head> 
    15. <body > 
    16. <input type="text" value="AZJtest" class ="testme" id="testID"/> 
    17. <input type="text" value="AZJtest2" class="testme" id="testID2"/> 
    18. <input type="button" value="Click Me" onclick="testClick()"/> 
    19. </body></SPAN> 
    1. <span style="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
    2. <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
    3. <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> 
    4. <script language="JavaScript" type="text/javascript" > 
    5.     function testClick(){ 
    6.         var testInput=AZJ.getElementsByClassName("testme","input"); 
    7.         //由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来 
    8.         for(var i=0;i<testInput.length;i++){ 
    9.         alert(testInput[i].value); 
    10.         } 
    11.          
    12.     } 
    13. </script> 
    14. </head> 
    15. <body > 
    16. <input type="text" value="AZJtest" class ="testme" id="testID"/> 
    17. <input type="text" value="AZJtest2" class="testme" id="testID2"/> 
    18. <input type="button" value="Click Me" onclick="testClick()"/> 
    19. </body></span> 
    <title>调用js库测试</title>
    <!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置-->
    <script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
    <script language="JavaScript" type="text/javascript" >
    	function testClick(){
    		var testInput=AZJ.getElementsByClassName("testme","input");
    		//由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来
    		for(var i=0;i<testInput.length;i++){
    		alert(testInput[i].value);
    		}
    		
    	}
    </script>
    </head>
    <body >
    <input type="text" value="AZJtest" class ="testme" id="testID"/>
    <input type="text" value="AZJtest2" class="testme" id="testID2"/>
    <input type="button" value="Click Me" οnclick="testClick()"/>
    </body>

    运行结果,同上述方法中传递两个参数的情况。

    文章写到这里,相信您也会编写简单的js库文件了吧,编写js库文件是不是很简单呢

    展开全文
  • 自己写一个JS函数

    千次阅读 2018-07-24 20:57:35
    因为做作业的时候经常要实现用一些奇奇挂怪的需求,把里面的一些常用的封装成函数,放到码云上,希望能成我水平的种见证吧! 欢迎访问以及使用 链接:JS新手函数...

    因为做作业的时候经常要实现用一些奇奇挂怪的需求,把里面的一些常用的封装成函数,放到码云上,希望能成我水平的一种见证吧!

    欢迎访问以及使用

    链接:JS新手函数库

    展开全文
  • 2020年如何写一个现代的JavaScript库

    千次阅读 2018-10-15 19:18:19
    原文:2020年如何写一个现代的JavaScript库 作者:颜海镜 Fundebug经授权转载,版权归原作者所有。 我过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实...

    摘要: 最实用的JS库开发指南…

    Fundebug经授权转载,版权归原作者所有。

    我写过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好

    最近我写了一个jslib-base,旨在从多方面快速帮大家搭建一个标准的js库,本文将已jslib-base为例,介绍写一个开源库的知识

    jslib-base 最好用的js第三方库脚手架,赋能js第三方库开源,让开发一个js库更简单,更专业

    文档

    所谓代码未动,文档先行,文档对于一个项目非常重要,一个项目的文档包括

    README.md

    README是一个项目的门面,应该简单明了的呈现用户最关心的问题,一个开源库的用户包括使用者和贡献者,所以一个文档应该包括项目简介,使用者指南,贡献者指南三部分

    项目简介用该简单介绍项目功能,使用场景,兼容性的相关知识,这里重点介绍下徽章,相信大家都见过别人项目中的徽章,如下所示

    徽章通过更直观的方式,将更多的信息呈现出来,还能够提高颜值,有一个网站专门制作各种徽章,可以看这里

    这里有一个README的完整的例子

    TODO.md

    TODO应该记录项目的未来计划,这对于贡献者和使用者都有很重要的意义,下面是TODO的例子

    - [X] 已完成
    - [ ] 未完成
    

    CHANGELOG.md

    CHANGELOG记录项目的变更日志,对项目使用者非常重要,特别是在升级使用版本时,CHANGELOG需要记录项目的版本,发版时间和版本变更记录

    ## 0.1.0 / 2018-10-6
    
    - 新增xxx功能
    - 删除xxx功能
    - 更改xxx功能
    

    LICENSE

    开源项目必须要选择一个协议,因为没有协议的项目是没有人敢使用的,关于不同协议的区别可以看下面这张图(出自阮老师博客),我的建议是选择MIT或者BSD协议

    doc

    开源项目还应该提供详细的使用文档,一份详细文档的每个函数介绍都应该包括如下信息:

    函数简单介绍
    
    函数详细介绍
    
    函数参数和返回值(要遵守下面的例子的规则)
    
    - param {string} name1 name1描述
    - return {string} 返回值描述
    
    举个例子(要包含代码用例)
    
    // 代码
    
    特殊说明,比如特殊情况下会报错等
    

    构建

    理想的情况如下:

    • 库开发者美滋滋的写ES6+的代码;
    • 库使用者能够运行在浏览器(ie6-11)和node(0.12-10)中
    • 库使用者能够使用AMD或CMD模块方案
    • 库使用者能够使用webpack、rollup或fis等预编译工具

    理想很丰满,现实很。。。,如何才能够让开发者和使用者都能够开心呢,jslib-base通过babel+rollup提供了解决方案

    编译

    通过babel可以把ES6+的代码编译成ES5的代码,babel经理了5到6的进化,下面一张图总结了babel使用方式的变迁

    本文不讨论babel的进化史(后面会单独开一片博文介绍),而是选择最现代化的babel-preset-env方案,babel-preset-env可以通过提供提供兼容环境,而决定要编译那些ES特性

    其原理大概如下,首先通过ES的特性和特性的兼容列表计算出每个特性的兼容性信息,再通过给定兼容性要求,计算出要使用的babel插件

    首先需要安装babel-preset-env

    npm i --save-dev babel-preset-env
    

    然后新增一个.babelrc文件,添加下面的内容

    {
      "presets": [
        ["env",
        {
          "targets": {
            "browsers": "last 2 versions, > 1%, ie >= 6, Android >= 4, iOS >= 6, and_uc > 9",
            "node": "0.10"
          },
          "modules": false,
          "loose": false
        }]
      ]
    }
    

    targets中配置需要兼容的环境,关于浏览器配置对应的浏览器列表,可以从browserl.ist上查看

    modules表示编出输出的模块类型,支持"amd",“umd”,“systemjs”,“commonjs”,false这些选项,false表示不输出任何模块类型

    loose代表松散模式,将loose设置为true,能够更好地兼容ie8以下环境,下面是一个例子(ie8不支持Object.defineProperty

    // 源代码
    const aaa = 1;
    export default aaa;
    
    
    // loose false
    Object.defineProperty(exports, '__esModule', {
        value: true
    });
    var aaa = 1;
    exports.default = 1;
    
    
    // loose true
    exports.__esModule = true;
    var aaa = 1;
    exports.default = 1;
    

    babel-preset-env解决了语法新特性的兼容问题,如果想使用api新特性,在babel中一般通过babel-polyfill来解决,babel-polyfill通过引入一个polyfill文件来解决问题,这对于普通项目很实用,但对于库来说就不太友好了

    babel给库开发者提供的方案是babel-transform-runtime,runtime提供类似程序运行时,可以将全局的polyfill沙盒化

    首先需要安装babel-transform-runtime

    npm i --save-dev babel-plugin-transform-runtime
    

    在.babelrc增加下面的配置

    "plugins": [
      ["transform-runtime", {
        "helpers": false,
        "polyfill": false,
        "regenerator": false,
        "moduleName": "babel-runtime"
      }]
    ]
    

    transform-runtime,支持三种运行时,下面是polyfill的例子

    // 源代码
    var a = Promise.resolve(1);
    
    // 编译后的代码
    var _promise = require('babel-runtime/core-js/promise');
    
    var a = _promise.resolve(1); // Promise被替换为_promise
    

    虽然虽然可以优雅的解决问题,但是引入的文件非常之大,比如只用了ES6中数组的find功能,可能就会引入一个几千行的代码,我的建议对于库来说能不用最好不用

    打包

    编译解决了ES6到ES5的问题,打包可以把多个文件合并成一个文件,对外提供统一的文件入口,打包解决的是依赖引入的问题

    rollup vs webpack

    我选择的rollup作为打包工具,rollup号称下一代打包方案,其有如下功能

    • 依赖解析,打包构建
    • 仅支持ES6模块
    • Tree shaking

    webpack作为最流行的打包方案,rollup作为下一代打包方案,其实一句话就可以总结二者的区别:库使用rollup,其他场景使用webpack

    为什么我会这么说呢?下面通过例子对比下webpack和rollup的区别

    假设我们有两个文件,index.js和bar.js,其代码如下

    bar.js对外暴漏一个函数bar

    export default function bar() {
      console.log('bar')
    }
    

    index.js引用bar.js

    import bar from './bar';
    
    bar()
    

    下面是webpack的配置文件webpack.config.js

    const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        }
    };
    

    下面来看一下webpack打包输出的内容,o(╯□╰)o,别着急,我们的代码在最下面的几行,上面这一大片代码其实是webpack生成的简易模块系统,webpack的方案问题在于会生成很多冗余代码,这对于业务代码来说没什么问题,但对于库来说就不太友好了

    注意:下面的代码基于webpack3,webpack4增加了scope hoisting,已经把多个模块合并到一个匿名函数中

    /******/
    (function(modules) { // webpackBootstrap
        /******/ // The module cache
        /******/
        var installedModules = {};
        /******/
        /******/ // The require function
        /******/
        function __webpack_require__(moduleId) {
            /******/
            /******/ // Check if module is in cache
            /******/
            if (installedModules[moduleId]) {
                /******/
                return installedModules[moduleId].exports;
                /******/
            }
            /******/ // Create a new module (and put it into the cache)
            /******/
            var module = installedModules[moduleId] = {
                /******/
                i: moduleId,
                /******/
                l: false,
                /******/
                exports: {}
                /******/
            };
            /******/
            /******/ // Execute the module function
            /******/
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
            /******/
            /******/ // Flag the module as loaded
            /******/
            module.l = true;
            /******/
            /******/ // Return the exports of the module
            /******/
            return module.exports;
            /******/
        }
        /******/
        /******/
        /******/ // expose the modules object (__webpack_modules__)
        /******/
        __webpack_require__.m = modules;
        /******/
        /******/ // expose the module cache
        /******/
        __webpack_require__.c = installedModules;
        /******/
        /******/ // define getter function for harmony exports
        /******/
        __webpack_require__.d = function(exports, name, getter) {
            /******/
            if (!__webpack_require__.o(exports, name)) {
                /******/
                Object.defineProperty(exports, name, {
                    /******/
                    configurable: false,
                    /******/
                    enumerable: true,
                    /******/
                    get: getter
                    /******/
                });
                /******/
            }
            /******/
        };
        /******/
        /******/ // getDefaultExport function for compatibility with non-harmony modules
        /******/
        __webpack_require__.n = function(module) {
            /******/
            var getter = module && module.__esModule ?
                /******/
                function getDefault() { return module['default']; } :
                /******/
                function getModuleExports() { return module; };
            /******/
            __webpack_require__.d(getter, 'a', getter);
            /******/
            return getter;
            /******/
        };
        /******/
        /******/ // Object.prototype.hasOwnProperty.call
        /******/
        __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
        /******/
        /******/ // __webpack_public_path__
        /******/
        __webpack_require__.p = "";
        /******/
        /******/ // Load entry module and return exports
        /******/
        return __webpack_require__(__webpack_require__.s = 0);
        /******/
    })
    /************************************************************************/
    /******/
    ([
        /* 0 */
        /***/
        (function(module, __webpack_exports__, __webpack_require__) {
    
            "use strict";
            Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
            /* harmony import */
            var __WEBPACK_IMPORTED_MODULE_0__bar__ = __webpack_require__(1);
    
    
            Object(__WEBPACK_IMPORTED_MODULE_0__bar__["a" /* default */ ])()
    
    
            /***/
        }),
        /* 1 */
        /***/
        (function(module, __webpack_exports__, __webpack_require__) {
    
            "use strict";
            /* harmony export (immutable) */
            __webpack_exports__["a"] = bar;
    
            function bar() {
                //
                console.log('bar')
            }
    
    
            /***/
        })
        /******/
    ]);
    

    下面来看看rollup的结果,rollup的配置和webpack类似

    export default {
        input: 'src/index.js',
        output: {
            file: 'dist/bundle2.js',
            format: 'cjs'
        }
    };
    

    下面看看rollup的产出,简直完美有没有,模块完全消失了,rollup通过顺序引入到同一个文件来解决模块依赖问题,rollup的方案如果要做拆包的话就会有问题,因为模块完全透明了,但这对于库开发者来说简直就是最完美的方案

    'use strict';
    
    function bar() {
      //
      console.log('bar');
    }
    
    bar();
    

    模块化方案

    在ES6模块化之前,JS社区探索出了一些模块系统,比如node中的commonjs,浏览器中的AMD,还有可以同时兼容不同模块系统的UMD,如果对这部分内容感兴趣,可以看我之前的一篇文章《JavaScript模块的前世今生

    对于浏览器原生,预编译工具和node,不同环境中的模块化方案也不同;由于浏览器环境不能够解析第三方依赖,所以浏览器环境需要把依赖也进行打包处理;不同环境下引用的文件也不相同,下面通过一个表格对比下

    浏览器(script,AMD,CMD) 预编译工具(webpack,rollup,fis) Node
    引用文件 index.aio.js index.esm.js index.js
    模块化方案 UMD ES Module commonjs
    自身依赖 打包 打包 打包
    第三方依赖 打包 不打包 不打包

    注意: legacy模式下的模块系统可以兼容ie6-8,但由于rollup的一个bug(这个bug是我发现的,但rollup并不打算修复,╮(╯▽╰)╭哎),legacy模式下,不可同时使用 export 与 export default

    tree shaking

    rollup是天然支持tree shaking,tree shaking可以提出依赖模块中没有被使用的部分,这对于第三方依赖非常有帮助,可以极大的降低包的体积

    举个例子,假设index.js只是用了第三方包is.js中的一个函数isString,没有treeshaking会将is.js全部引用进来

    而使用了treeshaking的话则可以将is.js中的其他函数剔除,仅保留isString函数

    规范

    无规矩不成方圆,特别是对于开源项目,由于会有多人参与,所以大家遵守一份规范会事半功倍

    编辑器规范

    首先可以通过.editorconfig来保证缩进、换行的一致性,目前绝大部分浏览器都已经支持,可以看这里

    下面的配置设置在js,css和html中都用空格代替tab,tab为4个空格,使用unix换行符,使用utf8字符集,每个文件结尾添加一个空行

    root = true
    
    [{*.js,*.css,*.html}]
    indent_style = space
    indent_size = 4
    end_of_line = lf
    charset = utf-8
    insert_final_newline = true
    
    [{package.json,.*rc,*.yml}]
    indent_style = space
    indent_size = 2
    

    代码风格

    其次可以通过eslint来保证代码风格一致,关于eslint的安装和配置这里不再展开解释了,在jslib-base中只需要运行下面的命令就可以进行代码校验了,eslint的配置文件位于config/.eslintrc.js

    npm run lint
    

    设计规范

    eslint只能够保证代码规范,却不能保证提供优秀的接口设计,关于函数接口设计有一些指导规则

    参数数量

    • 函数的参数个数最多不要超过5个

    可选参数

    • 可选参数应该放到后面
    • 可选参数数量超过三个时,可以使用对象传入
    • 可选参数,应该提供默认值

    参数校验与类型转换

    • 必传参数,如果不传要报错
    • 对下列类型要做强制检验,类型不对要报错(object, array, function)
    • 对下列类型要做自动转换(number, string, boolean)
    • 对于复合类型的内部数据,也要做上面的两个步骤
    • 对于number转换后如果为NaN,要做特殊处理(有默认值的赋值为默认值,无默认值的要报错)

    参数类型

    • 参数尽量使用值类型(简单类型)
    • 参数尽量不要使用复杂类型(避免副作用)
    • 使用复杂类型时,层级不要过深
    • 使用复杂数据类型时,应该进行深拷贝(避免副作用)

    函数返回值

    • 返回值可返回操作结果(获取接口),操作是否成功(保存接口)
    • 返回值的类型要保持一致
    • 返回值尽量使用值类型(简单类型)
    • 返回值尽量不要使用复杂类型(避免副作用)

    版本规范

    版本应该遵守开源社区通用的语义化版本

    版本号格式:x.y.z

    • x 主版本号,不兼容的改动
    • y 次版本号,兼容的改动
    • z 修订版本号,bug修复

    Git commit规范

    代码的提交应该遵守规范,这里推荐一个我的规范

    测试

    没有单元测试的库都是耍流氓,单元测试能够保证每次交付都是有质量保证的,业务代码由于一次性和时间成本可以不做单元测试,但开源库由于需要反复迭代,对质量要求又极高,所以单元测试是必不可少的

    关于单元测试有很多技术方案,其中一种选择是mocha+chai,mocha是一个单元测试框架,用来组织、运行单元测试,并输出测试报告;chai是一个断言库,用来做单元测试的断言功能

    由于chai不能够兼容ie6-8,所以选择了另一个断言库——expect.js,expect是一个BDD断言库,兼容性非常好,所以我选择的是mocha+expect.js

    关于BDD与TDD的区别这里不再赘述,感兴趣的同学可以自行查阅相关资料

    有了测试的框架,还需要写单元测试的代码,下面是一个例子

    var expect = require('expect.js');
    
    var base = require('../dist/index.js');
    
    describe('单元测试', function() {
        describe('功能1', function() {
            it('相等', function() {
                expect(1).to.equal(1);
            });
        });
    });
    

    然后只需运行下面的命令,mocha会自动运行test目录下面的js文件

    mocha
    

    mocha支持在node和浏览器中测试,但上面的框架在浏览器下有一个问题,浏览器没法支持require('expect.js'),我用了一个比较hack的方法解决问题,早浏览器中重新定义了require的含义

    <script src="../../node_modules/mocha/mocha.js"></script>
    <script src="../../node_modules/expect.js/index.js"></script>
    <script>
        var libs = {
            'expect.js': expect,
            '../dist/index.js': jslib_base
        };
        var require = function(path) {
            return libs[path];
        }
    </script>
    

    下面是用mocha生成测试报告的例子,左边是在node中,右边是在浏览器中

    可持续集成

    没有可持续集成的库都是原始人,如果每次push都能够自动运行单元测试就好了,这样就省去了手动运行的繁琐,好在travis-ci已经为我们提供了这个功能

    用GitHub登录travis-ci,就可以看到自己在GitHub上的项目了,然后需要打开下项目的开关,才能够打开自动集成功能

    第二步,还需要在项目中添加一个文件.travis.yml,内容如下,这样就可以在每次push时自动在node 4 6 8版本下运行npm test命令,从而实现自动测试的目的

    language: node_js
    node_js:
      - "8"
      - "6"
      - "4"
    

    其他内容

    开源库希望得到用户的反馈,如果对用户提的issue有要求,可以设置一个模版,用来规范github上用户反馈的issue需要制定一些信息

    通过提供.github/ISSUE_TEMPLATE文件可以给issue提供模版,下面是一个例子,用户提issue时会自动带上如下的提示信息

    ### 问题是什么
    问题的具体描述,尽量详细
    
    ### 环境
    - 手机: 小米6
    - 系统:安卓7.1.1
    - 浏览器:chrome 61
    - jslib-base版本:0.2.0
    - 其他版本信息
    
    ### 在线例子
    如果有请提供在线例子
    
    ### 其他
    其他信息
    

    jsmini

    jsmini是基于jslib-base的一系列库,jsmini的理念是小而美,并且无第三方依赖,开源了很多能力,能够
    助力库开发者

    总结

    五年弹指一挥间,本文总结了自己做开源项目的一些经验,希望能够帮助大家,所有介绍的内容都可以在jslib-base里面找到

    jslib-base是一个拿来即用脚手架,赋能js第三方库开源,快速开源一个标准的js库

    最后再送给大家一句话,开源一个项目,重在开始,贵在坚持

    最后推荐下我的新书《React状态管理与同构实战》,深入解读前沿同构技术,感谢大家支持

    京东:https://item.jd.com/12403508.html

    当当:http://product.dangdang.com/25308679.html

    最后最后招聘前端,后端,客户端啦!地点:北京+上海+成都,感兴趣的同学,可以把简历发到我的邮箱: yanhaijing@yeah.net

    原文网址:http://yanhaijing.com/javascript/2018/08/17/2020-js-lib/

    关于Fundebug

    Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

    展开全文
  • JavaScript——如何构建自己JS库

    千次阅读 热门讨论 2015-12-14 12:16:24
    :为什么要构建JS库? 当然,能够更好的实现以后代码的复用,最终达到高效开发的目的。比如我们所见的比较大型和优秀的。JQuery、Prototype等……里面包含了很多小而精悍的小函数。使用自己库中这些小函数不但...

    一:为什么要构建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!


    展开全文
  • JS---创建自己的“JavaScript库”,原来如此简单

    万次阅读 多人点赞 2012-06-14 16:54:33
    在上篇文章中提到了JavaScript库实际上就是堆函数的集合,就是方便给你调用的不用自己写那些功能强大的函数……这篇文章说说如何创建JavaScript库及需要注意的问题!期待您光临斧正! 行文目录:点击对应...
  • 前言 关于这个问题我目前只调试成功了一种方法 ...为例子,在上面添加几个js代码 步骤 我们在项目的src文件夹下创建utils文件夹(其实名称可以随意起) ...其中common是一个包含了名为showInfo的方法的对象 f...
  • 打造自己js库(base篇)

    千次阅读 2018-07-17 16:13:22
    随着code经验的增加,函数封装,可复用性组件开发可以说是一个水到渠成的过程,最近一直想写一个属于自己js库,将自己用的较多的组件都放在里面,但是也一直被搁置,因为我感觉自己目前能力可能不够,但是不试试...
  • 学习编程以来,接触过Basic,C/C++,Swift,JavaScript和Python五种语言,其中最爱的当属Python,简洁的语法和丰富的让我一直沉迷于此,尽管最近实习工作中用的是C++。 最近一年,我将大把的时间投入到学习编程中,...
  • Javascript必须掌握的js库

    千次阅读 2016-01-25 13:52:39
    JavaScript脚本库是一个预先用JavaScript语言好的库。使用JavaScript库可以更轻松地开发基于JavaScript的应用程序,尤其是对于AJAX和其他以Web为中心的技术。当我们在为一个项目选定开发技术的时候,选择一个明星...
  • jQuery 是一个的更少,但做的更多”的轻量级 JavaScript 。 jQuery 实例 通过实例来学习!在 W3School,您将找到许多可以在线编辑并测试的 jQuery 实例。 jQuery 实例 jQuer
  • 这是一个相当巧妙的方法,以确保模块松耦合,因为你事实上只是跟踪用户做什么,而不是哪个模块生成的消息。 这种方法已经被我介绍给我的团队,而且我一直很热心地帮助我的队友知道如何使用它。 我对这个方法...
  • JavaScript 加密Crypto-JS

    千次阅读 2016-08-22 11:55:37
    CryptoJS是一个javascript写的加密类库,使用起来简单方便。目前已支持的算法包括: MD5SHA-1SHA-256AESRabbitMARC4HMAC HMAC-MD5HMAC-SHA1HMAC-SHA256 PBKDF2 具体介绍和下载链接地址:...
  • 项目基于webpack 简单配置 当前目录结构: |- /config //webpack配置项 |- webpack.common.js |- webpack.dev.js |- webpack.prod.js |- /dist //出口文件 |- ...... |- /node_modules |- /src //...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 308,304
精华内容 123,321
关键字:

如何自己写一个js库