一个极为简单的requirejs实现
require和 sea的源码分析，我之前的博客有写过， 今天我想分享的是一个很简单的核心代码（不带注释和空行大概60行）， 没有容错判断。
require.js
require函数实现用一句话概括：
依次加载require的模块，然后监测script的onload事件，判断所有模块加载成功，执行require的callback， 如果只带一个参数且不是数组，就是加载成功后return 模块。
1 //标记已经加载成功的个数
2 var REQ_TOTAL = 0;
3 //模块导出
4 window.exports = {};
5 //记录各个模块的顺序
6 var exp_arr = [];
7
8 //判断是否数组
9 function isArray(param) {
10 return param instanceof Array;
11 }
12
13 //require 真正实现
14 function require(arr, callback) {
15
16 var req_list;
17
18 if(isArray(arr)) {
19 req_list = arr;
20 } else {
21 req_list = [arr];
22 }
23 var req_len = req_list.length;
24
25 //模块逐个加载
26 for(var i=0;i<req_len;i++) {
27 var req_item = req_list[i];
28
29 var $script = createScript(req_item, i);
30
31 var $node = document.querySelector(‘head‘);
32
33 (function($script) {
34 //检测script 的onload事件
35 $script.onload = function() {
36 REQ_TOTAL++;
37
38 var script_index = $script.getAttribute(‘index‘);
39
40 exp_arr[script_index] = exports;
41
42 window.exports = {};
43
44 //所有链接加载成功后，执行callback
45 if(REQ_TOTAL == req_len) {
46 callback && callback.apply(exports, exp_arr);
47
48
49 }
50
51 }
52
53 $node.appendChild($script);
54 })($script);
55
56 }
57
58 }
59
60 //创建一个script标签
61 function createScript(src, index) {
62 var $script = document.createElement(‘script‘);
63
64 $script.setAttribute(‘src‘, src);
65 $script.setAttribute(‘index‘, index);
66
67 return $script;
68 }
然后写了2个导出模块的js文件， 只写了最简单的exports实现
define.js
1 exports.define = {
2 topic: ‘my export‘,
3 desc: ‘this is other way to define ‘,
4 sayHello: function() {
5 console.log(‘topic ‘ + this.topic + this.desc);
6 }
7 }
define2.js
1 exports.define = {
2 name: ‘xm‘,
3 age: 22,
4 info: function() {
5 console.log(‘topic ‘ + this.name + this.age);
6 }
7 }
然后测试demo很简单
1 //测试demo
2 require([‘../res/define.js‘, ‘../res/define2.js‘], function(def, def2) {
3 def.define.sayHello();
4
5 def2.define.info();
6 });
demo地址 ：https://skyweaver213.github.io/requirejs-demo/example/dev/demo.html