Heim >Web-Frontend >js-Tutorial >Vergleichen Sie die Unterschiede zwischen Import und Require in Javascript

Vergleichen Sie die Unterschiede zwischen Import und Require in Javascript

巴扎黑
巴扎黑Original
2017-08-15 10:19:001960Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung und den Unterschied zwischen Javascript (es2016)-Import und Require vor. Interessierte können mehr darüber erfahren.

In diesem Artikel wird die Verwendung von Javascript (es2016)-Import vorgestellt und require. Ich möchte Ihnen die detaillierte Erklärung des Unterschieds wie folgt mitteilen:

Schreiben Sie eine einfache js-Datei, vorausgesetzt, der Name lautet: lib.js. Angenommen, der Inhalt lautet wie folgt:


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

Auf diese Weise können die in der Bibliothek definierten Eigenschaften und Methoden an anderer Stelle referenziert werden, nämlich importieren und benötigen.


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

Sie können auch die Standardexportinformationen festlegen, wofür die Definition des Exportstandards {} in lib.js erforderlich ist. Auf „Default“ kann ein Parameter oder ein Array folgen. Die Schreibmethode ist:


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

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

Normalerweise ist es üblicher, die erste Methode zu verwenden. Verwenden Sie dann Import, um dieses Array oder diese Parameter abzurufen. Der Import kann jedoch nur für den statischen Import verwendet werden, was bedeutet, dass er auf der obersten Ebene am Anfang der Datei geschrieben werden muss. Und erfordern, dass eine dynamische Belastung erreicht werden kann.

加载方式 规范 命令 特点
运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
编译时加载 ESMAScript6+ import 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。


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

Das obige ist der detaillierte Inhalt vonVergleichen Sie die Unterschiede zwischen Import und Require in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn