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

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

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

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

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

[javascript] view plaincopyprint?

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

<span style="font-family:FangSong_GB2312;">//JavaScript库模板代码

(function (){

function $(){

alert("被调用到喽！");

/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；

其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，

所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/

}

//注册命名空间 'myNameSpace' 到window对象上

window['myNameSpace'] = {}

//把$函数注册到 'myNameSpace'命名空间中

window['myNameSpace']['$']=$;

})();</span>

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

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

[javascript] view plaincopyprint?

<span style="font-size: 18px; "><span style="font-family:FangSong_GB2312;"><title>ICTest</title>



<script language="JavaScript" type="text/javascript" src="IC.js"></script>

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

<span style="font-size: 18px; "><span style="font-family:FangSong_GB2312;">//ZAJ.js库代码

(function (){

function $(){

alert("AZJ.js库被调用到喽！");

}

//注册命名空间 'AZJ' 到window对象上

window['AZJ'] = {}

//把$函数注册到 'AZJ'命名空间中

window['AZJ']['$']=$;

})();</span></span>

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

[html] view plaincopyprint?

<span style="font-size: 18px; "><span style="font-family:FangSong_GB2312;"><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>调用js库测试</title>



<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>

</head>

<body οnlοad="AZJ.$();"> 

</body></span></span>

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

四.完善JavaScript库

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

1.$()方法

2.getElementsByClassName()方法

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

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

[javascript] view plaincopyprint?

<span style="font-family:FangSong_GB2312;font-size:18px;">//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']['$']=$;

})();</span>

2.在HTML页面进行测试

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

[html] view plaincopyprint?

<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>



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

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

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

[html] view plaincopyprint?

<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>



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

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

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

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

[javascript] view plaincopyprint?

<span style="font-family:FangSong_GB2312;font-size:18px;">//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;

})();</span>

2.在HTML页面进行测试

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

[html] view plaincopyprint?

<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>



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

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

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

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

[Javascript_库编写]创建自己的“JavaScript库”相关推荐

如何创建一个开源Javascript库 | Lynda教程中文字幕
如何创建一个开源Javascript库 | Lynda教程中文字幕 Creating an Open Source JavaScript Library 课程ID: 604269 时长: 5.5小时 ...
python tvtk库_PyCharm创建虚拟环境和 TVTK库的安装
注:示例系统环境:Windows10 64位 + Anaconda3: 昨天安装TVTK库遇到些麻烦,当时随便将库下到个文件夹安装后(没找到VENV文件夹...), 进行测试:from tvtk.to ...
「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
linux 创建路径函数,Linux函数库的创建方法(2)
2. 静态库的创建与使用静态库本质就是一组 .o 组成的压缩文件,扩展名为 .a / .lib 代码如下: ar -crv libXXX.a mmmm.o nnnn.o XXX 是库名,mmmm.o ...
动态库、静态库的创建及使用
文章目录 1. 库 2. 静态库与动态库区别 3. 静态库的创建和使用静态库的创建和使用的命令 4. 动态库的创建和使用动态库创建和使用的命令 5. 让程序找到动态库(三种方法) 1. 库 ...
linux编译ios动态库,[Linux] linux下生成静态库和动态库
g++使用用g++编译hello world 1. 编写hello world代码 2. 使用g++命令编译生成可执行文件hello.out 3. g++命令规则预编译 g++ -E hello. ...
优雅的创建一个JavaScript库
这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不 ...
angular2创建应用_如何在Angular 2+应用程序中使用JavaScript库
angular2创建应用 Do you remember when you were learning AngularJS (version 1), and tutorials kept tellin ...
十二步创建你的第一个JavaScript库
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...

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

[Javascript_库编写]创建自己的“JavaScript库”相关推荐

最新文章

热门文章