자신만의 "JavaScript 라이브러리"를 만들어 보세요. 정말 쉽습니다.
- PHPz원래의
- 2017-04-02 16:35:521721검색
JavaScript 라이브러리는 실제로 강력한 함수를 직접 작성할 필요 없이 호출하기 편리한 함수 모음입니다... 이 기사에서는 JavaScript 라이브러리를 만드는 방법과 필요한 사항에 대해 설명합니다. 질문에 주의하세요! 귀하의 방문을 기대하고 있습니다!
작성 내용 :
JavaScript 라이브러리용 템플릿 코드 작성
JavaScript 라이브러리 작성(예제)
완벽한 JavaScript 라이브러리(예제)
1. JavaScript 라이브러리 작성 시 주의할 점
JS 라이브러리를 더욱 우아하고 합리적으로 만들기 위해 JS 라이브러리를 작성합니다. 두 가지 측면에 주의하시기 바랍니다:
1. 버전 감지를 사용하지 말고 기능 감지를 사용하세요
브라우저의 종류와 버전이 너무 많고, 새로운 브라우저가 계속해서 등장하기 때문입니다. 다양한 버전의 브라우저를 감지하는 연습을 위해 많은 시간과 비용을 투자하는 것은 불가능합니다. "버전 감지"라고도 하는 "브라우저 감지"는 종종 잘못된 방법으로 간주됩니다. 브라우저 감지의 가장 좋은 방법은 코드가 실행되기 전에 객체를 감지하는 것을 의미하는 기능 감지입니다. 스크립트 객체나 메소드의 결정은 어떤 브라우저에 대한 특정 지식에 의존하지 않습니다. 필요한 개체와 메서드가 존재하는 경우 브라우저는 이를 사용할 수 있으며 코드는 예상대로 실행될 수 있습니다. 기능 감지는
// JavaScript Document
if(document.body && document.body.getElementsByTagName){
//使用document.body.getElementsByTagName的代码
}2. 여러 js 라이브러리 파일을 사용할 때 네임스페이스
를 사용합니다. 동일한 이름을 가진 파일 간의 충돌은 일반적으로 네임스페이스를 사용하여 해결됩니다. JavaScript는 동일한 이름을 가진 함수를 지원하지만 마지막에 로드된 함수만 사용합니다(오버로딩은 지원되지 않으며 매개변수는 고려되지 않으며 함수 이름만 확인됨). 마지막에 로드된 함수가 호출됩니다. 따라서 네임스페이스를 사용하지 않으면 동일한 이름으로 함수가 충돌하는 문제가 발생하기 쉽습니다.
네임스페이스 사용에 대한 두 가지 원칙: 고유성과 공유 금지.
고유성: 고유한 네임스페이스 이름을 선택하세요. 예를 들어 Google 지도에서는 모든 식별자에 G 접두어를 추가합니다. js는 대소문자를 구분합니다.
공유 없음: 공유가 없다는 것은 아무 것도 공유되지 않음을 의미합니다. 자신만의 $function을 만들 때 잘 알려진 라이브러리(예: Prototype)의 $function과 충돌하여 Prototype의 $가 실패할 수 있습니다. 일부 잘 알려진 라이브러리(jQuery, 프로토타입) 또는 기타 기존 함수와 충돌하지 않으려면 익명 함수를 사용하여 코드 비공유를 달성하세요. 예를 들어, 이 $() 함수만 사용하도록 하려면 JS 트릭을 사용할 수 있습니다.
//匿名函数
(function(){
//code,运行的代码
})();참고: () JavaScript에는 두 가지 의미가 있습니다. 하나는 연산자이고 다른 하나는 구분 기호입니다.
위의 익명 함수에 대해 두 가지 설명이 필요합니다.
①빨간색 괄호는 나누기를 나타내며 내부 함수가 부분임을 나타냅니다.
②녹색 괄호는 연산자를 나타내며, 빨간색 괄호 안의 함수를 실행해야 함을 나타냅니다. 이는 익명 함수를 정의한 후 바로 실행하도록 하는 것과 같습니다.2. 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库中的函数
3. )
웹 페이지가 로드될 때 대화 상자를 표시하는 간단한 예를 구현합니다. 이 예에서는 프로그래밍 소프트웨어 Dreamweaver 8을 사용합니다. 1. 여기서는 네임스페이스 이름을 WALY.js로 지정하여 자신만의 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. 웹 페이지를 실행하면 아래와 같은 실행 결과가 나옵니다
[object Object]
자바스크립트 라이브러리 개선
여기서 우리는 주로 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>running 결과: "Click Me" 버튼을 클릭하면 팝업 웹 메시지가 나타납니다: AZJtest
当从界面传递两个参数时，代码设计
<span style="font-family:FangSong_GB2312;font-size:18px;"><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></span>运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2
实例深入：编写getElementByClassName()方法
1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下
<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页面进行测试
测试方式同上面传递两个参数的方式，代码设计如下
<span style="font-family:FangSong_GB2312;font-size:18px;"><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></span>运行结果，同上述方法中传递两个参数的情况。
文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢
위 내용은 자신만의 "JavaScript 라이브러리"를 만들어 보세요. 정말 쉽습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!