核心
require的核心是define函数和require函数
define 函数导出模块
require 引入模块
使用
- 同时require多个模块,没有多层依赖
define('module1',[],function(){
return '模块一'
})
define('module2',[],function(){
return '模块二'
})
require(['module1','module2'],function(module1,module2){
console.log(module1,module2,15);//'模块一','模块二'
})
- 多层依赖
define('module2',['module1'],function(module1){
return module1+' module2'
})
define('module3',['module2'],function(module2){
return module2+' module3'
})
require(['module3'],function(module3){
console.log(module3);
})
简单实现
let factorys={};
function define(moduleName,dependencies,fn){
factorys[moduleName]=fn;//让模块名称和函数对应起来
}
function require(mods,callback){
let res=mods.map((mod)=>{
return factorys[mod]();
})
console.log(res)
callback.apply(null,res)
}
define('module2',['module1'],function(module1){
return module1+' module2'
})
define('module3',['module2'],function(module2){
return module2+' module3'
})
require(['module3'],function(module3){
console.log(module3);
})
最终实现(递归)
let factorys={}
function define(moduleName,dependenties,fn){
factorys[moduleName]=fn;
fn.dependenties=dependenties;//把依赖挂载到当前要执行的函数上
}
function require(deps,callback){
let res=deps.map((dep)=>{//moduleName
let result;
let fn=factorys[dep]
if(fn.dependenties.length>0){//如果有依赖
require(fn.dependenties,function(){//递归
result = fn.apply(null,arguments)
})
}else{
result=fn();
}
return result
})
callback.apply(null,res)
}
