模块化模式

Module

概述

最初被定义为在传统软件工程中为类提供私有和公共封装的一种方法

能够使一个单独的对象拥有公共|私有的方法和变量，从而屏蔽来自全局作用域的特殊部分

有助于减少函数名在页面中与其它脚本区域内定义的函数名冲突的可能性

使用该模式，只需返回|导出一个公有API，其它都维持在私有域中

应用

导出函数：每个业务逻辑对应一个js，避免把所有的业务逻辑集中到一个js

导出变量：很少单独导出一个变量，而是以json对象的形式给出，特别是配置文件

推荐写法：js只有一个业务逻辑，采用默认导出

引用时，请使用import；不要使用require

引用时，可以省略后缀名js - 需要检验

引用时注意路径的问题，大多数开发环境要求是相对路径

参考代码

默认导出，只能整体引入

Module：test.js，默认导出全部

let count = 0;
function dec() {
  return --count;
}
function inc() {
  return ++count;
}
export default {
  dec, inc
}

Module：全部导入，纯js需指定script的type为module

<script type="module">
  import test from './test.js'
  console.log(test);
  console.log(test.inc());
  console.log(test.inc());
  console.log(test.inc());
</script>

参考代码

普通导出，可以按需引入

Module：test.js，普通导出

let count = 0;
function dec() {
  return --count;
}
function inc() {
  return ++count;
}
export {
  dec, inc
}

Module：按需导入

<script type="module">
  import { inc } from './test.js'
  console.log(inc());
  console.log(inc());
  console.log(inc());
</script>

定义配置信息

Module：person.js，默认导出

export default {
  "name": 'gl',
  "age": 24
}

Module：按需导入

<script type="module">
  import person from './person.js'
  console.log(person);
</script>