前言

编写js模块必须要搞懂import和export的关系
Google Chrome 84.0.4147.135 (正式版本) （64 位） (cohort: Stable Installs Only)
修订版本 c42bd09b3f24da1698d71d3b4f57402137163566-refs/branch-heads/4147@{#1102}
操作系统 Windows 10 OS Version 2004 (Build 19041.450)
JavaScript V8 8.4.371.23
注：使用命令 chrome://version/ 查看 JavaScript 版本
以 es6 的标准为主

分析

require 为 es6 以前的模块化解决方案。这里不介绍了。
export 是导出模块。
import 是导入模块。
export 和 import 搭配使用。

export

export语法用于导出类、函数、对象、指定文件（或模块）的原始值。

import

import语法用于导入类、函数、对象、指定文件（或模块）的原始值。

导出、导入类

MyClass.js

class MyClass {}MyClass.prototype.hello = function() {console.log("hello");
}export { MyClass };

导出名为 MyClass 的类，且 MyClass 处在导出第 1 位

jsTestMyClass.html

<script type="module">import { MyClass } from "./MyClass.js";let myClass = new MyClass();myClass.hello();
</script>

导入名为 MyClass 的类，且 MyClass 处在导入第 1 位

另：

导出的花样很多，这也是为啥要记录一下的原因。
一定要记住：怎么导出的，就要怎么导入。导出和导入是搭配使用的。
导出和导入的配对花样有哪些，后面慢慢补充，一篇记录不清楚，那就再来一篇。

执行效果：

导出、导入函数

MyFunction.js

function hello() {console.log("hello");
}export { hello };

导出名为 hello 的函数，且 hello 处在导出第 1 位

jsTestMyFunction.html

<script type="module">import { hello } from "./MyFunction.js";hello();
</script>

导入名为 hello 的函数，且 hello 处在导入第 1 位

执行效果：

导出、导入对象

MyObject.js

function hello () {console.log("hello");
}
var obj = { hello:hello };export { obj };

导出名为 obj 的对象，且 obj 处在导出第 1 位

jsTestMyObject.html

<script type="module">import { obj } from "./MyObject.js";console.log(obj);obj.hello();
</script>

导入名为 obj 的对象，且 obj 处在导入第 1 位

执行效果：

从打印 obj 的结果看，obj 是个对象

导出、导入指定文件（或模块）的原始值

JsModule.js

function hello() {console.log("hello");
}function run() {console.log("run");
}function jump() {console.log("jump");
}export { hello, run, jump };

导出名为 hello 的函数，且 hello 处在导出第 1 位
导出第 2 位是 run 函数
导出第 3 位是 jump 函数

MyModule.js

export { hello } from "./JsModule.js";

导出名为 hello 的函数，且 hello 处在导出第 1 位
hello 函数是从 JsModule.js 导入的

jsTestMyModule.html

<script type="module">import { hello } from "./MyModule.js";hello();
</script>

导入名为 hello 的函数，且 hello 处在导入第 1 位
hello 函数是从 MyModule.js 导入的

执行效果：

为了理解简单，均使用了导入导出第 1 位的模块。

参考

https://www.cnblogs.com/libin-1/p/7127481.html
https://blog.csdn.net/youlinhuanyan/article/details/105211072

js模块化：require、import和export相关推荐

js模块化：默认导出 export default
前言接 js模块化:require.import和export 研究一下默认导出默认导出形式1:export { xx as default } 默认导出形式2:export default { ...
JS 中的 import 与 export
模块模块就是实现特定功能的一组方法. 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.但是,JavaScript 不是一种模块化编程语言,在 ES6 以前,它是不支持类 ...
【JavaScript】前端模块化：import 和 export 的使用
为什么要有模块化? 多人开发时会遇到变量作用域问题. 解决方案:匿名函数,但是会带来代码不可复用的问题解决代码不可复用的问题,可以使用模块化: ES6 规范里的模块化实现比如可以使用type=mo ...
import export php,import与export在node.js中的使用方法
import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模 ...
Atitit.js模块化 atiImport 的新特性javascript import
Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...
【彻底搞清楚javascript中的require、import和export 】
彻底搞清楚javascript中的require.import和export - 最骚的就是你 - 博客园
JS模块化编程require.js简介
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
AMD and CMD are dead之js模块化黑魔法
缘由在2013-03-06 13:58的时候,曾甩下一片文章叫:<为什么不使用requirejs和seajs>,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然 ...
关于 JS 模块化的最佳实践总结
模块化开发是 JS 项目开发中的必备技能,它如同面向对象.设计模式一样,可以兼顾提升软件项目的可维护性和开发效率. 模块之间通常以全局对象维系通讯.在小游戏中,GameGlobal 是全局对象.在小程 ...

js模块化：require、import和export

前言

分析

export

import

导出、导入类

导出、导入函数

导出、导入对象

导出、导入指定文件（或模块）的原始值

参考

js模块化：require、import和export相关推荐

最新文章

热门文章