一个极为简单的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实现方法全部内容了,希望大家多多支持毛票票~