目的:
了解AMD规范与CMD规范,写一个模块加载器雏形。
基本概念:
AMD是异步模块定义规范,而CMD是通用模块定义规范。其他的还有CommonJS Modules规范。
对于具体的规范,可以参考:
https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范
https://github.com/seajs/seajs/issues/242 CMD规范
http://www.zhihu.com/question/20351507/answer/14859415 玉伯对于AMD和CMD规范的回答
无论是哪一种规范,都是为了解决前端模块依赖与加载的问题。
与后台语言不同的地方是,js并无法做到阻塞的模块/文件加载,这是我们需要这些模块加载、依赖管理工具的重要原因之一。
需求分析:
根据规范,我们需要实现require和define两个接口,define接口用于定义模块(并加载依赖),require接口用来加载模块并回调。
我们将实现简化的接口:
define define(deps, definition):依赖数组 与 模块定义函数 define(definition):模块定义函数(模块无依赖) require require(deps, callback):依赖数组 与 完成回调 require(moduleId):传入模块id,获得模块实例(模块需提前通过define或require完成加载)
接下来我们进一步分析下任务:
代码(模块)状态: 未加载 -> 加载中 -> 加载完毕,等待依赖解决 -> 依赖完成,模块加载完成 ( -> 初次使用,执行模块定义生成模块实例) 非模块代码无依赖,加载后直接跳到完成状态,并且无模块定义无法生成模块实例 模块的加载时间线: 开始加载,添加加载完成的回调 -> 加载完成,执行define函数,注册模块依赖与模块定义 -> 执行代码加载完成回调(从这里拿到代码的url,或者说是模块ID),解析模块 我们需要在几个情况下分析依赖是否满足: 代码加载完成时以及模块依赖满足,状态为完成时 依赖满足的条件: 所有依赖的模块状态为完成
// define回调传入依赖模块 // 压缩问题
// function.toString依赖分析
// browserify, webpack
// es6模块,观察会阻塞式加载吗?
时间: 2024-11-24 16:39:20