Comparez les différences entre import et require en Javascript

Cet article présente principalement l'utilisation et la différence entre l'importation Javascript (es2016) et require. Il a une certaine valeur de référence. Ceux qui sont intéressés peuvent en savoir plus

Cet article présente l'utilisation de l'importation Javascript (es2016). et require. J'aimerais partager avec vous l'explication détaillée de la différence, comme suit :

Écrivez un fichier js simple, en supposant que le nom est : lib.js. Supposons que le contenu soit le suivant :

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

De cette façon, les propriétés et méthodes définies dans la bibliothèque peuvent être référencées ailleurs. Il existe deux méthodes de référence, à savoir. importer et exiger.

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

Vous pouvez également définir les informations d'exportation par défaut, ce qui nécessite de définir export default {} dans lib.js. La valeur par défaut peut être suivie d'un paramètre ou d'un tableau. La méthode d'écriture est :

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

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

Il est généralement plus habituel d'utiliser la première méthode. Utilisez ensuite import pour obtenir ce tableau ou ces paramètres. Cependant, l'importation ne peut être utilisée que pour une importation statique, ce qui signifie qu'elle doit être écrite au niveau supérieur au début du fichier. Et exiger peut réaliser un chargement dynamique.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!