Heim > Web-Frontend > js-Tutorial > Eine äußerst einfache Anforderungsimplementierungsmethode

Eine äußerst einfache Anforderungsimplementierungsmethode

高洛峰
Freigeben: 2016-12-09 15:49:38
Original
1518 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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

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);
  }
}
Nach dem Login kopieren

define2.js

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

Dann ist das Testen der Demo ganz einfach

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage