AMD(Asynchronous Module Definition)异步模块模式

异步模块模式 : 请求发出后，继续其他业务逻辑，直到模块加载完成执行后续逻辑，实现模块开发中的对模块加载完成后的引用，大名鼎鼎的require.js就是以它为思想的。

这里导出了一个问题，就是script标签是异步加载还是同步加载的 ?

按照经验：script是顺序加载的，例如引用jquery的脚本需要放在src=jquery的脚本之后。

<script src="jQuery.js"/>
<script src="a.js"/>
<script src="b.js"/>
<script src="c.js"/>

这样的引用会有以下缺点:

• 必须按顺序引入
• 同步加载各个js，只有1.js加载并执行完才去加载2.js
• 各个js文件可能会有多个window全局变量的创建、污染

题外 : async 与 defer 有什么区别?

image.png image.png

• defer : 阻塞加载，渲染后再执行(DOM结构完全成和前面脚本执行完全后执行，script默认为true)
• async : h5新增属性，异步加载，下载完后立即执行

对同步模式(SMD)的思考

在服务器端中，本质上是使用一个脚本在服务器主机上跑，它使用编译-运行的这种模式，就算它是一次加载所有脚本文件，导致的结果最多是编辑脚本时间变长。

但是浏览器端能用这种模式吗？ 答: 在网页功能复杂的项目，势必不能使用这种方法！因为浏览器中对文件的加载是阻塞加载的，如果js文件庞大，js对视图层嵌入层度深，势必会影响用户的首屏加载速度，用户体验会非常糟糕。

image.png

所以，有的开发者就像，如果我在同步模块的基础上改造，引用其他模块时，动态创建一个script标签进行加载，加载完成后才执行回调函数。

var loadscript = function(src) { 
  var _script = document.createElemenet('script')
  _script.type = 'text/Javascript'
  _script.src = src 
  document.getElementsByTagName('head')[0].appendChild(_script)
}
loadscript('b.js')
F.module('b',function(b) { 
  // do something
})

以上代码有没有问题 ？ 有！

script插入的时候，浏览器会异步加载这个文件，但没等它加载完成，F.module就执行了。

AMD的简单实现

看完张容铭的异步模块代码，写了一个异步模块模式，这种形式类似promise的实现，先来看看代码

var F = (function () {
  var moduleCache = {}

  // 定义模块
  var module = function (url, modDeps, modCallback) {
    var args = [].slice.call(arguments),
      deps,     // 依赖模块列表
      callback, // 回调函数
      mods = [],     // 依赖模块集合
      i = 0,      // 依赖模块序列中的索引
      len,       // 依赖模块数组长度
      depsCount = 0  // 未加载的依赖摸摸看数量统计
    // 多态
    if (args.length > 2) {
      deps = modDeps instanceof Array ? modDeps : [modDeps]
      callback = modCallback
    } else {
      deps = []
      callback = modDeps
    }
    len = deps.length
    if (len) {
      while (i < len) {
        depsCount++;
        (function (i) {
          loadModule(deps[i], function (mod) {
            mods.push(mod)
            depsCount--
            if (depsCount === 0) {
              setModule(url, mods, callback)
            }
          })
        })(i)
        i++
      }
    } else {
      setModule(url, [], callback)
    }
  }

  // 注册模块 并执行模块构造函数    
  var setModule = function (moduleName, mods, callback) {
    var _module
    if (moduleCache[moduleName]) {
      // 获取模块
      _module = moduleCache[moduleName]
      _module.status = 'loaded'
      _module.exports = callback && callback.apply(_module, mods)
      while (_module.onload.length > 0) {
        var _fn = _module.onload.shift()
        _fn(_module.exports)
      }
    } else {
      callback && callback.apply(null, mods)
    }
  }


  // 加载模块
  var loadModule = function (moduleName, callback) {
    var _module
    if (moduleCache[moduleName]) {
      _module = moduleCache[moduleName]
      if (_module.status === 'loaded') {
        setTimeout(callback(_module.exports), 0)
      } else {
        _module.onload.push(callback)
      }
    } else {
      // 模块第一次调用
      moduleCache[moduleName] = {
        moduleName,
        status: 'loading',
        exports: null,
        onload: [callback]
      };
      // 加载模块对应文件
      loadScript('./' + moduleName + '.js')
    }
  }

  var loadScript = function (src) {
    var _script = document.createElement('script')
    _script.type = 'text/Javascript'
    _script.src = src
    _script.async = true
    document.getElementsByTagName('head')[0].appendChild(_script)
  }
  return {
    module
  }
}())
  F.module('lib/main', ['lib/a', 'lib/b'], function (a, b) {
    console.log(a)
    console.log(b)
  })

在index.html同级目录创建lib文件夹，在其中创建a.js、b.js两个文件，代码为

F.module('lib/a', function () {
  return {
    name: ' a is 2233 '
  }
})


F.module('lib/b', function () {
  return {
    name: ' b is 33333 '
  }
})

image.png

流程如下 ： 可能还是不是很清楚

image.png

1. 代码分析

F.module('lib/main', ['lib/a', 'lib/b'], function (a, b) {
  console.log(a)
  console.log(b)
})

在这段代码中，它需要两个依赖模块lib/a,lib/b

然后module方法执行。

关键是这段代码，他给未加载的模块创建了一个回调函数，并且用闭包记录了未加载模块数的值与cb使用的依赖

(function (i) {
  loadModule(deps[i], function (mod) {
    mods.push(mod)
    depsCount--
    if (depsCount === 0) {
      setModule(url, mods, callback)
    }
})(i)

接着看loadModule，如果模块未加载则在cache中创建它的实例，并且设置状态为loading中，嵌入上述的回调函数

moduleCache[moduleName] = {
  moduleName,
  status: 'loading',
  exports: null,
  onload: [callback]
};
// 加载模块对应文件
loadScript('./' + moduleName + '.js')

当a.js文件加载完成后，则会调用

F.module('lib/a', function () {
  return {
    name: ' a is 2233 '
  }
})

在module方法中，如果它没有依赖相关模块，则会直接在cache中注册，执行setModule

setModule(url, [], callback)

接着，他发现cache中竟然有自己的实例(被依赖了)

if (moduleCache[moduleName]) {
  // 获取模块
  _module = moduleCache[moduleName]
  _module.status = 'loaded'
  _module.exports = callback && callback.apply(_module, mods)
  while (_module.onload.length > 0) {
    var _fn = _module.onload.shift()
    _fn(_module.exports)
  }
}

上述代码会做如下事情

• 将自身状态status改为loaded
• 将自己的回调函数返回结果给cache实例，赋值为exports
• 执行onload函数

最后，知道最后一个模块加载完毕，onload执行，发现depCount数已经为0了，则会执行lib/main的回调方法.