js模块化:require、import和export

前言

  • 编写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 位

另:

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

执行效果:
js模块化:require、import和export_第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 位

执行效果:
js模块化:require、import和export_第2张图片

导出、导入对象

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 位

执行效果:
js模块化:require、import和export_第3张图片

  • 从打印 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 导入的

执行效果:
js模块化:require、import和export_第4张图片

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

参考

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

你可能感兴趣的:(JavaScript)