在上一篇文章中提到了JavaScript库实际上就是一堆函数的集合，就是方便给你调用的不用自己写那些功能强大的函数……这篇文章说一说如何创建JavaScript库及需要注意的问题！期待您光临斧正！
行文目录：点击对应目录进行跳转
一.编写JavaScript库要注意的问题
为了让自己的JS库构建的更加优雅、合理，我们编写JS库时要注意两方面的内容：
1.不要使用版本检测，而要使用能力检测
由于浏览器的类型和版本太多，以及不断的新的浏览器出现，我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。"浏览器检测"也叫"版本检测"通常被认为是一种错误的做法，浏览器检测的最佳实践是能力检测，通常也被称为对象检测，指的是在代码执行之前检测某个脚本对象or方法是否存在，而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在，那么说明浏览器能够使用它，而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式
// 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文件标题下方，例如
<title>ICTest</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<script language="JavaScript" type="text/javascript" src="IC.js"></script>
然后，在body属性中调用JS库中的函数，两种方式
①<body onload="myNameSpace.$()"></body> //myNameSpace为定义的命名空间，可以调用自己构建的JS库文件中到函数了
②<body onload="window.myNameSpace.$()"></body> //在命名空间前加上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
<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 onload="AZJ.$();"> <!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body onload="window.AZJ.$();">-->
</body>
3.运行网页，运行结果如图
四.完善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<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页面进行测试
当从界面只传递一个参数时，代码设计
<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" onclick="testClick()"/>
</body>
运行结果为：点击"Click Me"按钮，弹出网页消息：AZJtest
当从界面传递两个参数时，代码设计
<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" onclick="testClick()"/>
</body>
运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2
实例深入：编写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<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页面进行测试
测试方式同上面传递两个参数的方式，代码设计如下
<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" onclick="testClick()"/>
</body>
运行结果，同上述方法中传递两个参数的情况。
文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢？
分享到：
相关推荐
创建动态网格布局从未如此简单。 使用Magic Grid，您所要做的就是指定一个容器并监听更改。 为了方便起见，还提供了其他一些配置选项，但它们都很简单。 实时检查。 您可以阅读有关实现的详细信息。 注意：网格中...
clicker 我为 Udacity 的 JavaScript 设计模式课程创建的一个小项目##如何运行应用程序您可以通过以下几种方式访问应用程序： 在 hhttps://github.com/jbuechs/Udacity-cat-clicker.git 克隆 GitHub 存储库并...
音讯网路 通过JavaScript TypeScript编写的声波进行数据传输。...基于频移键控（> = v1.2.0）的自制网络堆栈音频网络库是一个业余项目，其目标是创建一个使用声波传输数据的简单网络堆栈。 最初它是使用PSK调制技术，
用html创建计算表单从未如此简单和容易： < form id =" calx_form " > < input data-cell =" A1 " > < input data-cell =" A2 " > < input data-cell =" A3 " > < input data-formula =...
在您可以信任的浏览器中创建 Wi-Fi 二维码的简单和最小体验。 JavaScript 足以完成工作，但仍保持可读性和可操作性，即使在编译时也是如此（当前 46 行源代码，62 行编译）。 只有一个外部依赖项，即二维码库 。 ...
您需要的终极JavaScript验证库。 死了的简单流利的API。 可定制可重用。 -v8n简介v8n是v alidatio n的首字母缩写。 请注意，在“验证”字词中，它在v和n之间恰好有八个字母。 这与我们过去在i18n ， a11y ， l10n .....
:necktie:Necktie –一个简单的DOM绑定工具Necktie是...该工具允许您注册将使用适当的Element作为参数调用的函数或类，即使该函数或类是动态创建或删除的也是如此。 例如：从'@ lesniewski.pro / necktie'导入{领带}；
感谢您的，它使创建开发环境变得如此容易。 安装 使用--recursive标志克隆此存储库，也可以获取库。 $ git clone --recursive https://github.com/arqex/react-datetime-playground.git 安装react-datetime和游乐...
构建表单并向其中添加验证从未如此简单。 该API生成符合XHTML Strict 1.0的代码。 在客户端进行现场验证，以最大程度地减少流量开销。 服务器上的字段验证可强制执行验证规则，并防止通过SQL注入对表单进行修改...
Fastcord FastCord是一个Nodejs CLI应用程序... 在您的计算机上克隆/下载此存储库后，此应用程序的使用很简单。 您将在终端上运行node index.js命令并回答问题，然后将创建bot文件夹。 特别感谢和 。 提供想法和支持。
为了使一些JavaScript库运行，通常需要花费一些时间来设置开发环境和后端系统。 这就是为什么启动项目如此之多的原因。 我们只是想创建一个轻量级的无服务器单页网站。 该站点的开发方法是摆脱任何捆绑器，编译器...
gridstack.js是一个用于移动设备的Javascript库，用于仪表板布局和创建。 制作拖放式多列仪表板从未如此简单。 gridstack.js允许您构建可拖动的，响应式的Bootstrap v3友好布局。 它还伟大工程 ， ，。 在Slack上...
基本过程类似于： 扫描 Github 上的所有存储库拉取所有分支及其当前的 sha 哈希值，将它们组合起来创建存储库版本指纹扫描当前存储桶中的所有包，并从元数据中提取最后记录的版本指纹计算需要备份的存储库，然后： ...
该存储库包含一个Discord机器人，该机器人的创建方式与我要求执行此任务的方式相同。 我知道，这很糟糕，但事实就是如此。 环境 您必须将机器人的令牌放入index.js文件的client.login()中，并用TOKEN替换它。 您还...
UpUp是一个很小JavaScript库，可确保您的用户始终可以访问您网站的内容，即使他们是在飞机上，在电梯中或在水下20,000个联盟中也是如此。 Mobile-First已成为构建现代站点的实际标准。 但是，在每个人都在移动的...
我发现自己在写更多东西，并且想让与社区共享该内容变得如此简单。 通过数字花园，我可以与人们分享想法，而不必将面食材料复制到GitHub Gist。 安装 安装所需的库： yarn add gatsby gatsby-theme-digital-garden ...
这个库是一个简单的工具，可以按域对redux代码进行分组。 您可以将同一域中的操作和缩减器分组在同一文件（或文件夹，或任何您喜欢的文件）中。 安装 npm install redux-plug --save yarn add redux-plug 如何使用 ...
我刚刚开始玩弄 MetalSmith，但我想我会把它作为一个入门项目来创建，以帮助我自己和其他像我一样的人小心翼翼地使用 Metal。 我在 Robin 的教程中遇到的问题 第1部分 MetalSmith.build() 方法必须传递错误和/或...
笔记艺术JS :guitar: :fire: :fire: | 音乐是一种起源于自然的高度通用的艺术，已被人类作为一种表达方式和一种艺术而接受。 现在，它也将由机器处理。 目录 关于 更轻松地创建音符，和弦，音阶。 设计简单直观...