自研模块加载器(二) 加载器结构与设计导论

结构导论

模块部分

数据初始化: 加载器中设计来一个名为Module的构造函数,每个模块都是此构造函数实例对象。构造函数中给实例对象扩展了"未来"所需用到的属性和方法。 

 

模块存储: 加载器中设计来一个名为cache的缓存对象,每个文件(模块)都会存储在cache对象中。

具体存储方式: { "当前模块的绝对路径" : new Module()}, 注意: 当前模块的绝对路径是通过资源部分,资源定位方法实现的。

 

每个模块创建都先初始化数据,存储在缓存对象中。

 

资源部分

依赖管理:已知当前模块在cache中的形态,{"当前模块的绝对路径": new Module()}

换算: {"当前模块的绝对路径": {uri: "当前模块的绝对路径", deps:[]}};  deps存储当前模块的依赖列表,依赖列表通过动态加载script文件正则解析获取。

重点: 解析依赖->获取依赖模块绝对路径->动态加载->提取依赖->解析依赖. 递归的方式加载所有的模块,直至模块全部加载完毕。

 

资源定位:加载器中设计了一个 resolve()的方法把模块名解析成绝对路径格式。

模块名的获取: startUp.use(['a.js', 'b.js']);  startUp.use()加载器的启动方法,启动时会去调用传入数组列表中的模块。

 

动态加载script文件: 通过加载器resolve()方法把模块名解析成绝对路径格式。动态创建script document.createElement('script');  把src指向当前模块的绝对路径地址。加载文件的同时,模块加载器解析当前模块所依赖的模块以数组的形式存储。

 

资源定位依赖管理是加载器设计的两大核心。

 

posted @ 2020-01-26 16:46  进击的小牛牛  阅读(138)  评论(0编辑  收藏  举报