模块化开发、import&export

模块化基础

模块的概念

• 外部模块：简称模块，

  • 模块在自身作用域里执行，而不是全局作用域，这意味着定义在模块内部的变量和方法都是不可见的，需要使用export对外暴露
  • 我们可以把一些公共的功能抽离成一个单个的文件，作为一个模块
  • 模块里的变量，函数，类默认都是私有的，在export导出之后，可以通过import使用模块暴露出的数据
• 内部模块：又叫命名空间，主要用于组织代码，避免命名冲突

---

export & import 的使用

export暴露方法

  // a.js
  export function fn() {
    console.log('执行a.js的fn方法成功')
  }
  export function fn1() {
    console.log('又暴露一个方法')
  }

  // b.js
  import {fn, fn1} from './a.js'
  fn()  // 执行a.js的fn方法成功
  fn1() // 又暴露一个方法

批量暴露方法，as关键字改变方法的

  // Ginga.js
    function earth() {
      console.log('这里是地球')
    }
    function mars() {
      console.log('这里是火星')
    }
    var sun = '这里是太阳'
    export {
      earth,
      mars，
      sun
    }

  // M78.js
    import {mars, earth as chikyuu, sun} from './Ginga.js'

    mars()  // 这里是火星
    chikyuu()   // 这里是地球
    console.log(sun) // 这里是太阳

expor default的使用和引入

  // Mitakihara.js
    function Mitakihara() {
      console.log('MadoMadoka')
    }

    export default {
      Mitakihara  // export default 在一个模块里只能使用一次，引入的时候不需要{}
    }
    
  // Ennkann.js
    import Mitakihara from './Mitakihara.js'

    Mitakihara()  // MadoMadoka