자신만의 'JavaScript 라이브러리'를 만들어 보세요. 정말 쉽습니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자신만의 'JavaScript 라이브러리'를 만들어 보세요. 정말 쉽습니다.

PHPz

Apr 02, 2017 pm 04:35 PM

JavaScript 라이브러리는 실제로 강력한 함수를 직접 작성할 필요 없이 호출하기 편리한 함수 모음입니다... 이 기사에서는 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对话框通常用于一些对用户的提示信息。*/ 
}
 //注册命名空间 &#39;myNameSpace&#39; 到window对象上  
            window[&#39;myNameSpace&#39;] = {}  
          
 //把$函数注册到 &#39;myNameSpace&#39;命名空间中
 window[&#39;myNameSpace&#39;][&#39;$&#39;]=$; 
})();

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库被调用到喽！"); 
}
 //注册命名空间 &#39;AZJ&#39; 到window对象上  
            window[&#39;AZJ&#39;] = {}      
 //把$函数注册到 &#39;AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
})();

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 (){
   //注册命名空间 &#39;AZJ&#39; 到window对象上  
        window[&#39;AZJ&#39;] = {} 
   //$函数等同于getElementByID；
function $(){
var elements=new Array(); 
//将传来的参数进行遍历
for(var i=0;i<arguments.length;i++){
var element=arguments[i];
//若参数为字符串类型，则取得该参数的id
if(typeof element==&#39;string&#39;){
element=document.getElementById(element);
}
//若参数长度为1，即只传递进来一个参数，则直接返回
if(arguments.length==1){
return element;
}
//若有多个参数传递进来，则将处理后的值压入elements数组中
elements.push(element);
}
//返回处理后的参数
return elements;
}
 
          
 //把创建的函数$注册到 &#39;window.AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
          
})();
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

자신만의 JavaScript 라이브러리를 만들어 보세요. 정말 쉽습니다.

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

<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

자신만의 JavaScript 라이브러리를 만들어 보세요. 정말 쉽습니다.

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

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

<span style="font-family:FangSong_GB2312;font-size:18px;">//ZAJ.js库代码  
    (function (){  
        //注册命名空间 &#39;AZJ&#39; 到window对象上    
        window[&#39;AZJ&#39;] = {}   
          
          //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注册到 &#39;window.AZJ&#39;命名空间中  
          window[&#39;AZJ&#39;][&#39;getElementsByClassName&#39;]=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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

See all articles