一個極為簡單的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