一個極為簡單的requirejs實作方法

require和 sea的源碼分析，我之前的博客有寫過， 今天我想分享的是一個很簡單的核心代碼（不帶註釋和空行大概60行）， 沒有容錯判斷。

require.js

require函數實作用一句話概括：

依序載入require的模組，然後監測script的onload事件，判斷所有模組載入成功，執行require的callback， 如果只帶一個參數且不是陣列，就是載入成功後return 模組。

//标记已经加载成功的个数
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(&#39;head&#39;);
 
    (function($script) {
      //检测script 的onload事件
      $script.onload = function() {
        REQ_TOTAL++;
 
        var script_index = $script.getAttribute(&#39;index&#39;);
 
        exp_arr[script_index] = exports;
 
        window.exports = {};
 
        //所有链接加载成功后，执行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(&#39;script&#39;);
 
  $script.setAttribute(&#39;src&#39;, src);
  $script.setAttribute(&#39;index&#39;, index);
 
  return $script;
}

   

 接著寫了2個導出模組的js文件， 只寫了最簡單的exports實作

define.js

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

然後測試demo很簡單

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