模块化

模块化的好处
  • 防止命名冲突
  • 代码复用
  • 高维护性

模块化规范产品

  • ES6 之前的模块化规范有：

    • CommonJS => NodeJS、Browersify
    • AMD => requireJS
    • CMD => seaJS

ES6 模块化语法
  • export 命令用于规定模块的外对接口
  • import 命令用于输入其他模块提供的功能

基本使用

模块暴露
  1. // 分别暴露 m1.js
  2. export let school = '福田中学'
  4. export function teach() {
  5.   console.log('陈朝鸿1')
  6. }
  8. // 统一暴露 m2.js
  9. let school = '福田中学'
  10. function findJob() {
  11.   console.log('找工作')
  12. }
  14. export {school, findJob}
  16. // 默认暴露 m3.js
  17. export default {
  18.   school: '福田中学',
  19.   change: function () {
  20.     console.log('改变自己')
  21.   }
  22. }
  2. <script type="module">
  3.   // 1.通用的导入方式
  4.   // 引入 m1.js 模块内容
  5.   // import * as m1 from './js/m1.js'
  6.   // console.log(m1)
  7.   // 引入 m2.js 模块内容
  8.   // import * as m2 from './js/m2.js'
  10.   // 引入 m3.js 模块内容
  11.   // import * as m3 from './js/m3.js'
  12.   // console.log(m3)
  13.   // m3.default.change()
  15.   // 2.解构赋值形式
  16.   // import {school, teach} from './js/m1.js'
  17.   // import {school as fz, findJob} from "./js/m2.js"
  18.   // import {default as m3} from './js/m3.js'
  19.   // console.log(m3)
  21.   // 3.简便形式
  22.   // import m3 from './js/m3.js'
  23.   // console.log(m3)
  24. </script>