es6 모듈에서 출력된 값이 복사되나요?
아니요, ES6 모듈은 값에 대한 참조를 출력하는 반면 CommonJS 모듈은 값의 복사본을 출력합니다. ES6 모듈에서는 JS 엔진이 스크립트를 정적으로 분석하고 모듈 로딩 명령 import를 발견하면 스크립트가 실제로 실행될 때 이 읽기 전용 참조를 기반으로 로드된 모듈로 이동합니다. 참고하세요. ES6 모듈은 동적 참조입니다. ES6 모듈은 실행 결과를 캐시하지 않지만 로드된 모듈에서 값을 동적으로 가져오며 변수는 항상 해당 모듈이 위치한 모듈에 바인딩됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
브라우저 로딩
기본적으로 브라우저는 JavaScript 스크립트를 동기적으로 로드합니다. 즉, 렌더링 엔진이
<script>
태그를 발견하면 중지하고 다음이 될 때까지 기다립니다. 실행 스크립트를 완료하고 렌더링을 계속합니다.<script>
标签就会停下来,等到执行完脚本,再继续向下渲染。
如果是外部脚本,还必须加入脚本下载的时间。
如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应。这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是两种异步加载的语法。
<script src="path/to/myModule.js" defer></script> <script src="path/to/myModule.js" async></script>
<script>
标签打开defer或async属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。
defer
要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),才会执行;async
一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。
一句话,defer是“渲染完再执行”,async是“下载完就执行”。另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。
浏览器加载 ES6 模块,也使用<script>
标签,但是要加入type="module"
属性。浏览器对于带有type="module"
的<script>
,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了
<script type="module" src="./foo.js"></script>
如果网页有多个,它们会按照在页面出现的顺序依次执行。
注意:
<script>
标签的async属性也可以打开,这时只要加载完成,渲染引擎就会中断渲染立即执行。执行完成后,再恢复渲染。一旦使用了async属性,就不会按照在页面出现的顺序执行,而是只要该模块加载完成,就执行该模块。
对于外部的模块脚本(上例是foo.js),有几点需要注意:
- 代码是在模块作用域之中运行,而不是在全局作用域运行。模块内部的顶层变量,外部不可见。
- 模块脚本自动采用严格模式,不管有没有声明use strict。
- 模块之中,可以使用import命令加载其他模块(.js后缀不可省略,需要提供绝对 URL 或相对 URL),也可以使用export命令输出对外接口。
- 模块之中,顶层的this关键字返回
undefined
- 외부 스크립트인 경우 스크립트 다운로드 시간도 추가해야 합니다. 스크립트의 크기가 크면 다운로드 및 실행에 시간이 오래 걸리므로 브라우저가 차단되고 사용자는 아무런 응답 없이 브라우저가 '멈춘다'는 느낌을 받게 됩니다. 이는 분명히 매우 나쁜 경험이므로 브라우저는 스크립트의 비동기 로딩을 허용합니다. 다음은 비동기 로딩을 위한 두 가지 구문입니다.
<script type="module"> import utils from "./utils.js"; // other code </script>
<script>
태그는 defer 또는 async 속성을 활성화하고 스크립트는 비동기적으로 로드됩니다. 렌더링 엔진이 이 명령줄을 만나면 외부 스크립트를 다운로드하기 시작하지만 다운로드 및 실행을 기다리지 않고 다음 명령
을 직접 실행합니다.
defer
는 전체 페이지가 메모리에서 정상적으로 렌더링될 때까지 실행되지 않습니다(DOM 구조가 완전히 생성되고 다른 스크립트가 실행됨). async
다운로드되면 렌더링 엔진이 렌더링을 중단하고 이 스크립트를 실행한 후 렌더링을 계속합니다.
한 문장에서
defer는 "렌더링 후 실행"을 의미하고 async는 "다운로드 후 실행"을 의미합니다. 또한 defer 스크립트가 여러 개인 경우 페이지에 나타나는 순서대로 로드되지만 비동기 스크립트가 여러 개 있으면 로드 순서를 보장할 수 없습니다.브라우저는 ES6 모듈을 로드하고
<script>
태그도 사용하지만type="module"
속성을 추가해야 합니다. 브라우저는type="module"
비동기식으로<script>
를 로드하며 브라우저를 차단하지 않습니다. 즉, 전체 페이지가 렌더링될 때까지 기다립니다. 그 후,🎜를 여는 것과 동일한 모듈 스크립트 🎜를 실행합니다. 웹페이지에// lib.js export let obj = {}; // main.js import { obj } from './lib'; obj.prop = 123; // OK obj = {}; // TypeError로그인 후 복사로그인 후 복사이 여러 개 있으면 표시된 순서대로 🎜실행됩니다. 페이지🎜 . 🎜🎜🎜참고:
<script>
태그의 비동기 속성도 설정할 수 있습니다. 이때 로딩이 완료되면 렌더링 엔진이 렌더링을 중단하고 실행합니다. 즉시. 실행이 완료되면 렌더링을 재개합니다. async 속성을 사용하면🎜는 페이지에 표시된 순서대로 실행되지 않고, 모듈이 있는 동안에는 실행됩니다. 짐을 실은. 🎜🎜🎜🎜외부 모듈 스크립트(위의 예는 foo.js)의 경우 몇 가지 참고할 사항이 있습니다. 🎜
🎜코드는 🎜전역 범위가 아닌 모듈 범위🎜에서 실행됩니다. 모듈 내부의 최상위 변수는 외부에 표시되지 않습니다. 🎜🎜모듈 스크립트는 use strict 선언 여부에 관계없이 자동으로 🎜엄격 모드를 채택🎜합니다. 🎜🎜모듈에서 import 명령을 사용하여 다른 모듈을 로드할 수 있습니다(🎜.js 접미사는 생략할 수 없으며 절대 URL 또는 상대 URL을 제공해야 합니다🎜). 또는 내보내기 명령을 사용하여 외부 모듈을 출력할 수 있습니다 인터페이스. 🎜🎜모듈에서 최상위 this 키워드는 창을 가리키는 대신
unjust
를 반환합니다. 즉, 모듈의 최상위 수준에서 이 키워드를 사용하는 것은 의미가 없습니다. 🎜🎜🎜동일한 모듈이 여러 번 로드되면 한 번만 실행됩니다🎜. 🎜🎜🎜🎜ES6 모듈은 웹 페이지에 포함될 수도 있으며 구문 동작은 외부 스크립트를 로드하는 것과 정확히 동일합니다. 🎜rrreee🎜🎜ES6 모듈과 CommonJS 모듈의 차이점🎜🎜🎜🎜CommonJS는 동기 로딩 모듈이고, ES6은 비동기 로딩 모듈입니다.🎜🎜🎜🎜🎜CommonJS 사양 로딩 모듈은 동기적입니다🎜. 즉, 🎜다음과 같은 경우에만 로딩이 완료되면 다음 작업을 수행할 수 있습니다🎜. Node.js는 주로 서버 프로그래밍에 사용되기 때문에 모듈 파일은 일반적으로 로컬 하드 디스크에 이미 존재하므로 빠르게 로드할 수 있으므로 비동기 로딩을 고려할 필요가 없으므로 CommonJS 사양이 더 적합합니다. 🎜
但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用异步模式。
浏览器加载 ES6 模块是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本
CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块
输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
ES6 模块
的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。
由于 ES6 输入的模块变量,只是一个“符号连接”,所以这个变量是只读的,对它进行重新赋值会报错。上面代码中,main.js从lib.js输入变量obj,可以对obj添加属性,但是重新赋值就会报错。因为变量obj指向的地址是只读的,不能重新赋值,这就好比main.js创造了一个名为obj的const变量。
// lib.js export let obj = {}; // main.js import { obj } from './lib'; obj.prop = 123; // OK obj = {}; // TypeError
此外,export通过接口,输出的是同一个值。不同的脚本加载这个接口,得到的都是同样的实例。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。
而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
【相关推荐:javascript视频教程、编程视频】
위 내용은 es6 모듈에서 출력된 값이 복사되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











ES6에서는 배열 객체의 reverse() 메서드를 사용하여 배열 반전을 달성할 수 있습니다. 이 메서드는 배열의 요소 순서를 반대로 지정하여 마지막 요소를 먼저 배치하고 첫 번째 요소를 마지막에 배치하는 데 사용됩니다. .뒤집다()". reverse() 메서드는 원래 배열을 수정합니다. 수정하지 않으려면 확장 연산자 "..."와 함께 사용해야 하며 구문은 "[...array].reverse()입니다. ".

비동기는 es7입니다. async 및 wait는 ES7에 새로 추가된 기능이며 비동기 작업을 위한 솔루션입니다. async/await는 공동 모듈 및 생성기 기능을 위한 구문 설탕이라고 할 수 있으며, 더 명확한 의미로 js 비동기 코드를 해결합니다. 이름에서 알 수 있듯이 async는 "비동기"를 의미합니다. async는 async와 wait 사이에 엄격한 규칙이 있음을 선언하는 데 사용되며, wait는 비동기 함수로만 작성될 수 있습니다.

단계: 1. "newA=new Set(a);newB=new Set(b);" 구문을 사용하여 두 배열을 각각 세트 유형으로 변환합니다. 2. has() 및 filter()를 사용하여 차이점 세트를 찾습니다. , " new Set([...newA].filter(x =>!newB.has(x)))" 구문을 사용하면 차이점 집합 요소가 집합 컬렉션에 포함되어 반환됩니다. 3. 배열을 사용합니다. from 집합을 배열 유형으로 변환하려면 구문 "Array.from(collection)"을 입력하세요.

브라우저 호환성을 위해. JS의 새로운 사양으로 ES6에는 새로운 구문과 API가 많이 추가되었습니다. 그러나 최신 브라우저는 ES6의 새로운 기능을 잘 지원하지 않으므로 ES6 코드를 ES5 코드로 변환해야 합니다. WeChat 웹 개발자 도구에서는 개발자의 ES6 구문 코드를 세 터미널 모두에서 잘 지원되는 ES5 코드로 변환하는 데 기본적으로 babel이 사용됩니다. 이를 통해 개발자는 프로젝트에서만 서로 다른 환경으로 인해 발생하는 개발 문제를 해결할 수 있습니다. "ES6에서 ES5로" 옵션.

es5에서는 for 문과 indexOf() 함수를 사용하여 배열 중복 제거를 수행할 수 있습니다. 구문 "for(i=0;i<array length;i++){a=newArr.indexOf(arr[i]);if( a== -1){...}}". es6에서는 스프레드 연산자 Array.from() 및 Set을 사용하여 중복을 제거할 수 있습니다. 먼저 배열을 Set 객체로 변환하여 중복을 제거한 다음 스프레드 연산자 또는 Array.from() 함수를 사용하여 제거해야 합니다. Set 개체를 다시 배열로 변환합니다.

es6에서 임시 데드존은 블록을 닫힌 범위로 만드는 let 및 const 명령을 나타내는 구문 오류입니다. 코드 블록 내에서 let/const 명령을 사용하여 변수를 선언하기 전에는 해당 변수를 사용할 수 없으며 변수가 선언되기 전에는 변수의 "데드 존"에 속합니다. 이를 구문적으로 "임시 데드 존"이라고 합니다. ES6에서는 임시 데드존과 let 및 const 문에서 변수 승격이 발생하지 않도록 규정하고 있습니다. 이는 주로 런타임 오류를 줄이고 변수가 선언되기 전에 변수가 사용되어 예기치 않은 동작이 발생하는 것을 방지하기 위한 것입니다.

아니요, require는 CommonJS 사양의 모듈식 구문이고 es6 사양의 모듈식 구문은 import입니다. require는 런타임에 로드되고 import는 컴파일 타임에 로드됩니다. require는 코드의 어느 곳에나 작성할 수 있으며, import는 파일 상단에만 작성할 수 있으며 조건문이나 함수 범위 속성에서만 사용할 수 있습니다. require가 실행되면 성능이 상대적으로 낮습니다. 가져오기 컴파일 중에 도입된 모듈의 속성은 약간 더 높습니다.

지도가 주문되었습니다. ES6의 맵 유형은 많은 키-값 쌍을 저장하는 정렬된 목록입니다. 키 이름의 동등성은 "Objext.is()" 메소드를 호출하여 결정됩니다. , 따라서 숫자 5와 문자열 "5"는 두 가지 유형으로 판단되며 프로그램에서 두 개의 독립된 키로 나타날 수 있습니다.
