[Javascript_库编写]创建自己的“JavaScript库”

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

 

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

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

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

 

[javascript] view plaincopyprint?
  1. // JavaScript Document  
  2. if(document.body && document.body.getElementsByTagName){  
  3.     //使用document.body.getElementsByTagName的代码  
  4.     }  

 

2.使用命名空间

 

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

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

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

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

 

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

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

 


二.编写JavaScript库模板

 

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

 

[javascript] view plaincopyprint?
  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>  

 

 

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

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

 

[javascript] view plaincopyprint?
  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>  

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

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

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

 

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

 

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

 

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

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

 

[javascript] view plaincopyprint?
  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>  

 

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

 

[html] view plaincopyprint?
  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 οnlοad="AZJ.$();"> <!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body οnlοad="window.AZJ.$();">-->  
  9. </body></span></span>  

 

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

 

四.完善JavaScript库

 

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

1.$()方法

2.getElementsByClassName()方法

 

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

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

 

[javascript] view plaincopyprint?
  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>  

 

2.在HTML页面进行测试

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

 

[html] view plaincopyprint?
  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" οnclick="testClick()"/>  
  14. </body></span>  

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

 

 

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

 

[html] view plaincopyprint?
  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" οnclick="testClick()"/>  
  19. </body></span>  

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

 

 

 

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

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

 

[javascript] view plaincopyprint?
  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>  

2.在HTML页面进行测试

 

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

 

[html] view plaincopyprint?
  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" οnclick="testClick()"/>  
  19. </body></span>  

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

 

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

转载于:https://www.cnblogs.com/webapplee/p/3842475.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399242.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql5.6.24怎么打开_mysql 5.6.24 安装配置方法图文教程

mysql5.6.24怎么打开_mysql 5.6.24 安装配置方法图文教程

由于工作需要&#xff0c;开始使用mysql数据库&#xff0c;已经好久没有使用了。基本已经忘了差不多。今天重新安装配置了一下&#xff0c;写个随笔记录一下&#xff0c;以免自己以后需要的时候翻看&#xff0c;如有不正确或需要补充的&#xff0c;希望大家多多留言。首先下载m…
阅读更多...
sublime text 3安装及使用

sublime text 3安装及使用

安装配置 安装&#xff1a; 安装环境:Ubuntu 16.04 官网下载sublime text 3 https://www.sublimetext.com/3 解压&#xff1a; tar xvf 文件名 进入 sublime_text_3文件夹&#xff0c;运行 ./sublime_text 注册码&#xff1a;我用的时候有用 —– BEGIN LICENSE —–TwitterInc…
阅读更多...
微信公众号新功能-原创声明、赞赏功能、评论管理、页面模版

微信公众号新功能-原创声明、赞赏功能、评论管理、页面模版

原文&#xff1a;http://www.shichangbu.com/portal.php?modview&aid25931 公众号如何申请这些功能&#xff1f; 在微信公众号后台和QQ经常都有人问我诸如此类的问题&#xff1a;”微信公众平台原创声明怎么开通?“、”微信赞赏等功能是怎么回事…
阅读更多...
为什么闹钟设置了却不响_又被iPhone闹钟坑了？解决闹钟不响问题看这里！

为什么闹钟设置了却不响_又被iPhone闹钟坑了？解决闹钟不响问题看这里！

原标题&#xff1a;又被iPhone闹钟坑了&#xff1f;解决闹钟不响问题看这里&#xff01;你有没有过这样的体验&#xff0c;早上醒来&#xff0c;闹钟还没响&#xff0c;内心想&#xff1a;真好&#xff0c;还可以再睡会。拿起手机想看看还能再睡多久&#xff0c;结果……我的天…
阅读更多...
CSS3实现纸张边角卷起效果

CSS3实现纸张边角卷起效果

html代码 1 <body>2 <div class"page">3 <div class"page-box">4 <h1>5 兔子先生6 </h1>7 <p>8 这几…
阅读更多...
fzu 1894 单调队列

fzu 1894 单调队列

http://acm.fzu.edu.cn/problem.php?pid1894 Problem 1894 志愿者选拔Accept: 1328 Submit: 4200Time Limit: 1500 mSec Memory Limit : 32768 KB Problem Description 世博会马上就要开幕了&#xff0c;福州大学组织了一次志愿者选拔活动。参加志愿者选拔的同学们排队接…
阅读更多...
均线带角度的指标_选股指标：均线角度并列向上，量能倍增飞扬趋势明显，短线操作可考虑...

均线带角度的指标_选股指标：均线角度并列向上，量能倍增飞扬趋势明显，短线操作可考虑...

今天要讲的是量能飞扬的选股指标&#xff0c;这个指标是按照20日、30日、60日、120日均线反正切角度原理为基础设计的公式&#xff0c;这4条均线角度排列向上&#xff0c;股价呈现向上的趋势&#xff0c;选出的股票有大概率上涨的空间&#xff0c;完整的公式如下&#xff1a;A2…
阅读更多...
将链表中m-n范围内的数进行倒序

将链表中m-n范围内的数进行倒序

Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m 2 and n 4, return 1->4->3->2->5->NULL. Note:Given m, n satisfy the following condition:1 ≤ m ≤ n ≤ lengt…
阅读更多...
win10下安装ubuntu14.04双系统（UEFI固件）

win10下安装ubuntu14.04双系统（UEFI固件）

2019独角兽企业重金招聘Python工程师标准>>> 在windows10环境下安装双系统&#xff0c;遇到了很多坑。作为一个用惯了虚拟机的人&#xff0c;本想通过安装双系统来充分利用计算机本身的硬件资源&#xff0c;结果失败了n次&#xff0c;摸索了整整一天&#xff0c;看了…
阅读更多...
扫雷游戏制作学习过程

扫雷游戏制作学习过程

1. 扫雷游戏的构思&#xff1a; 设计为初级&#xff0c;中级&#xff0c;高级三个级别。 因此不妨设置为如下规格&#xff1a; 9x9 16x15和30x16 &#xff08;行&#xff0c;列&#xff09;规格不同地雷的数量也不同&#xff0c;分别为 10&#xff0c;40 &#xff0c;99 2.在…
阅读更多...
201621123080《Java程序设计》第十一周学习总结

201621123080《Java程序设计》第十一周学习总结

201621123080《Java程序设计》第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式&#xff08;思维导图或其他&#xff09;归纳总结多线程相关内容。 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读&#xff1a;多线程程序BounceThread 1.1 BallRunnable类有什么用&#…
阅读更多...
Unix/Linux环境C编程入门教程(27) 内存那些事儿

Unix/Linux环境C编程入门教程(27) 内存那些事儿

calloc() free() getpagesize() malloc() mmap() munmap()函数介绍calloc&#xff08;配置内存空间&#xff09; 相关函数 malloc&#xff0c;free&#xff0c;realloc&#xff0c;brk表头文件 #include <stdlib.h>定义函数 void *calloc(size_t nmemb&#xff0c;size_t…
阅读更多...
Fix an “Unapproved Caller” SecurityAgent Message in Mac OS X

Fix an “Unapproved Caller” SecurityAgent Message in Mac OS X

上午一进公司就被日本分公司的美女呼叫&#xff0c;说mac硬盘加密经常开机后需要输入硬盘加密密码才可以登录&#xff0c;我想应该是硬盘加密后没有给用户添加许可证&#xff0c;所以每次登录系统都要进行验证。于是远程到用户电脑上后&#xff0c;准备在硬盘加密的设置里添加用…
阅读更多...
ue 清理缓存_【PM项目管理系统】PM安装更新客户端、删除UE及清理IE缓存操作手册...

ue 清理缓存_【PM项目管理系统】PM安装更新客户端、删除UE及清理IE缓存操作手册...

第 1 页 共 9 页 PM 安装更新客户端、删除UE 及清理IE 缓存操作手册1、登录地址⑴登陆地址http://www.doczj.com/doc/45b822bf0c22590103029d30.html⑵安装或更新客户端安装客户端如果之前电脑上没有安装过客户端&#xff0c;需要下载并安装客户端。 打开IE 浏览器&#xff0c;…
阅读更多...
这绝对是有史以来最详细的web前端学习路线

这绝对是有史以来最详细的web前端学习路线

定要善用开发者工具。firefox的firebug和Chrome的F12都是很好的选择&#xff0c;用好了这个必会发现他带给你的帮助比看一本书更多。你把firebug摸透了你还担心对DOM理解不够&#xff1f;考虑到未来&#xff0c;html5和css3是必须学习的。看这篇总结的最全学习资料&#xff0c;…
阅读更多...
cocos2d 走动椭圆

cocos2d 走动椭圆

1.效果图艺术与规划说他想与我合作在全国率先主角光环加&#xff0c;椭圆形走动。cocos2d自带没有&#xff0c;參考网上的写了一个。2.椭圆数学知识有关椭圆的数学知识我已经忘光了。网上找了点资料&#xff1a;a是椭圆的长半轴&#xff0c;b是椭圆的短半轴。o是角度&#xff0…
阅读更多...
深度学习中用来训练的train.py 探究学习2.0（ 数据预处理）

深度学习中用来训练的train.py 探究学习2.0（ 数据预处理）

数据预处理 下列代码为train.py中常见的一些数据处理方法 train_transform transforms.Compose([transforms.Resize((224, 224)),transforms.RandomVerticalFlip(),# 随机旋转&#xff0c;-45度到45度之间随机选transforms.RandomRotation(45),# 从中心开始裁剪transforms.C…
阅读更多...
go语言入门(三)

go语言入门(三)

条件语句 go语言的条件语句结构如下&#xff1a; go语言的条件语句和其他语言类似。简单列举下&#xff1a; 1、if 语句&#xff0c;布尔表达式不需要括号 if 布尔表达式 { 　　/* 在布尔表达式为 true 时执行 */ 　　} 2、if...else语句 if 布尔表达式 { /* 在布尔表达式为 tr…
阅读更多...
HDU 1950 Bridging signals

HDU 1950 Bridging signals

那么一大篇的题目描述还真是吓人。 仔细一读其实就是一个LIS&#xff0c;还无任何变形。 刚刚学会了个二分优化的DP&#xff0c;1A无压力。 1 //#define LOCAL2 #include <iostream>3 #include <cstdio>4 #include <cstring>5 using namespace std;6 7 const…
阅读更多...
1.8暂停线程

1.8暂停线程

在java中&#xff0c;使用suspend()方法暂停线程&#xff0c;使用resume()方法恢复线程的执行。 1.8.1suspend与resume的使用&#xff1a; 线程代码&#xff1a; public class Thread1 extends Thread {private long i 0L;public long getI() {return i;}public void setI(lon…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023