一个极为简单的requirejs实现方法
require和sea的源码分析，我之前的博客有写过，今天我想分享的是一个很简单的核心代码（不带注释和空行大概60行），没有容错判断。
require.js
require函数实现用一句话概括：
依次加载require的模块，然后监测script的onload事件，判断所有模块加载成功，执行require的callback，如果只带一个参数且不是数组，就是加载成功后return模块。
//标记已经加载成功的个数
varREQ_TOTAL=0;
//模块导出
window.exports={};
//记录各个模块的顺序
varexp_arr=[];
//判断是否数组
functionisArray(param){
returnparaminstanceofArray;
}
//require真正实现
functionrequire(arr,callback){
varreq_list;
if(isArray(arr)){
req_list=arr;
}else{
req_list=[arr];
}
varreq_len=req_list.length;
//模块逐个加载
for(vari=0;i<req_len;i++){
varreq_item=req_list[i];
var$script=createScript(req_item,i);
var$node=document.querySelector('head');
(function($script){
//检测script的onload事件
$script.onload=function(){
REQ_TOTAL++;
varscript_index=$script.getAttribute('index');
exp_arr[script_index]=exports;
window.exports={};
//所有链接加载成功后，执行callback
if(REQ_TOTAL==req_len){
callback&&callback.apply(exports,exp_arr);
}
}
$node.appendChild($script);
})($script);
}
}
//创建一个script标签
functioncreateScript(src,index){
var$script=document.createElement('script');
$script.setAttribute('src',src);
$script.setAttribute('index',index);
return$script;
}
然后写了2个导出模块的js文件，只写了最简单的exports实现
define.js
exports.define={
topic:'myexport',
desc:'thisisotherwaytodefine',
sayHello:function(){
console.log('topic'+this.topic+this.desc);
}
}
define2.js
exports.define={
name:'xm',
age:22,
info:function(){
console.log('topic'+this.name+this.age);
}
}
然后测试demo很简单
//测试demo
require(['../res/define.js','../res/define2.js'],function(def,def2){
def.define.sayHello();
def2.define.info();
});
以上就是小编为大家带来的一个极为简单的requirejs实现方法全部内容了，希望大家多多支持毛票票~