Comment requireJS implémente-t-il un chargeur de module ?-js tutoriel-php.cn

Cet article présente principalement une compréhension approfondie de l'implémentation de requireJS par un simple chargeur de module. Maintenant, je le partage avec vous et le donne comme référence.

Dans l'article précédent, nous avons souligné plus d'une fois l'importance de la programmation modulaire et les problèmes qu'elle peut résoudre :

① Résoudre le problème du conflit de nom de variable dans un fichier unique

② Résoudre les problèmes de collaboration multi-personnes Front-end

③ Résoudre les problèmes de dépendance de fichiers

④ Chargement à la demande (cette affirmation est en fait très fausse)

⑤. ..

Afin d'avoir une compréhension plus approfondie du chargeur, j'ai lu un peu le code source de requireJS, mais pour de nombreux étudiants, l'implémentation du chargeur n'est toujours pas claire

En fait, il n'est pas implémenté via le code, juste en lisant Si vous voulez comprendre une bibliothèque ou un framework, vous ne pouvez avoir qu'une compréhension partielle, donc aujourd'hui je vais implémenter un simple chargeur

Analyse du principe du chargeur

En fait, un module complet est nécessaire pour exécuter un programme. Le code suivant est un exemple :

//求得绩效系数
 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);

Copier après la connexion

Pour mon salaire complet, l'entreprise aura des récompenses de performance. Cependant, l'algorithme peut être très complexe, qui peut concerner le taux de participation, le niveau d'achèvement, etc. Nous ne nous soucierons pas de

pour le moment. . S'il y a une augmentation, il y aura une diminution. Par conséquent, nous paierons le fonds de prévoyance pour le logement et déduirons l'impôt sur le revenu des personnes physiques. Enfin, nous le ferons. C'est mon salaire

Pour un programme complet, la procédure ci-dessus est la suivante. indispensable, mais chaque fonction peut être extrêmement compliquée. Les choses liées à l'argent sont compliquées, donc les seules performances de l'entreprise auront Il peut y avoir plus de 1000 lignes de code

Nous allons donc commencer à le diviser ici :

<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>

Copier après la connexion

Le code ci-dessus montre qu'il est "divisé". En fait, cela a également causé le problème de la "combinaison". dans l'ensemble, les fichiers peuvent également impliquer des dépendances. Ici, nous entrons dans notre require et définissons

require et definition

En fait, la solution ci-dessus est toujours divisée par fichiers, pas par fichiers. par modules. Si le nom du fichier change, la page impliquera des changements. En fait, il devrait y avoir un mappage de chemin qui gère ce problème

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

Copier après la connexion

Donc un de nos modules correspond à un fichier path js, et le le reste est de charger le module correspondant, car le module front-end implique des requêtes. Donc cette façon d'écrire :

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

Copier après la connexion

n'est pas applicable au front-end Même si vous voyez cela fait quelque part, il doit y avoir quelques "trucs" ici, nous devons suivre AMD Standardized : <. 🎜>

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

Copier après la connexion

Voici une manière standard d'écrire requireJS. Définissez d'abord le module et son mappage de chemin, et définissez les dépendances

require(depArr, callback)

Copier après la connexion

Un chargement de module simple et complet Le contrôleur ressemble fondamentalement à cela. ceci. Premièrement, c'est un tableau de dépendances, et deuxièmement, c'est un rappel. Le rappel nécessite que toutes les dépendances soient chargées avant de pouvoir s'exécuter, et les paramètres du rappel sont les résultats de l'exécution des dépendances, donc. le module de définition doit généralement avoir une valeur de retour

Le plan est disponible, alors comment le mettre en œuvre ?

Plan de mise en œuvre

Quand il s'agit de charger un module, la première réaction des gens est ajax, car chaque fois qu'ils peuvent obtenir le contenu du fichier du module, il est modulaire Basic, mais utiliser ajax n'est pas possible, car ajax a des problèmes inter-domaines

et la solution modulaire doit inévitablement gérer des problèmes inter-domaines, il est donc pratique d'utiliser des balises de script créées dynamiquement pour charger des fichiers js. devenir le premier choix. Cependant, la solution qui n'utilise pas ajax a encore des exigences en termes de difficulté de mise en œuvre

PS : Dans notre travail actuel, il y aura également des scènes de chargement de fichiers modèles html dont nous parlerons. ceci plus tard

Habituellement, c'est ainsi que nous procédons. require sert d'entrée au programme pour planifier les ressources javascript. Après le chargement dans chaque module de définition, chaque module crée silencieusement une balise de script à charger

Après. le chargement est terminé, il va dans le module require. La file d'attente signale qu'il a terminé le chargement Lorsque tous les modules dépendants de require auront été chargés, son rappel sera exécuté

Le principe est à peu près le même, le le reste n'est que l'implémentation spécifique, puis démontrer si cette théorie est fiable

Implémentation de la castration du chargeur

Module de base

Selon la théorie ci-dessus, nous commencerons par la. trois fonctions de base de l'entrée

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

Copier après la connexion

Ces trois modules sont indispensables :

① config sert à configurer le mappage entre modules et chemins, ou a d'autres utilisations

② require est l'entrée du programme

③ définir conçoit chaque module et répond à la planification requise

Ensuite, nous aurons une méthode pour créer une balise de script et écouter son événement onLoad

④ loadScript

Ensuite, nous chargeons Après la balise script, il devrait y avoir un objet module global utilisé pour stocker les modules chargés, donc deux exigences sont proposées ici :

⑤ objet de stockage de module require.moduleObj

⑥ Module , le constructeur du module

Avec les modules de base ci-dessus, nous avons formé le code suivant :

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

Copier après la connexion

La prochaine étape est donc l'implémentation spécifique, puis en complétant les interfaces manquantes pendant le processus d'implémentation Avec des détails, l'implémentation finale n'a souvent rien à voir avec la conception originale...

Implémentation du code

这块最初实现时，本来想直接参考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;
})();

Copier après la connexion

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

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

未处理循环依赖问题

未处理CMD写法

未处理html模板加载相关

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

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

......

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

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

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

document.currentScript

Copier après la connexion

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

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

上面是我整理给大家的，希望今后会对大家有帮助。

有关在Vue2.x中父组件与子组件双向绑定（详细教程）

详细介绍在Vue2.0中v-for迭代语法的变化（详细教程）

在vue2.0中循环遍历并且加载不同图片（详细教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!