手写AMD规范的异步加载机制（requireJs）

最新推荐文章于 2024-10-06 10:09:03 发布

一杯码农

最新推荐文章于 2024-10-06 10:09:03 发布

阅读量428

点赞数 1

分类专栏：前端开发文章标签： javascript node.js html5 es6

本文链接：https://blog.csdn.net/weixin_38407447/article/details/117407660

版权

本文深入探讨AMD（Asynchronous Module Definition）异步模块定义规范，通过Promise实现模块的异步加载。重点是理解依赖前置原则，即先加载模块所需依赖。文章以实例讲解，创建amd.js、a.js、b.js模块文件，并在amd.html中展示如何使用require同时加载lodash和a模块，详细解释加载过程中的依赖解析顺序。

摘要由CSDN通过智能技术生成

AMD异步加载机制，特点是：依赖前置，先把模块需要用到的依赖全部加载

本质是利用promise实现异步加载

需要用到这篇文章实现的模块加载器 __load

https://blog.csdn.net/weixin_38407447/article/details/117402939?spm=1001.2014.3001.5501

新建amd.js文件


//默认配置
const defaultOpts = {
    paths:{}
}

gb.rj = {}
rj.config = (options)=>Object.assign(defaultOpts,options)

//保存定义的模块和依赖
const def = new Map()
// define(id?,deps?,callback)
function define(...arr){
    let callback  =  arr.pop()
    let [ id, deps ] = arr
    def.set(id,{id,deps,callback})
}   
//根据模块名称生成资源请求链接
var getUrl = (module)=>{
    let a = location.pathname
    return a.slice(0,a.lastIndexOf('/'))+'/'+module+'.js'
}
//加载模块
function require(deps,callback){
    return new Promise(async (resolve,reject)=