requireJS implementiert eine einfache Modul-Loader-Instanzfreigabe-js-Tutorial-php.cn

Dieser Artikel führt hauptsächlich in ein tiefgreifendes Verständnis der RequireJS-Implementierung eines einfachen Modulladers ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Im vorherigen Artikel haben wir mehr als einmal die Bedeutung der modularen Programmierung und die Probleme betont, die sie lösen kann:

① Lösung des Problems von Namenskonflikten bei Variablen in einzelnen Dateien

② Lösen Sie das Front-End-Problem der Zusammenarbeit mehrerer Personen

③ Lösen Sie das Problem der Dateiabhängigkeit

④ Laden bei Bedarf (diese Aussage ist eigentlich sehr falsch)

⑤...

Um den Loader besser zu verstehen, habe ich ein wenig den Quellcode von requireJS gelesen, aber für viele Studenten ist die Implementierung des Loaders immer noch nicht klar

Tatsächlich wird es nicht durch Code implementiert. Das Lesen allein kann Ihnen nur ein teilweises Verständnis einer Bibliothek oder eines Frameworks vermitteln, daher werde ich heute einen einfachen Loader implementieren

Analyse von Loader-Prinzipien

Brechen und Kombinieren

Tatsächlich ist ein vollständiges Modul erforderlich, um ein Programm auszuführen:

//求得绩效系数
 var performanceCoefficient = function () {
  return 0.2;
 };

 //住房公积金计算方式
 var companyReserve = function (salary) {
  return salary * 0.2;
 };

 //个人所得税
 var incomeTax = function (salary) {
  return salary * 0.2;
 };

 //基本工资
 var salary = 1000;

 //最终工资
 var mySalary = salary + salary * performanceCoefficient();
 mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
 console.log(mySalary);

Nach dem Login kopieren

Ich habe eine Kopie. In Bezug auf das Gesamtgehalt erhält das Unternehmen Leistungsbelohnungen, aber der Algorithmus kann sehr komplex sein und Anwesenheit, Abschluss usw. beinhalten. Ich habe gewonnen Das ist mir vorerst egal

Wenn es eine Erhöhung gibt, wird es eine Verringerung geben, also werden wir bei der Zahlung der Wohnungsvorsorgekasse auch die persönliche Einkommenssteuer abziehen, die letztendlich mein Gehalt ist

Für ein vollständiges Programm ist der obige Prozess unverzichtbar, aber jede Funktion kann äußerst kompliziert und mit Geld verbunden sein. Alles ist kompliziert, sodass allein die Unternehmensleistung 1.000 Codezeilen überschreiten kann

Also Wir beginnen hier mit der Aufteilung:

<script src="companyReserve.js" type="text/javascript"></script>
<script src="incomeTax.js" type="text/javascript"></script>
<script src="performanceCoefficient.js" type="text/javascript"></script>
<script type="text/javascript">

 //基本工资
 var salary = 1000;

 //最终工资
 var mySalary = salary + salary * performanceCoefficient();
 mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
 console.log(mySalary);

</script>

Nach dem Login kopieren

Der obige Code zeigt, dass es „getrennt“ ist, aber tatsächlich verursacht auch das Problem der „Wiedervereinigung“. Schließlich gibt es in der Datei möglicherweise auch Abhängigkeiten. Hier geben wir unsere Anforderungen und Definitionen ein 🎜>

Tatsächlich ist die obige Lösung immer noch nach Dateien und nicht nach Modulen unterteilt. Wenn sich der Dateiname ändert, wird die Seite geändert. Tatsächlich sollte es eine Pfadzuordnung geben, um dieses Problem zu lösen

Wir haben also ein Modul. Es entspricht einer Pfad-JS-Datei, und der Rest besteht darin, das entsprechende Modul zu laden, da das Front-End-Modul Anforderungen beinhaltet. Diese Schreibweise:

var pathCfg = {
 &#39;companyReserve&#39;: &#39;companyReserve&#39;,
 &#39;incomeTax&#39;: &#39;incomeTax&#39;,
 &#39;performanceCoefficient&#39;: &#39;performanceCoefficient&#39;
};

Nach dem Login kopieren

ist also nicht auf das Frontend anwendbar. Auch wenn Sie sehen, dass dies irgendwo getan wurde, muss etwas darin getan sein und Füße“, hier müssen wir der AMD-Spezifikation folgen:

companyReserve = requile(&#39;companyReserve&#39;);

Nach dem Login kopieren

Hier ist eine Standard-RequireJS-Schreibweise: Definieren Sie zuerst das Modul und seine Pfadzuordnung, wo Abhängigkeiten definieren

require.config({
 &#39;companyReserve&#39;: &#39;companyReserve&#39;,
 &#39;incomeTax&#39;: &#39;incomeTax&#39;,
 &#39;performanceCoefficient&#39;: &#39;performanceCoefficient&#39;
});

require([&#39;companyReserve&#39;, &#39;incomeTax&#39;, &#39;performanceCoefficient&#39;], function (companyReserve, incomeTax, performanceCoefficient) {
 //基本工资
 var salary = 1000;

 //最终工资
 var mySalary = salary + salary * performanceCoefficient();
 mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
 console.log(mySalary);
});

Nach dem Login kopieren

Ein einfacher und vollständiger Modullader sieht im Grunde so aus: Der erste ist ein Array von Abhängigkeiten, gefolgt von einem Rückruf, der Abhängigkeiten erfordert muss geladen werden, um ausgeführt zu werden, und die Parameter des Rückrufs sind die Ergebnisse der Abhängigkeitsausführung. Daher muss das Definitionsmodul im Allgemeinen einen Rückgabewert haben.

Nachdem die Lösung verfügbar ist, erfahren Sie, wie Sie sie implementieren ?

require(depArr, callback)

Nach dem Login kopieren

Implementierungsplan

Wenn es um das Laden von Modulen geht, ist die erste Reaktion der Leute Ajax, denn wann immer sie den Inhalt der Moduldatei abrufen können, ist diese modular aufgebaut. Die Verwendung von Ajax ist jedoch nicht möglich, da Ajax domänenübergreifende Probleme aufweist und die modulare Lösung zwangsläufig domänenübergreifende Probleme bewältigen muss. Daher ist es praktisch, dynamisch erstellte Skript-Tags zum Laden von JS-Dateien zu verwenden Die Lösung, die kein Ajax verwendet, stellt jedoch immer noch Anforderungen an die Implementierungsschwierigkeit.

PS: In unserer eigentlichen Arbeit wird es auch Szenen zum Laden von HTML-Vorlagendateien geben dies später

Normalerweise dient require als Programmeingang zum Planen von Javascript-Ressourcen. Nach dem Laden in jedes definierte Modul erstellt jedes Modul stillschweigend ein Skript-Tag zum Laden Der Ladevorgang ist abgeschlossen und die Warteschlange meldet, dass der Ladevorgang abgeschlossen ist. Wenn alle abhängigen Module in require geladen wurden, wird der Rückruf ausgeführt.

Das Prinzip ist ungefähr das gleiche Der Rest ist nur die spezifische Implementierung und zeigt dann, ob diese Theorie zuverlässig ist.

Loader-Kastrationsimplementierung

Kernmodul

Gemäß der obigen Theorie beginnen wir mit drei Grundfunktionen des Eingangs

Diese drei Module sind unverzichtbar:

① config wird verwendet, um die Zuordnung zwischen Modulen und Pfaden zu konfigurieren, oder hat andere Verwendungszwecke

② Erfordernis ist Programmeintritt

var require = function () {
};
require.config = function () {
};
require.define = function () {
};

Nach dem Login kopieren

③ Definieren Sie jedes Modul, entwerfen Sie es und reagieren Sie auf die Anforderungsplanung

Dann haben wir eine Methode, um ein Skript-Tag zu erstellen und anzuhören sein onLoad-Ereignis

④ loadScript

Zweitens sollte es nach dem Laden des Skript-Tags ein globales Modulobjekt zum Speichern des geladenen Moduls geben, daher werden hier zwei Anforderungen gestellt:

⑤ require.moduleObj Modulspeicherobjekt

⑥ Modul, Modulkonstruktor

Mit den oben genannten Kernmodulen haben wir den folgenden Code gebildet:

(function () {

 var Module = function () {
  this.status = &#39;loading&#39;; //只具有loading与loaded两个状态
  this.depCount = 0; //模块依赖项
  this.value = null; //define函数回调执行的返回
 };


 var loadScript = function (url, callback) {

 };

 var config = function () {

 };

 var require = function (deps, callback) {

 };

 require.config = function (cfg) {

 };

 var define = function (deps, callback) {

 };

})();

Nach dem Login kopieren

于是接下来便是具体实现，然后在实现过程中补足不具备的接口与细节，往往在最后的实现与最初的设计没有半毛钱关系......

代码实现

这块最初实现时，本来想直接参考requireJS的实现，但是我们老大笑眯眯的拿出了一个他写的加载器，我一看不得不承认有点妖

于是这里便借鉴了其实现，做了简单改造：

(function () {

 //存储已经加载好的模块
 var moduleCache = {};

 var require = function (deps, callback) {
  var params = [];
  var depCount = 0;
  var i, len, isEmpty = false, modName;

  //获取当前正在执行的js代码段，这个在onLoad事件之前执行
  modName = document.currentScript && document.currentScript.id || &#39;REQUIRE_MAIN&#39;;

  //简单实现，这里未做参数检查，只考虑数组的情况
  if (deps.length) {
   for (i = 0, len = deps.length; i < len; i++) {
    (function (i) {
     //依赖加一
     depCount++;
     //这块回调很关键
     loadMod(deps[i], function (param) {
      params[i] = param;
      depCount--;
      if (depCount == 0) {
       saveModule(modName, params, callback);
      }
     });
    })(i);
   }
  } else {
   isEmpty = true;
  }

  if (isEmpty) {
   setTimeout(function () {
    saveModule(modName, null, callback);
   }, 0);
  }

 };

 //考虑最简单逻辑即可
 var _getPathUrl = function (modName) {
  var url = modName;
  //不严谨
  if (url.indexOf(&#39;.js&#39;) == -1) url = url + &#39;.js&#39;;
  return url;
 };

 //模块加载
 var loadMod = function (modName, callback) {
  var url = _getPathUrl(modName), fs, mod;

  //如果该模块已经被加载
  if (moduleCache[modName]) {
   mod = moduleCache[modName];
   if (mod.status == &#39;loaded&#39;) {
    setTimeout(callback(this.params), 0);
   } else {
    //如果未到加载状态直接往onLoad插入值，在依赖项加载好后会解除依赖
    mod.onload.push(callback);
   }
  } else {

   /*
   这里重点说一下Module对象
   status代表模块状态
   onLoad事实上对应requireJS的事件回调，该模块被引用多少次变化执行多少次回调，通知被依赖项解除依赖
   */
   mod = moduleCache[modName] = {
    modName: modName,
    status: &#39;loading&#39;,
    export: null,
    onload: [callback]
   };

   _script = document.createElement(&#39;script&#39;);
   _script.id = modName;
   _script.type = &#39;text/javascript&#39;;
   _script.charset = &#39;utf-8&#39;;
   _script.async = true;
   _script.src = url;

   //这段代码在这个场景中意义不大，注释了
   //   _script.onload = function (e) {};

   fs = document.getElementsByTagName(&#39;script&#39;)[0];
   fs.parentNode.insertBefore(_script, fs);

  }
 };

 var saveModule = function (modName, params, callback) {
  var mod, fn;

  if (moduleCache.hasOwnProperty(modName)) {
   mod = moduleCache[modName];
   mod.status = &#39;loaded&#39;;
   //输出项
   mod.export = callback ? callback(params) : null;

   //解除父类依赖，这里事实上使用事件监听较好
   while (fn = mod.onload.shift()) {
    fn(mod.export);
   }
  } else {
   callback && callback.apply(window, params);
  }
 };

 window.require = require;
 window.define = require;

})();

Nach dem Login kopieren

首先这段代码有一些问题：

没有处理参数问题，字符串之类皆未处理

未处理循环依赖问题

未处理CMD写法

未处理html模板加载相关

未处理参数配置，baseUrl什么都没有搞

基于此想实现打包文件也不可能

......

但就是这100行代码，便是加载器的核心，代码很短，对各位理解加载器很有帮助，里面有两点需要注意：

① requireJS是使用事件监听处理本身依赖，这里直接将之放到了onLoad数组中了

② 这里有一个很有意思的东西

document.currentScript

Nach dem Login kopieren

这个可以获取当前执行的代码段

requireJS是在onLoad中处理各个模块的，这里就用了一个不一样的实现，每个js文件加载后，都会执行require（define）方法

执行后便取到当前正在执行的文件，并且取到文件名加载之，正因为如此，连script的onLoad事件都省了......

demo实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
</head>
<body>
</body>
<script src="require.js" type="text/javascript"></script>
<script type="text/javascript">
 require([&#39;util&#39;, &#39;math&#39;, &#39;num&#39;], function (util, math, num) {

  num = math.getRadom() + &#39;_&#39; + num;
  num = util.formatNum(num);
  console.log(num);
 });
</script>
</html>

Nach dem Login kopieren

//util
define([], function () {
 return {
  formatNum: function (n) {
   if (n < 10) return &#39;0&#39; + n;
   return n;
  }
 };
});

Nach dem Login kopieren

//math
define([&#39;num&#39;], function (num) {
 return {
  getRadom: function () {
   return parseInt(Math.random() * num);
  }
 };
});

Nach dem Login kopieren

//math
define([&#39;num&#39;], function (num) {
 return {
  getRadom: function () {
   return parseInt(Math.random() * num);
  }
 };
});

Nach dem Login kopieren

小结

今天我们实现了一个简单的模块加载器，通过他希望可以帮助各位了解requireJS或者seaJS，最后顺利进入模块化编程的行列。