매우 간단한 requirejs 구현 방법

이전 블로그에서 require와 sea의 소스코드 분석에 대해 쓴 적이 있습니다. 오늘 공유하고 싶은 것은 내결함성 판단이 없는 매우 간단한 핵심 코드(주석과 빈 줄이 없는 약 60줄)입니다.

require.js

require 함수 구현은 한 문장으로 요약할 수 있습니다.

require 모듈을 순서대로 로드한 다음 스크립트의 onload 이벤트를 모니터링하고 모든 모듈이 성공적으로 로드되고 require를 실행합니다. 콜백이 하나의 매개 변수만 사용하고 배열이 아닌 경우 성공적인 로드 후 모듈을 반환합니다.

//标记已经加载成功的个数
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 파일을 작성하고 가장 간단한 내보내기 구현만 작성했습니다.

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);
  }
}

데모 테스트는 매우 간단합니다

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