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

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

58

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

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

相关下载

更多

精品课程

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

共48课时 | 7.2万人学习

Django 教程
Django 教程

共28课时 | 3.1万人学习

MySQL 教程
MySQL 教程

共48课时 | 1.8万人学习

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

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