0

0

创建自己的“JavaScript库“,原来如此简单

PHPz

PHPz

发布时间:2017-04-02 16:35:52

|

1855人浏览过

|

来源于php中文网

原创

javascript库实际上就是一堆函数的集合,就是方便给你调用的不用自己写那些功能强大的函数……这篇文章说一说如何创建javascript库及需要注意的问题!期待您光临斧正!

行文目录:

编写JavaScript库要注意的问题

编写JavaScript库的模板代码

编写JavaScript库(实例)

立即学习Java免费学习笔记(深入)”;

完善JavaScript库(实例)

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

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

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

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

// 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库

//JavaScript库模板代码
(function (){
function $(){
alert("被调用到喽!"); 
/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法;
其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作,
所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/ 
}
 //注册命名空间 'myNameSpace' 到window对象上  
            window['myNameSpace'] = {}  
          
 //把$函数注册到 'myNameSpace'命名空间中
 window['myNameSpace']['$']=$; 
})();

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

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

ICTest

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

简单CMS
简单CMS

简单CMS购物分享平台是一套基于LAMP架构和ThinkPHP框架为基础的、免费的、开源系统,为广大站长建站提供简单创建一个属于自己的电子商务导购平台及图片信息分享平台。 简单CMS的主要特点: 1模板均来自目前最流行的平台。如:美丽说,蘑菇街,下一件等。 2数据可根据站长的需求进行自动有效推送。 3数据均为用户分享。 4广告精准定位。 5注重用户体验。 6运行高效。简单CMS(jdcms)发布

下载
①   //myNameSpace为定义的命名空间,可以调用自己构建的JS库文件中到函数了
② //在命名空间前加上window也可实现调用JS库中的函数

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

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

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

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

//ZAJ.js库代码
(function (){
function $(){
alert("AZJ.js库被调用到喽!"); 
}
 //注册命名空间 'AZJ' 到window对象上  
            window['AZJ'] = {}      
 //把$函数注册到 'AZJ'命名空间中
 window['AZJ']['$']=$;
})();

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



调用js库测试



 

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

[object Object]


四.完善JavaScript库

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

1.$()方法
2.getElementsByClassName()方法
实例初探:js库中只编写$()方法
1.建立"AZJ.js"库,编写$()方法,代码如下
//ZAJ.js库代码
(function (){
   //注册命名空间 'AZJ' 到window对象上  
        window['AZJ'] = {} 
   //$函数等同于getElementByID;
function $(){
var elements=new Array(); 
//将传来的参数进行遍历
for(var i=0;i调用js库测试







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

2.jpg

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

调用js库测试  
  
  
  
  
  
  
  
  

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

3.jpg

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

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

//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

2.在HTML页面进行测试

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

调用js库测试  
  
  
  
  
  
  
  
  

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

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

121

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

33

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

19

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

85

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

11

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

47

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.4万人学习

Django 教程
Django 教程

共28课时 | 3.2万人学习

MySQL 教程
MySQL 教程

共48课时 | 1.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号