javascript 고급 모듈 화 require.js 의 구체 적 인 사용 방법
7980 단어 require.js모듈 화
Require.js：
RequireJS 는 매우 작은 javascript 모듈 로 불 러 오 는 프레임 워 크 로 AMD(Asynchronous Module Definition,비동기 모듈 로 딩 메커니즘)규범 이 가장 잘 실현 되 는 것 중 하나 입 니 다.최신 판 requireJS 는 압축 후 14k 로 매우 가볍다 고 할 수 있다.또한 다른 프레임 워 크 와 조 화 를 이 룰 수 있 으 며,requireJS 를 사용 하면 우리 의 전단 코드 품질 을 향상 시 킬 것 입 니 다.
우선 일반적인 페이지 js 로드 를 살 펴 보 겠 습 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/index02.js" ></script>
</head>
<body>
<h1>this is a page.</h1>
</body>
</html>
이때,만약 우리 가 팝 업 상 자 를 조작 하지 않 는 다 면,페이지 는 이어서 불 러 오지 않 을 것 이 며,페이지 내용 은 없 을 것 이다.이것 은 우리 가 실현 하고 자 하 는 결과 가 아니다.
다음은 require.js 로 조작 하 겠 습 니 다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/require2.1.11.js"></script>
<script type="text/javascript">
require(["js/index","js/index01"],function(){
console.log(" js ");
},function(){
console.log(" js ");
});
</script>
</head>
<body>
</body>
</html>
define(function(){
console.log("this is a test!");
function test(){
console.log("haha,i am a test!");
}
test();
});현재 실행 결과:
이 때 페이지 의 내용 이 이미 나 타 났 음 을 알 수 있다.앞에서 우리 의 전통 적 인 것 처럼 js 가 실 행 된 후에 페이지 를 다시 불 러 오 기 를 기다 리 는 것 이 아니 라 페이지 로 딩 이 완 료 된 후에 야 js 코드 를 실행 하면 운행 효율 이 크게 향상 된다.
위의 코드 에 따라 requirejs 의 기본 API 를 분석 할 수 있 습 니 다.
requireJS 는 세 개의 변 수 를 정의 합 니 다:define,require,requirejs
require 는 세 개의 인자 가 있 습 니 다.
require(["js/index","js/index01"],function(){
console.log(" js ");
},function(){
console.log(" js ");
});
// ： require ， ， ， 。
// ： ， ，
// ： ， 。 ，js index01.js ， 。이전에 우리 가 불 러 온 것 은 모두 로 컬 js 파일 이 었 습 니 다.그러나 어떤 때 는 네트워크 에 있 는 파일 을 불 러 와 야 합 니 다.그러면 어떻게 불 러 와 야 합 니까?네트워크 에 있 는 js 파일 을 어떻게 불 러 오 는 지 소개 하 겠 습 니 다.
우 리 는 현재 jquery.js 파일 을 불 러 오 는 것 을 예 로 들 면:
// cdn jQuery ： http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js
//jQuery ： https://code.jquery.com/jquery-3.1.1.js
// ： ，
require.config({
paths : {
// ：jquery
"jquery" : ["https://code.jquery.com/jquery-3.1.1"]
}
});
//
require(["jquery","js/test01","js/test02"],function(){
alert(" ~~");
},function(){
alert(" ~~")
});
1.config 방법의 매개 변 수 는 대상 입 니 다.
2.paths 의 값 도 하나의 대상 입 니 다.
3.우리 가 인터넷 에 있 는 라 이브 러 리 의 이름 을 짓 는 것 은 임 의적 이지 만 의미 있 는 이름 을 짓 는 것 을 권장 합 니 다.다른 사람 은 이름 을 통 해 당신 의 네트워크 자원 이 어떤 자원 인지 알 수 있 습 니 다.
4.라 이브 러 리 의 값 은 하나의 배열 로 여러 개 를 동시에 쓸 수 있 음 을 의미 하 며 네트워크 이상 을 방지 합 니 다.
5.특히 주의:네트워크 자원 경 로 는 접미사 이름 을 가 져 올 수 없습니다.그렇지 않 으 면 찾 을 수 없습니다.
6.우 리 는 먼저 인터넷 에서 찾 도록 할 수 있 습 니 다.만약 에 찾 지 못 하면 현지에서 찾 아서 현지 서비스의 부담 을 줄 일 수 있 습 니 다(프로젝트 최적화 에 속 합 니 다).
require.config({
paths : {
// ，
"jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
}
});
//
require(["jquery","js/test01","js/test02"],function(){
alert(" ~~");
},function(){
alert(" ~~")
});
require.config({
paths : {
// ，
"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
// js ，
"test01" : ["js/test01"],
"test02" : ["js/test02"]
}
});
//
require(["jquery","test01","test02"],function(){
alert(" ~~");
},function(){
alert(" ~~")
});
require.config({
paths : {
// ，
"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
// js ，
"test01" : ["js/test01"],
"test02" : ["js/test02"]
}
});
<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">
require(["jquery","t1","t2"],function(){
alert(" ~~");
},function(){
alert(" ~~")
});
</script>
<script data-main="js/main" src="js/require2.1.11.js" ></script>코드 설명 은 다음 과 같 습 니 다.
//test01.js-- js
define(function(){
function test(){
console.log("this is test01.js");
}
test();
$("p").css("color","#DB7093");
});
//main.js--requirejs
require.config({
paths:{
"jquery":["jquery-1.8.3"],
"test":["test01"]
},
shim:{
"test":["jquery"]
}
});
require(["test"],function(){
console.log("success!");
});
//index.html-- ， js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" ></script>
</head>
<body>
<p>i am liyanan and this is a testn Page.</p>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
알 리 바 바 는 Nacos 를 바탕 으로 환경 격 리 실천 을 실현 했다.환경 격 리 의 또 다른 중요 한 장점 은 고장 을 신속하게 회복 할 수 있다 는 것 이다.특정한 환경의 서비스 에 문제 가 발생 하면 다음 설정 을 통 해 사용자 가 요청 한 경로 방향 을 바 꾸 고 요청 경 로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
