es6과 commonjs의 차이점은 무엇입니까

차이점: 1. CommonJS는 값의 복사본을 출력하고 ES6은 값에 대한 참조를 출력합니다. 2. CommonJS는 런타임에 로드되고 ES6은 컴파일 타임 출력 인터페이스입니다. 3. CommonJS의 요구 사항은 모듈을 로드하는 것입니다. ES6의 가져오기는 비동기식 로딩이며 독립적인 모듈 종속성에 대한 해결 단계를 갖습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6과 commonjs의 차이점은 무엇인가요

1. CommonJS 모듈은 값의 복사본을 출력하고, ES6 모듈은 해당 값에 대한 참조를 출력합니다.

Commonjs 사용법, 함께 살펴볼까요

1. 먼저 lib.js 파일을 만듭니다.

// lib.js
const counter = 3;
const incCounter = ()=>{
  counter++
}
module.exports = {
  counter,
  incCounter
}

2. main.js를 다시 만들고 commonjs를 사용하여 가져옵니다.

// main.js
var lib = require('./lib');
console.log(lib)
console.log(lib.counter);  // 3
lib.incCounter();
console.log(lib.counter); // 3

lib.js 모듈이 로드된 후에는 내부 변경 사항이 lib.counter 출력에 영향을 주지 않습니다. 이는 mod.counter가 기본 유형 값이고 캐시되기 때문입니다.

esmodule

// lib.js
export let counter = 3;
export function incCounter () {
  counter++;
}

// main.js
import { counter, incCounter } from './util.mjs'
console.log(counter);  //3 
incCounter()
console.log(counter)  //4

ES6 모듈은 실행 결과를 캐시하지 않지만 로드된 모듈의 값을 동적으로 가져옵니다. 변수는 항상 해당 변수가 위치한 모듈에 바인딩됩니다.

추가됨: esmodule을 통해 가져온 변수는 재할당하거나 수정할 수 없습니다.

2. CommonJS 모듈은 런타임에 로드되고 ES6 모듈은 컴파일 타임에 출력 인터페이스입니다

// CommonJS模块
let { stat, exists, readFile } = require('fs');
 
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

위 코드의 핵심은 fs 모듈을 전체적으로 로드하는 것입니다(즉, fs를 로드하는 모든 방법) , 개체(_fs)를 생성한 다음 이 개체에서 3개의 메서드를 읽습니다. 이러한 종류의 로딩을 "런타임 로딩"이라고 합니다. 왜냐하면 이 개체는 런타임에만 얻을 수 있어 컴파일 타임에 "정적 최적화"를 수행하는 것이 불가능하기 때문입니다. 따라서 commonjs는 실행될 때만 모듈을 로딩하는 방식이다.

import { stat, exists, readFile } from 'fs';

위 코드의 핵심은 fs 모듈에서 3개의 메소드를 로드하는 것이고, 다른 메소드는 로드되지 않습니다. 이러한 종류의 로딩을 "컴파일 시간 로딩" 또는 정적 로딩이라고 합니다. 즉, ES6은 컴파일 시간에 모듈 로딩을 완료할 수 있으며 이는 CommonJS 모듈의 로딩 방법보다 더 효율적입니다.

3. CommonJS 모듈은 모듈을 동기식으로 로드하는 것이며, ES6 모듈의 가져오기 명령은 비동기식 로딩이며, 독립적인 모듈 종속성 구문 분석 단계입니다.

동기식 로딩: 소위 동기식 로딩은 리소스나 모듈을 로딩하는 프로세스가

비동기 로딩: 후속 코드 실행을 차단하지 않습니다.

사례를 살펴보고 다음 디렉터리를 생성해 보겠습니다.

| -- a.js
| -- index.js
| -- c.js

// a.js
console.log('a.js文件的执行');
const importFun = () => {
  console.log(require('./c').c);
}
importFun()
module.exports = {
  importFun
}

// index.js
const A = require('./a');
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
const c = 3
module.exports = {
  c
}

명령어를 실행해 보세요. require의 내용은 후속 코드의 실행을 차단합니다. c.js가 먼저 인쇄된 다음 index.js가 인쇄되므로 require()가 동기적으로 로드됩니다.

// a.js文件的执行
// c.js的运行
// 3
// index.js的执行

// a.js
console.log('a.js文件的执行');
export const importFun = () => {
  import('./c.js').then(({c})=>{
    console.log(c)
  })
}
importFun()

// index.js
import {importFun} from './a.js'
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
export const c = 3

다음을 볼 수 있습니다. c.js가 What is print에 있기 때문에 import()는 리소스를 비동기적으로 로드합니다. index.js의 끝은 후속 코드 실행을 차단하지 않습니다.

요약: 위는 commonjs와 esmodule의 차이점입니다.

1: CommonJS 모듈은 ES6 모듈 값의 복사본을 출력합니다. 값

2: CommonJS 모듈은 런타임에 로드되고, ES6 모듈은 컴파일 타임에 출력 인터페이스입니다.

3: CommonJS 모듈의 require()는 모듈을 동기적으로 로드하고, ES6 모듈의 import 명령은 독립적인 모듈 종속성의 구문 분석 단계가 있습니다

[관련 권장 사항:

javascript 비디오 튜토리얼

, 웹 프론트 엔드]

위 내용은 es6과 commonjs의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!