AMD模块化笔记

模块化

• 1 什么是模块化

  将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
  块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

• 2 为什么需要模块化

  1 应用越大那么代码也越复杂
  2 模块化利于解耦，降低复杂性和提高可维护性
  3 应用部署可以优化代码，减少 http 请求（避免多模块文件造成的多请求）。

• 3 模块化历史

  • 1 无模块，全局作用域冲突；

  function m1(){
  //...
  }
  function m2(){
  //...
  }
  

  • 2 namespace 封装，减少暴露给全局作用域的变量，本质是对象，不安全(外部可以直接修改模块内部的数据)

  let myModule = {
  data: 'www.baidu.com',
  foo() {
      console.log(`foo() ${this.data}`)
  },
  bar() {
      console.log(`bar() ${this.data}`)
  }
  }
  myModule.data = 'other data' //能直接修改模块内部的数据
  myModule.foo() // foo() other data
  

  • 3 IIFE 模式：匿名函数自调用(闭包)

    作用: 数据是私有的, 外部只能通过暴露的方法操作
    编码: 将数据和行为封装到一个函数内部, 通过给 window 添加属性来向外暴露接口
    问题: 如果当前这个模块依赖另一个模块怎么办?

  // index.html文件
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
      myModule.foo()
      myModule.bar()
      console.log(myModule.data) //undefined 不能访问模块内部数据
      myModule.data = 'xxxx' //不是修改的模块内部的data
      myModule.foo() //没有改变
  </script>
  
  // module.js文件
  (function(window) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
      //用于暴露有函数
      console.log(`foo() ${data}`)
  }
  function bar() {
      //用于暴露有函数
      console.log(`bar() ${data}`)
      otherFun() //内部调用
  }
  function otherFun() {
      //内部私有的函数
      console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar } //ES6写法
  })(window)
  

  • 4 IIFE 模式增强 : 引入依赖

  // module.js文件
  (function(window, $) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
      //用于暴露有函数
      console.log(`foo() ${data}`)
      $('body').css('background', 'red')
  }
  function bar() {
      //用于暴露有函数
      console.log(`bar() ${data}`)
      otherFun() //内部调用
  }
  function otherFun() {
      //内部私有的函数
      console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar }
  })(window, jQuery)
  
   // index.html文件
  <!-- 引入的js必须有一定顺序 -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
      myModule.foo()
  </script>
  

• 4 模块化规范

  • AMD 模块化加载原理

    1 找到入口文件所需的依赖。
    2 根据 require.config 定义全局参数 baseurl，根据 url 实例化 module（Module.use(ids, callback, id)）
    3 在 Module.use 函数中实例化 module 后，调用 module.load()方法，同时将 require 中传入的 callback 保存为 module 实例的 factory 属性。
    4 load 方法中将模块的依赖放进去，再判断该 module 的 status，然后创建 script 标签请求对应 url 的模块。
    5 如果该 module 的依赖全都加载出来后，调用 module 的 factory（即执行回调），然后将 module 的 exports 属性生成出来。
    6 然后通知该 module 的依赖，重复 3-6 步骤，递归的通知到入口文件。

AMD 实现参考

实现参考