模块化开发

@Module

目标

每个 .js 文件都是一个模块；其中的变量和方法都是私有的，别的模块无法使用

只有把变量和方法导出 export，才能被其他模块使用；别的模块需要导入 import 才能使用

高内聚低耦合

一个模块通常只写一个逻辑

多个逻辑可以分别导出；一个逻辑可以默认导出

导出时，可以改名；导入时，也可以改名

模块化的本质是将暴露的变量和方法与其对应的值关联起来；如果只有变量或方法，但是没有对应的值就是报错

分别导出，按需导入

需要知道模块暴露出来的变量和方法的名字，否则无法导入

测试文件 test.js - 导出一个变量 config、一个函数 greeting

const config = {
  "author": "glpla",
  "desc": "only for test",
  "url": "glpla.github.io",
  "version": "1.0.0",
}

const greeting = (name) => {
  console.log(`output->name`, name)
}
export { config, greeting }

使用文件 app.js - 仅导入 config 使用

<script type="module">
  import {config} './test.js' 
  console.log(config.author)
</script>

多个导出还可以使用对象接受 - 使用 as 将导出的变量和方法统一到一个对象 obj

<script type="module">
  import * as obj from './test.js'
  console.log(obj.config);
  console.log(obj.greeting);
</script>

默认导出

使用 default 默认导出一个变量或一个方法

一个模块中仅能有一个默认导出

应用最为广泛

测试文件 test.js - 默认导出一个方法；无需使用关键字 function 声明方法或使用函数表达式指定类型

export default (name) => {
  console.log(`${name}, hi, there.`)
}

使用文件 app.js - 导入时需指定名字，因为默认导出时没有名字

<script type="module">
  import sayHi from './test.js'
  sayHi('glpla')
</script>

求和+10 、求乘*10

传统方式：松散 - 不同的数据和逻辑都混在一起；容易命名冲突

let x = 10
function add() {
  return x + 10
}
let y = 20
function time() {
  return y * 10
}
add()
time()

模块化方式：多个模块、默认导出

文件 modAdd.js

export default function () {
  const dom = document.querySelector('#add')
  const x = 10
  function add() {
    dom.innerHTML = Number(dom.textContent) + x
  }
  return { x, add }
}

文件 modTime.js

export default function () {
  const dom = document.querySelector('#time')
  const y = 10
  function time() {
    dom.innerHTML = Number(dom.textContent) * y
  }
  return { y, time }
}

文件 app.js - 引入并使用模块；需要指定 <script> 类型 type 为 module

<script type="module">
  import modAdd from './modAdd.js'
  import modTime from './modTime.js'
  let addBtn = document.querySelector('#add')
  let timeBtn = document.querySelector('#time')
  const { x, add } = modAdd()
  const { y, time } = modTime()
  addBtn.addEventListener('click', add)
  timeBtn.addEventListener('click', time)
</script>