An extremely simple requirejs implementation method-JS Tutorial-php.cn

An extremely simple requirejs implementation method

高洛峰

Release： 2016-12-09 15:49:38

Original

1446 people have browsed it

I have written about the source code analysis of require and sea in my previous blog. What I want to share today is a very simple core code (about 60 lines without comments and blank lines), without fault tolerance judgment.

require.js

require function implementation can be summarized in one sentence:

Load the require modules in sequence, then monitor the onload event of the script, determine that all modules are loaded successfully, and execute the require callback. If there is only one parameter and it is not an array, It is to return the module after loading successfully.

//标记已经加载成功的个数
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;
}

Copy after login

Then I wrote 2 js files for the export module, and only wrote the simplest exports implementation

define.js

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

Copy after login

define2.js

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

Copy after login

Then test The demo is very simple

//测试demo
 require([&#39;../res/define.js&#39;, &#39;../res/define2.js&#39;], function(def, def2) {
   def.define.sayHello();
  
   def2.define.info();
 });

Copy after login