模块化


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

模块化规范产品
  • ES6 之前的模块化规范有:

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

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

基本使用

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