尽量导出不可变值

当导出一个内容时，尽量保证该内容是不可变的（大部分情况都是如此）
因为，虽然导入后，无法更改导入内容，但是在导入的模块内部却有可能发生更改，这将导致一些无法预料的事情发生

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script src="./index.js" type="module"></script>
  10. </body>
  11. </html>

const.js 代码

  1. export let name = "张三"
  2. export default function updateName(){
  3.     name = "李四"
  4. }

index.js 代码

  1. import updataName,{name} from "./const.js"
  3. updataName()
  4. console.log(name)

默认导入后名字都会常量，无法进行修改，但是可以通过模块内部就行修改，这样会无意间修改模块内部的变量，可以将模块内的变量设置为常量
修改后的 const.js 代码

  1. export const name = "张三"
  2. export default function updateName(){
  3.     name = "李四"
  4. }

这样导出与导入都会是常量，不会发生无意间修改模块内的变量

可以使用无绑定的导入用于执行一些初始化代码

如果我们只是想执行模块中的一些代码，而不需要导入它的任何内容，可以使用无绑定的导入：

  1. import "模块路径"

例如以下例子
模块 print.js 的代码 ， 拓展数组

  1. Array.prototype.print = function(){
  2.     console.log(this.length)
  3. }

index.js 的代码

  1. import './print.js';  // 直接执行print.js 并不导入
  2. const arr = [1,2,3]
  3. arr.print()

运行结果
image.png

可以使用绑定再导出，来重新导出来自另一个模块的内容

有的时候，我们可能需要用一个模块封装多个模块，然后有选择的将多个模块的内容分别导出，可以使用下面的语法轻松完成

  1. export {绑定的标识符} from "模块路径"

如图模块之间的关系

image.png
m1.js 代码

  1. export const a = "m1-a";
  2. export const b = "m1-b";
  3. export const c = "m1-c";
  4. export default "m1-default";

m2.js 代码

  1. export const k = 'm2-k';
  2. export const a = "m2-a";
  3. export const t = "m2-t";
  4. export default function m2Fn(){
  6. }

m.js 代码 将m1与m2的整合再导出

  1. export {a as m1A,b} from './m1.js';  // 导出m1
  2. export {k ,a as m2A , default as m2Fn} from "./m2.js" //导出 m2

index.js 的代码

  1. import * as mod from './m.js'
  2. console.log(mod)

image.png