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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.
Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.
JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AMJavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.
JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AMJavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AMJavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AMPython은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.
JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AMJavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
