ES6 모듈 및 애플리케이션
7227 단어 reactwebdevjavascriptbeginners
이제 좋은 소식이 있습니다(약간 오래된 소식). 일반적으로 ES6으로 알려진 ECMAScript 2015 릴리스와 함께 모듈이 바닐라 JavaScript에 도입되었습니다. 이 릴리스에는 바닐라 JS를 완전히 새로운 수준으로 끌어올린 많은 기능이 포함되어 있습니다. 이러한 기능에는 화살표 함수, 나머지 및 확산, 구조화, 클래스, let 및 const, 모듈 등이 포함됩니다. 이 기사에서는 바닐라 JavaScript에서 모듈과 해당 애플리케이션에만 초점을 맞출 것입니다.
ES6 모듈의 적용
우선 기본 스크립트와 모듈이 있는 폴더를 생성합니다. 한 모듈은 덧셈에 사용되고 다른 모듈은 뺄셈에 사용됩니다.
폴더 구조는 다음과 같습니다.
index.html
script.js
myModules/
add.js
sub.js
Some resources may use the .mjs extension to note module files but we’ll use a different approach by including type=”module” in our script tag. This is shown below:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>
이제 하나는 더하기, 다른 하나는 빼기를 위한 함수를 만들어 보겠습니다.
//add.js
function add(a, b){
return a + b;
}
//sub.js
function sub(a, b){
return a - b;
}
내보내기 및 가져오기
우리가 한 일은 함수가 있는 일반 스크립트를 만드는 것뿐입니다. 그렇다면 다른 스크립트에서 이러한 기능을 어떻게 사용할 수 있습니까? 이것은 내보내기 및 가져오기 키워드를 사용하여 수행됩니다.
모듈의 기능에 액세스하려면 모듈을 만든 곳에서 내보낸 다음 사용할 파일로 가져와야 합니다.
add.js를 내보내자:
//add.js
export function add(a, b){
return a + b;
}
이제 함수 앞에 내보내기를 추가하여 해당 함수를 사용할 수 있는 다른 스크립트로 스크립트를 가져올 수 있습니다.
동일한 프로세스가 sub.js에 대해 수행됩니다.
//sub.js
export function sub(a, b){
return a - b;
}
이제 스크립트를 내보냈으므로 기본 스크립트로 가져와서 사용하겠습니다.
//script.js
import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"
console.log(add(6, 4)); // 10
console.log(sub(6, 4)); // 2
구문은 매우 이해하기 쉽습니다. import 키워드로 시작하고 중괄호 안에 중첩된 가져올 함수의 이름을 입력한 다음 마지막으로 스크립트를 가져온 경로를 입력합니다.
처음부터 새 매개변수를 사용하여 함수를 생성하지 않고 추가 및 하위 함수를 사용하는 방법에 주목하십니까? 이것이 ES6 모듈의 힘입니다. 이제 스크립트는 생성 시 내보내고 사용 전에 가져오기만 하면 어디에서나 재사용할 수 있습니다. 이제 이 스크립트를 사용하려는 다른 스크립트로 가져올 수 있습니다. 또한 다른 모든 스크립트의 진입점 역할을 하는 하나의 스크립트를 생성하여 HTML 파일에서 여러 스크립트 태그를 사용하지 않아도 됩니다.
다른 것으로 가져올 때 함수의 이름을 동일하게 변경할 수 있습니다. 예를 들어, 하위 기능을 가져오고 싶지만 '빼기'라고 부르고 싶습니다. 가져오는 동안 함수의 원래 이름 뒤에 "as"를 추가하면 됩니다. 아래 예:
//script.js
import { sub as minus } from "./myModules/sub.js"
console.log(minus(6, 4)); // 2
읽어 주셔서 감사합니다; 이 기사가 귀하의 시간 가치가 있기를 바랍니다. Twitter에서 팔로우하기 내 받은 편지함은 항상 열려 있습니다. 안녕!
Reference
이 문제에 관하여(ES6 모듈 및 애플리케이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ihechikara/es6-modules-and-application-4j4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html
script.js
myModules/
add.js
sub.js
Some resources may use the .mjs extension to note module files but we’ll use a different approach by including type=”module” in our script tag. This is shown below:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>
//add.js
function add(a, b){
return a + b;
}
//sub.js
function sub(a, b){
return a - b;
}
우리가 한 일은 함수가 있는 일반 스크립트를 만드는 것뿐입니다. 그렇다면 다른 스크립트에서 이러한 기능을 어떻게 사용할 수 있습니까? 이것은 내보내기 및 가져오기 키워드를 사용하여 수행됩니다.
모듈의 기능에 액세스하려면 모듈을 만든 곳에서 내보낸 다음 사용할 파일로 가져와야 합니다.
add.js를 내보내자:
//add.js
export function add(a, b){
return a + b;
}
이제 함수 앞에 내보내기를 추가하여 해당 함수를 사용할 수 있는 다른 스크립트로 스크립트를 가져올 수 있습니다.
동일한 프로세스가 sub.js에 대해 수행됩니다.
//sub.js
export function sub(a, b){
return a - b;
}
이제 스크립트를 내보냈으므로 기본 스크립트로 가져와서 사용하겠습니다.
//script.js
import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"
console.log(add(6, 4)); // 10
console.log(sub(6, 4)); // 2
구문은 매우 이해하기 쉽습니다. import 키워드로 시작하고 중괄호 안에 중첩된 가져올 함수의 이름을 입력한 다음 마지막으로 스크립트를 가져온 경로를 입력합니다.
처음부터 새 매개변수를 사용하여 함수를 생성하지 않고 추가 및 하위 함수를 사용하는 방법에 주목하십니까? 이것이 ES6 모듈의 힘입니다. 이제 스크립트는 생성 시 내보내고 사용 전에 가져오기만 하면 어디에서나 재사용할 수 있습니다. 이제 이 스크립트를 사용하려는 다른 스크립트로 가져올 수 있습니다. 또한 다른 모든 스크립트의 진입점 역할을 하는 하나의 스크립트를 생성하여 HTML 파일에서 여러 스크립트 태그를 사용하지 않아도 됩니다.
다른 것으로 가져올 때 함수의 이름을 동일하게 변경할 수 있습니다. 예를 들어, 하위 기능을 가져오고 싶지만 '빼기'라고 부르고 싶습니다. 가져오는 동안 함수의 원래 이름 뒤에 "as"를 추가하면 됩니다. 아래 예:
//script.js
import { sub as minus } from "./myModules/sub.js"
console.log(minus(6, 4)); // 2
읽어 주셔서 감사합니다; 이 기사가 귀하의 시간 가치가 있기를 바랍니다. Twitter에서 팔로우하기 내 받은 편지함은 항상 열려 있습니다. 안녕!
Reference
이 문제에 관하여(ES6 모듈 및 애플리케이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ihechikara/es6-modules-and-application-4j4c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
