要实现模块化加载器,有几个重点
1、JS文件路径解析
2、下载JS文件
3、将定义的模块缓存
4、加载依赖
我看到的几个实例中下载文件都是使用document创建script标签,设置src的方式下载文件,这里 我使用jquery的ajax方法下载JS文件,因此文件路径的解析会有些不同。使用创建script标签的方式可以获取当前运行的JS的文件路径,但是对于jquery的ajax就不行了。焦点script的src属性是空的,因此路径解析时如果是相对路径要依据模块化加载器的文件路径解析。且define的id直接被路径替换了,相当于模块名强制就是文件名。为了稍微靠近 考虑从options中预先定义一个存储名字-路径转换关系的array。
define中,将文件的路径、依赖数组、function存储起来
在use中,根据路径或预先定义的转换关系中的名字 找到模块的依赖数组和function,加载模块的依赖属性到模块的function中,将模块的function作为参数按use方法中定义的依赖顺序传递给use方法的参数function中,执行use方法的参数functiong。比较绕口,用伪代码辅助描述下:
define(id,deps,fun);
根据id作为键,将deps和fun存储起来
use(deps,fun);
遍历deps,根据当前元素作为路径下载JS文件,在该js中调用了define方法,下载到的文件是字符串,使用new Function()方法转成function。执行function 相当于执行了define方法,执行时 将真正想要的function和依赖数组存储起来了。因此执行后 根据当前元素作为键就可以获取到目标模块的依赖数组和function,此时有两种选择:1