javascript中import和export用法示例总结
更新时间：2025年05月22日 10:32:16 作者：dreamw
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种,前者用于服务器,后者用于浏览器,这篇文章给大家介绍了javascript中import和export用法总结,感兴趣的朋友一起看看吧
import
import 和 require 的区别
import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型工程非常不方便。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');
` 。
ES6 在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
import 的几种用法:
import defaultName from 'modules.js';
import { export } from 'modules';
import { export as ex1 } from 'modules';
import { export1, export2 } from 'modules.js';
import { export1 as ex1, export2 as ex2 } from 'moduls.js';
import defaultName, { expoprt } from 'modules';
import * as moduleName from 'modules.js';
import defaultName， * as moduleName from 'modules';
import 'modules';import用法解释
- import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。某些打包工具可以允许或要求使用扩展名。
- 上面代码使用的 ==as== 关键字，相当于import 进来的‘值’的别名。
import * from 'xx'将导入整个模块的内容，而import defaultName 和 import { export1， export2 } 将导入export的某个对象或值- 最后一种方式
import 'modules'将运行模块中的全局代码，而不导入任何值。 - import的形式需要export的支持，比如
import defaultName from 'module.js将导出 在modules.js中export default的对象或值。
export
如上，export也是es6的内容，和import是一对。
export的几种用法
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;export用法解释
- 命名导出
比如：
<!--module.js-->
const ex1 = 'xxx';
const fun = function() {...}
export { ex1, fun as demoFun};
export let ex2 = 'demo';
export function multiply(x, y) {
return x * y;
};对应的import 写法
<!--main.js-->
import { ex1, demoFun, ex2, multiply } from 'module.js';- 默认导出
export 命名导出需要export 名字和import名字严格一致。而export default命令，为模块指定默认输出，在import 的时候可以随意命名名字。一个模块只能有一个默认输出，也就是说 export default 一个模块只能用一次。
用法:
// a.js 输出一个默认函数
export default function add(x, y) { return x + y; }
import anyName from 'a.js';
// b.js 输出一个默认变量
let name = 'b.js';
export default name;
import anyName from 'b.js'
// c.js 输出一个类
export default class { ...}
import anyClass from 'c.js';
// d.js 输出一个值
export default 1;
import value from 'd.js'- export 和 import 混合使用(模块重定向)
也就是在一个模块之中，先输入后输出同一个模块。比如:
如:
<!--命名导出 引入的命名导出-->
export { foo, bar } from 'my_module';
// 等价为，值得注意的是 在该模块中不能直接使用 foo 和 bar。
import { foo, bar } from 'my_module';
export { foo, bar };
export * from './other-module'; // 导出所有方法，但注意此种方法不会到导出module.js中的默认导出变量。
// 导出 默认导出用下面写法
export {default} from './other-module';参考
阮一峰 Module的语法
MDN import 命令
MDN export 语法
到此这篇关于javascript中import和export用法总结的文章就介绍到这了,更多相关js import和export用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天，复习了一下JavaScript的数组，然后，把他的一些奇葩行为总结了一下，分享在脚本之家平台，欢迎大家参考2016-01-01
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了JS限制文本框只能输入数字和字母方法,本文给出了限制只能输入数字、限制只能输入字母、限制只能输入数字和字母3种脚本,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了微信小程序如何调用图片接口API并居中显示,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了js 创建对象的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了微信小程序结合Storage实现搜索历史效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下2017-10-10
前几天在朋友的iPhone上面玩了一个连锁泡泡游戏，头脑发热就想用js写一个。2009-09-09
js跨域是指通过js在不同的域之间进行数据传输或通信，只要协议、域名、端口有任何一个不同，都被当作是不同的域，在这篇文章中讲给大家介绍一下js中几种实用的跨域方法原理,需要的朋友可以参考下2023-06-06
最新评论