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

github地址：https://github.com/skyweaver213/requirejs-demo

 打開console，看到以下結果