> 웹 프론트엔드 > JS 튜토리얼 > Javascript에서 import와 require의 차이점 비교

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

巴扎黑
풀어 주다: 2017-08-15 10:19:00
원래의
1989명이 탐색했습니다.

이 글에서는 주로 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는 동적 로딩을 달성할 수 있습니다.

로드 방법사양CommandFeatures
런타임 로딩CommonJS/AMDrequirecommun 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿