ECMAScript(又名ES2015或ES)模块是在JavaScript中组织内聚代码块的一种方法。
ES模块系统有2个部分:
import 模块是使用 import 语法导入依赖项的模块:
import { concat } from './concatModule';
concat('a', 'b'); // => 'ab'
而被导入的模块使用export语法从自身导出组件:
export const concat = (paramA, paramB) => paramA + paramB;
import { concat } from './concatModule'使用ES模块的方式是静态的:意味着模块之间的依赖关系在编译时就已经知道了。
虽然静态导入在大多数情况下是有效的,但有时我们想节省客户的带宽并有条件地加载模块。
为了实现这一点,我们可以用不同的方式使用 import(pathToModule) 语法对模块进行新的动态导入:作为一个函数。动态导入是ES2020开始的一个JavaScript语言特性。
当import关键字用作函数而不是静态导入语法时:
const module = await import(pathToModule);
它返回一个promise ,并开始一个加载模块的异步任务。如果模块被成功加载,那么promise就会解析到模块的内容,否则,promise 就会被拒绝。
请注意,pathToModule可以是任何表达式,其值为表示导入模块路径的字符串。有效的值是普通的字符串字面意义(如./myModule)或有字符串的变量。
例如,我们在一个异步函数中加载一个模块。
async function loadMyModule() {
const myModule = await import('./myModule');
// ... use myModule
}
loadMyModule();
有趣的是,与静态导入相反,动态导入接受以模块路径求值的表达式
async function loadMyModule(pathToModule) {
const myModule = await import(pathToModule);
// ... use myModule
}
loadMyModule('./myModule');
现在,了解了如何加载模块后,我们来看看如何从导入的模块中提取组件。
考虑下面的模块:
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;
这里导出了一个 concat 函数。
如果想动态导入namedConcat.js,并访问命名的导出concat,那么只需通解构的方式就行了:
async function loadMyModule() {
const { concat } = await import('./namedConcat');
concat('b', 'c'); // => 'bc'
}
loadMyModule();
如果模块是默认导出的,我们可以使用default属性来访问。
还是上面的例子,我们将defaultConcat.js里面的concat函数默认导出:
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;
在动态导入模块中,可以使用default属性来访问:
async function loadMyModule() {
const { default: defaultImport } = await import('./defaultConcat');
defaultImport('b', 'c'); // => 'bc'
}
loadMyModule();
注意,default在JavaScript中是一个关键字,所以它不能用作变量名。
如果模块里面既有默认导出也有命名导出,同样也是使用解构的方式来访问:
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule');
// ...
}
loadMyModule();
建议在模块比较大的,或者要根据条件才导入的模块可以使用动态导入。
async function execBigModule(condition) {
if (condition) {
const { funcA } = await import('./bigModuleA');
funcA();
} else {
const { funcB } = await import('./bigModuleB');
funcB();
}
}
execBigModule(true);
对于小模块(如前面例子中的namedConcat.js或defaultConcat.js),只有几十行代码,使用动态导入在点杀鸡用牛刀感觉。
当调用 import(pathToModule) 作为一个函数时,其参数表示一个模块的指定符(又称路径),那么就会动态加载该模块。
在这种情况下,module = await import(pathToModule) 返回一个 promise ,该承诺解析为一个包含导入模块组件的对象。
Node.js(13.2及以上版本)和大多数现代浏览器都支持动态导入。
原文:https://dmitripavlutin.com/ecmascript-modules-dynamic-import/
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。
Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口
最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目
module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。
模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象
ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。
ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了
export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;
网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入
模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!