小木小站

Menu

Administrator
Published on 2022-11-24 / 115 Visits
0
0

ES6模块化（import，export，export default）

概念

说明

  • import与export或者export default是相对的概念，'导出’了就可以使用’导入’将相关的功能引入。
  • 这是ES6的模块化设计，在ES6的模块系统中，每个JS文件可以理解为一个模块，模块代码以严格模式执行，所以模块中的变量、函数不会添加全局作用域中。

export

  • export称为命名导出，export default称为默认导出。
  • export和export default用于对外输出本模块变量的接口，一个js文件可以当作一个模块。
  • 可以导出常量，函数，文件，模块等。
  • 在一个模块中，export/import可以有多个，export default却只能有一个。

import

import就是在一个模块中加载另一个含有export接口的模块，加载有具体的语法规则。

用法示例

//message.js文件
export let message = 'ES6 Modules';

//app.js文件
import { message } from './message.js'
const h1 = document.createElement('h1');
h1.textContent = message
document.body.appendChild(h1)

//app.html文件
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ES6 Modules</title>
</head>
<body>
  <script type="module" src="./app.js"></script>
</body>
</html>

通过上面的示例，我们要了解到：
1.html引入使用到模块化的js文件时，script标签的type属性的值要为module。
2.上面的示例要在本地服务器来打开页面，不能直接使用本地打开文件方式。

语法

语法1（export）

例子

a.js文件：（导出）

//导出变量
export let message = 'Hi';

//导出函数
export function getMessage() {
  return message;
}

//导出类
export class Logger {
}

语法2（import，export）

例子

a.js文件：（导出）

//写法1
var name = 'xiaomu'
export { name }

//写法2
export var name = 'xiaomu'

b.js文件：（导入）

import { name } from "/.a.js"
console.log(name)

说明

可以看出，b.js可以使用到a.js中的变量。其中导入时的name要与导出时的name变量名称一样。

语法3（import，export default）

例子

a.js文件：（导出）

//写法1
var name = 'xiaomu'
export default name

//写法2
var name = 'xiaomu'
export { name as default }

//写法3
export default var name = 'xiaomu'

b.js文件：（导入）

import name from "/.a.js"
console.log(name)

说明

  • 其中导入时的name可以与导出时的name变量名称不一样，比如在b.js引用时可以写成：import XXX from “/.a.js”，其中XXX代表任意名称。
  • 语法1与语法2比较，可以看出export与export default的区别是，export需要带{}，对应的import也需要带{}；export default不需要带{}，对应的import也不需要带{}。

语法4（直接导出一个对象）

vue语法

import componentA from './componentA.vue'
import componentB from './componentB.vue'
import componentC from './componentC.vue'

export default {
  components: {
    componentA,
    componentB,
    componentC
  }
}

语法5（导出一个函数）

例子

a.js文件：（导出）

export function myFunction(a) { ... }

b.js文件：（导入）

import {myFunction} from "/.a.js"
myFunction(1)

语法6（导出多个，导入多个）

例子

a.js文件：（导出）

var name1 = 'xiaomu'
var name2 = 'xiaodong'
export  {name1,name2}

b.js文件：（导入）

import {name1,name2} from "/.a.js"
console.log(name1)
console.log(name2)

语法7（导入全部）

例子

a.js文件：（导出）

var name1 = 'xiaomu'
var name2 = 'xiaodong'
export  {name1,name2}

b.js文件：（导入）

import * as name from "/.a.js"
console.log(name.name1)
console.log(name.name2)

说明

  • import * as XXX意思是将模块/文件中的所有内容作为单个对象导入，然后可以使用XXX对象去访问导出的变量/函数等，这可以避免使用常规的方式一个个导入容易出错，而且不方便。
  • 用*关键字接收变量的时候一定需要配合as关键字来指定接收所有成员的变量。

语法8（重命名导出）

例子

a.js文件：（导出）

var name1 = 'xiaomu'
var name2 = 'xiaodong'
export  {name1 as n1,name2 as n2}

b.js文件：（导入）

import {n1,n2} from "/.a.js"
console.log(n1)
console.log(n2)

语法9（重命名导入）

例子

a.js文件：（导出）

var name1 = 'xiaomu'
var name2 = 'xiaodong'
export  {name1 , name2}

b.js文件：（导入）

import {name1 as n1 , name2 as n2} from "/.a.js"
console.log(n1)
console.log(n2)

语法10（模块重定向/重新导出）

例子

a.js文件：（导出）

var name1 = 'xiaomu'
export  {name1}

b.js文件：（重新导出）

//写法1
export {name1} from "/.a.js"

//写法2
import {name1} from "/.a.js"
export {name1}

说明

  • 利用这种方式可以通过一个文件聚合其他的再一次性导出。
  • 此外也可以利用as进行别名导出。
  • 重新导出所有，可以使用：export * from XXX 的格式。

语法11（export与export deault同时使用）

例子

a.js文件：（导出）

export var name1 = 'xiaomu'
export deault var name2 = 'xiaodong'

b.js文件：（导入）

//写法1
import name2,{name1} from "/.a.js"
console.log(name2)
console.log(name1)

//写法2
import {deault as name2 , name1} from "/.a.js"
console.log(name2)
console.log(name1)

说明

  • 如果一个文件同时使用export与export deault导出，我们在导入时需要遵循格式：
//写法1：默认导出要在最前面，命名导出/其他导出要在后面用花括号导入
import 默认导出名,{命名导出名} from XXX

//写法2：默认导出前用带上deault as，跟命名导出/其他导出同样写在花括号里面
import {deault as 默认导出名 , 命名导出名} from XXX
  • 通过语法7我们可以知道可以导出全部，在export与export deault同时使用时也可以使用相关语法，格式如下：
import defaultParam, * as nomalParam from './modules.js'

语法12（导出不可修改）

例子

a.js文件：（导出）

export var name = 'xiaomu'

b.js文件：（导入）

import {name} from "/.a.js"
name = 'xiaodong' //报错，不能这样改

说明

  • 使用import {}导入的变量并不是将值拷贝一份，而是指向其变量的地址，不可被修改。
  • 模块内导出的值发生变化，导入时的变量也会发生变化，所以如果我们要在导入的模块修改导出的模块的值，可以在导出的模块制定一个修改值的方法即可。

语法13（只能在最外层）

例子

a.js文件：（导出）

const a = 10
if(true) {
   export a; //报错
}

b.js文件：（导入）

function importSum() {
   import { sum } from './cal.js'; //报错
}

说明

  • import / export语句只能在代码的最外层执行，不能在其他作用域内执行。
  • ES6的import / export只能通过静态方式确定导入或者导出的内容，无法动态引入模块（ES2020中引入了import()函数，可以支持动态导入模块）。

语法14（匿名导入）

例子

a.js文件：（导出）

//原生Array增加一个方法
if (!Array.prototype.contain) {
  Array.prototype.contain = function(e) {
    // ...
  }
}

b.js文件：（导入）

import './a.js';
[1,2,3].contain(2);

说明

可以看出在import没有指定变量名

参考

JS中export怎么用？
https://www.jianshu.com/p/4c84369b6e9d
全面理解ES6模块化编程
https://zhuanlan.zhihu.com/p/419682468
了解es6模块化，看这篇就够了
https://blog.csdn.net/weixin_45449964/article/details/114339224?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-114339224-blog-120397418.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-114339224-blog-120397418.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=2

java中调用动态库（dll/so）
mysql 5.7 msi 完整卸...

Comment