프론트엔드 지식 JavaScript 모듈 모듈 학습

모듈은 JS 모듈입니다. 동일한 유형 또는 관련된 데이터와 기능이 많고 메소드를 전체적으로 표시해야 하는 경우 별도로 모듈로 정의할 수 있는 것으로 알고 있습니다. 즉, 모듈입니다. Module의 의미는 코드를 논리적으로 독립적인 하위 집합으로 나누어 코드를 모듈화하는 것입니다. 각 하위 집합은 특정 기능을 처리한 다음 별도로 호출됩니다. 모듈, 즉 모듈은
자동으로 엄격 모드를 채택하고

, "user strict"가 모듈 헤더에 추가되었는지 여부에 관계없이

규약은 함수 매개변수의 변경 사항을 자동으로 반영하지 않으며 이를 가리키는 것을 금지합니다. 전역 객체에 modules에는 두 개의 키워드가 있습니다. Imports 및 내보내기

Imports: 다른 모듈에서 제공하는 함수를 입력하는 데 사용됩니다

• Exports: 외부 인터페이스를 지정하는 데 사용
모듈은 독립된 파일

, 파일

내의 모든 변수는 외부에서 가져올 수 없습니다 . 모듈 내부의 변수를 외부에서 읽으려면 export 키워드를 사용하여 변수를 출력해야 합니다. 변수, 클래스

let a='a';
let b='b';
let c='c';
export {a,b,c}

함수를 내보낼 수도 있습니다. 출력 변수의 이름을 바꾸려면 가져오기 명령에서 as 키워드를 사용하고 이름을 a

로 변경해야 합니다. 예:

import {name as a} from '.../xxx.js'

추가로, import 개선 효과가 있습니다

, 어디에 인용해도

전체 모듈의 최상위로 승격되어 먼저 실행됩니다로드할 특정 값을 지정하는 것 외에도 즉, 별표(*)를 사용하여 개체를 지정하고 모든 출력 값이 이 개체에 로드됩니다. 예를 들어

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

export default

에서는

모듈 파일의 기본 출력을 설정합니다. 각 모듈에는 하나의 기본 출력만 허용됩니다. 또한 export default는 중괄호를 추가할 필요가 없습니다. 기본적으로 export default는 default라는 변수나 메서드를 출력하고 시스템에서 이름을 지정할 수 있기 때문입니다.

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

여러 번 로드되면

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

Browse와 같이 병합 후 로드와 동일합니다. ES6 모듈을 로드하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그도 사용되지만 type="module" 속성은 필수입니다. 추가됩니다.

<script type="module">
</script>

브라우저는 type="module"이 포함된 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 비동기적으로 로드하므로 브라우저를 차단하지 않습니다. 즉, 전체 페이지가 렌더링될 때까지 기다립니다. 그 후 모듈 스크립트를 실행하는 것은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 defer 속성을 ​​활성화하는 것과 같습니다.

3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，但是要加入type="module"属性。

rrreee

浏览器对于带有type="module"的3f1c4e4b6b16bbbd69b2ee476dc4f83a，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的defer属性。

模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的，同时利用顶层的this等于undefined모듈에서 최상위 this 키워드는 창을 가리키는 대신 정의되지 않음

을 반환합니다. 즉, 모듈의 최상위 수준에서 this 키워드를 사용하는 동시에 최상위 수준의 this가 있는 구문 포인트를 사용하는 것은 의미가 없습니다. 현재 코드가 ES6 모듈에 있는지 감지할 수 있는 undefine

과 동일합니다. .

관련글 :

웹 프론트엔드 학습을 위한 상식 상세 소개

JavaScript를 시작하기 위한 기본지식 js를 배우고 싶은 친구들이 참고하시면 됩니다🎜🎜

위 내용은 프론트엔드 지식 JavaScript 모듈 모듈 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!