一个极为简单的requirejs实现方法

require和 sea的源码分析,我之前的博客有写过, 今天我想分享的是一个很简单的核心代码(不带注释和空行大概60行), 没有容错判断。

require.js

require函数实现用一句话概括:

依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块。

<div class="jb51code">
<pre class="brush:js;">
//标记已经加载成功的个数
var REQ_TOTAL = 0;
//模块导出
window.exports = {};
//记录各个模块的顺序
var exp_arr = [];

//判断是否数组
function isArray(param) {
return param instanceof Array;
}

//require 真正实现
function require(arr,callback) {

var req_list;

if(isArray(arr)) {
req_list = arr;
} else {
req_list = [arr];
}
var req_len = req_list.length;

//模块逐个加载
for(var i=0;i<req_len;i++) {
var req_item = req_list[i];

var $script = createScript(req_item,i);

var $node = document.querySelector('head');

(function($script) {
  //检测script 的onload事件
  $script.onload = function() {
    REQ_TOTA<a href="https://www.jb51.cc/tag/L/" target="_blank" class="keywords">L++</a>;

    var script_index = $script.getAttribute('index');

    exp_arr[script_index] = exports;

    window.exports = {};

    //所有<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>加载成功后,执行callback
    if(REQ_TOTAL == req_len) {
      callback && callback.apply(exports,exp_arr);


    }

  }

  $node.appendChild($script);
})($script);

}

}

//创建一个script标签
function createScript(src,index) {
var $script = document.createElement('script');

$script.setAttribute('src',src);
$script.setAttribute('index',index);

return $script;
}

然后写了2个导出模块的js文件, 只写了最简单的exports实现

define.js

rush:js;"> exports.define = { topic: 'my export',desc: 'this is other way to define ',sayHello: function() { console.log('topic ' + this.topic + this.desc); } }

define2.js

rush:js;"> exports.define = { name: 'xm',age: 22,info: function() { console.log('topic ' + this.name + this.age); } }

然后测试demo很简单

rush:js;"> //测试demo require(['../res/define.js','../res/define2.js'],function(def,def2) { def.define.sayHello();

def2.define.info();
});

以上就是小编为大家带来的一个极为简单的requirejs实现方法全部内容了,希望大家多多支持编程之家~

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...