requirejs原理解析

核心

require的核心是define函数和require函数
define 函数导出模块
require 引入模块

使用

1. 同时require多个模块,没有多层依赖

define('module1',[],function(){
    return '模块一'
})
define('module2',[],function(){
    return '模块二'
})
require(['module1','module2'],function(module1,module2){
    console.log(module1,module2,15);//'模块一','模块二'
})

2. 多层依赖

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)
}