Eine äußerst einfache Anforderungsimplementierungsmethode

Ich habe in meinem vorherigen Blog über die Quellcode-Analyse von require und sea geschrieben. Was ich heute teilen möchte, ist ein sehr einfacher Kerncode (ca. 60 Zeilen ohne Kommentare und Leerzeilen) ohne Fehlertoleranzbeurteilung.

require.js

Die Implementierung der Anforderungsfunktion kann in einem Satz zusammengefasst werden:

Laden Sie die Anforderungsmodule nacheinander, überwachen Sie dann das Onload-Ereignis des Skripts und bestimmen Sie dies Alle Module wurden erfolgreich geladen und müssen ausgeführt werden. Wenn der Rückruf nur einen Parameter annimmt und kein Array ist, gibt er das Modul nach erfolgreichem Laden zurück.

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

Dann habe ich 2 js-Dateien zum Exportieren von Modulen geschrieben und nur die einfachste Exportimplementierung geschrieben

define.js

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

define2.js

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

Dann ist das Testen der Demo ganz einfach

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