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

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

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

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

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

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

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

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

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'

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

<script>标签，但是要加入type="module"属性。

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

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

과 동일합니다. .

관련글 :

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