Maison > interface Web > js tutoriel > Comparez les différences entre import et require en Javascript

Comparez les différences entre import et require en Javascript

巴扎黑
Libérer: 2017-08-15 10:19:00
original
1959 Les gens l'ont consulté

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));
}
Copier après la connexion

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;
Copier après la connexion

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 };
Copier après la connexion

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


const incrementCounter = function ({dispatch,state}){
 dispatch(‘INCREMENT‘)
}
export default {
 incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal