Javascript에서 import와 require의 차이점 비교

이 글에서는 주로 Javascript(es2016) import와 require 사이의 자세한 사용법과 차이점을 소개합니다. 관심이 있는 경우 자세히 알아볼 수 있습니다.

이 글에서는 Javascript(es2016)의 자세한 사용법과 차이점을 소개합니다. 가져오기 및 요구 사항을 모두와 공유하세요. 세부 사항은 다음과 같습니다.

이름이 lib.js라고 가정하고 간단한 js 파일을 작성합니다. 내용은 다음과 같다고 가정합니다.

export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}

이렇게 하면 lib에 정의된 속성과 메서드를 다른 곳에서 참조할 수 있습니다. 즉 import와 require라는 두 가지 참조 방법이 있습니다.

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法儿
import * as lib from 'lib';
square = lib.square;

lib.js에서 내보내기 기본 {}을 정의해야 하는 기본 내보내기 정보를 설정할 수도 있습니다. 기본값 뒤에는 매개변수나 배열이 올 수 있습니다. 작성 방법은 다음과 같습니다.

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

일반적으로 첫 번째 방법을 사용하는 것이 더 일반적입니다. 그런 다음 import를 사용하여 이 배열이나 매개변수를 가져옵니다. 그러나 가져오기는 정적 가져오기에만 사용할 수 있습니다. 즉, 파일 시작 부분의 최상위 수준에 작성해야 합니다. 그리고 require는 동적 로딩을 달성할 수 있습니다.

로드 방법	사양	Command	Features
런타임 로딩	CommonJS/AMD	require	commun ity 솔루션은 서버/브라우저의 모듈 로딩 방식을 제공합니다. 비언어적 표준. 모듈 종속성 및 입/출력 변수는 런타임에만 확인할 수 있으며 정적 최적화는 수행할 수 없습니다.
컴파일 시 로드	ESMAScript6+	import	언어 사양 수준에서 모듈 기능을 지원합니다. JS에 매크로 및 유형 검사를 쉽게 도입할 수 있도록 컴파일 타임에 정적 분석을 지원합니다. 동적 바인딩.

const incrementCounter = function ({dispatch,state}){
 dispatch(‘INCREMENT‘)
}
export default {
 incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

위 내용은 Javascript에서 import와 require의 차이점 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!