/tRequire

Primary LanguageJavaScript

自己动手写Requirejs

1 测试用例

https://github.com/bluemind7788/tRequire

2 引入

参照requirejs的api,我们来思考一下问题

  • require和define方法都做了什么事情
  • 模块的数据结构如何定义
  • 如何用javascript去动态的加载远程的js文件
  • 如何判断一个远程js文件加载完毕
  • 程序执行的时机有哪些
  • 如何判断所有的js文件都已经加载完毕
  • 所有js加载完成之后,callback函数是按什么顺序来执行,怎么做
  • 整个的执行过程是怎样的

3 require和define方法都做了什么事情

require和define里面定义了当前模块的依赖模块和回调函数,模块之间是树形的依赖关系,当它们执行后应该把构建模块的依赖树的工作做完,并且还要去触发加载当前模块的依赖模块。

4 模块的数据结构如何定义

一个模块应该至少包含:模块的url、所有依赖模块url、回调函数。

module = {
    url: 'xx/xxx',
    deps: [],
    cb: function(){}
}

5 如何用javascript去动态的加载远程的js文件

js动态加载js文件可以用创建<script>标签的方式来实现,详细代码如下

var js = document.createElement('script');
js.src = url;
if(navigator.appName.toLowerCase().indexOf('netscape') == -1){
    js.onreadystatechange = function(){
        if(js.readyState == 'complete'){
            jsLoaded(js,url);
        }
    }
}else{
    js.onload = function(){
        jsLoaded(js,url);
    }
}
document.head.appendChild(js)

6 如何判断一个远程js文件加载完毕

参考上面代码

7 程序执行的时机有哪些

程序的执行时机有两个地方:一个是requirejs代码执行时,这时会根据data-main的路径去加载入口的js;一个是一个js文件加载完毕之后,这时需要去判断是否需要执行模块的回调函数。

7 如何判断所有的js文件都已经加载完毕

我们定义一个loading的数组来存储正在加载的模块,当在执行require或define方法的时候将依赖模块加到loading里,当每一个js加载完毕之后去loading里移除这个模块,之后判断loading是否已经为空,如果loading已经空了,说明所有模块都已加载完毕。

module = {
    url: 'xx/xxx',
    deps: [],
    cb: function(){}
}

8 如何用javascript去动态的加载远程的js文件

js动态加载js文件可以用创建<script>标签的方式来实现,详细代码如下

var jsLoaded = function(js,url) {
	for(var i = 0;i<context.waiting.length;i++) {
		if(context.waiting[i] == url) {
			context.waiting.splice(i, 1)
		}
	}
	context.loaded.push(url);
	
	if(context.waiting.length == 0) {
		excuteCb(context.topModule)
	}
}

9 所有js加载完成之后,callback函数是按什么顺序来执行,怎么做

当所有js都加载完毕之后,需要去执行所有模块的回调函数。因为被依赖的模块必须要先执行,所以通过后序遍历来执行回调函数。

var excuteCb = function(mod) {
	var deps = context.modules[mod].deps
	if(deps.length > 0) {
		for(var i=0;i<deps.length;i++) {
			excuteCb(deps[i])
		}
	}
	context.modules[mod].cb.call();
}

10 整个的执行过程是怎样的

接下来,我们将整个过程串起来。程序入口时我们写的requirejs文件,执行时解析data-main上配置模块树的最顶层模块的js文件,然后加载这个js文件,构建依赖模块树,之后再去加载它的依赖模块,递归的这个去加载执行。当每个js加载结束之后,判断所有js是否全部加载完毕,如果是,后序遍历执行回调函数,这就是整个过程。
本文的实现是一个简化版的requirejs,共有不到80行代码https://github.com/bluemind7788/tRequire