码迷,mamicode.com
首页 > Web开发 > 详细

js与AMD模块加载

时间:2015-07-17 13:58:33      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

目的:

了解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模块,观察会阻塞式加载吗?

js与AMD模块加载

标签:

原文地址:http://www.cnblogs.com/benben77/p/4652682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!