深入理解requireJS-实现一个简单的模块加载器

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

<script src="/UploadFiles/2021-04-02/companyReserve.js">

上面的代码表明上是“分”开了，事实上也造成了“合”的问题，我要如何才能很好的把它们重新合到一起呢，毕竟其中的文件可能还涉及到依赖，这里便进入我们的require与define
require与define
事实上，上面的方案仍然是以文件划分，而不是以模块划分的，若是文件名发生变化，页面会涉及到改变，其实这里应该有一个路径的映射处理这个问题


var pathCfg = {
 'companyReserve': 'companyReserve',
 'incomeTax': 'incomeTax',
 'performanceCoefficient': 'performanceCoefficient'
};


于是我们一个模块便对应了一个路径js文件，剩下的便是将之对应模块的加载了，因为前端模块涉及到请求。所以这种写法：


companyReserve = requile('companyReserve');


对于前端来说是不适用的，就算你在哪里看到这样做了，也一定是其中做了一些“手脚”，这里我们便需要依据AMD规范了：


require.config({
 'companyReserve': 'companyReserve',
 'incomeTax': 'incomeTax',
 'performanceCoefficient': 'performanceCoefficient'
});

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

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



这里便是一个标准的requireJS的写法了，首先定义模块以及其路径映射，其中定义依赖项


require(depArr, callback)


一个简单完整的模块加载器基本就是这个样子了，首先是一个依赖的数组，其次是一个回调，回调要求依赖项全部加载才能运行，并且回调的参数便是依赖项执行的结果，所以一般要求define模块具有一个返回值
方案有了，那么如何实现呢？
实现方案
说到模块加载，人们第一反应都是ajax，因为无论何时，能拿到模块文件的内容，都是模块化的基本，但是采用ajax的方式是不行的，因为ajax有跨域的问题
而模块化方案又不可避免的要处理跨域的问题，所以使用动态创建script标签加载js文件便成为了首选，但是，不使用ajax的方案，对于实现难度来说还是有要求
PS：我们实际工作中还会有加载html模板文件的场景，这个稍候再说
通常我们是这样做的，require作为程序入口，调度javascript资源，而加载到各个define模块后，各个模块便悄无声息的创建script标签加载
加载结束后便往require模块队列报告自己加载结束了，当require中多有依赖模块皆加载结束时，便执行其回调
原理大致如此，剩下的只是具体实现，而后在论证这个理论是否靠谱即可
加载器阉割实现
核心模块
根据以上理论，我们由整体来说，首先以入口三个基本函数来说


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


这三个模块比不可少：
① config用以配置模块与路径的映射，或者还有其他用处
② require为程序入口
③ define设计各个模块，响应require的调度
然后我们这里会有一个创建script标签的方法，并且会监听其onLoad事件
④ loadScript
其次我们加载script标签后，应该有一个全局的模块对象，用于存储已经加载好的模块，于是这里提出了两个需求：
⑤ require.moduleObj 模块存储对象
⑥ Module，模块的构造函数
有了以上核心模块，我们形成了如下代码：


(function () {

 var Module = function () {
  this.status = 'loading'; //只具有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) {

 };

})();




于是接下来便是具体实现，然后在实现过程中补足不具备的接口与细节，往往在最后的实现与最初的设计没有半毛钱关系......
代码实现
这块最初实现时，本来想直接参考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 || 'REQUIRE_MAIN';

  //简单实现，这里未做参数检查，只考虑数组的情况
  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('.js') == -1) url = url + '.js';
  return url;
 };

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

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

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

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

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

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

  }
 };

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

  if (moduleCache.hasOwnProperty(modName)) {
   mod = moduleCache[modName];
   mod.status = 'loaded';
   //输出项
   mod.export = callback "htmlcode">

document.currentScript


这个可以获取当前执行的代码段
requireJS是在onLoad中处理各个模块的，这里就用了一个不一样的实现，每个js文件加载后，都会执行require（define）方法
执行后便取到当前正在执行的文件，并且取到文件名加载之，正因为如此，连script的onLoad事件都省了......
demo实现




<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
</head>
<body>
</body>
<script src="/UploadFiles/2021-04-02/require.js">



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




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




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


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：vue2.0 父组件给子组件传递数据的方法
            
下一篇：vue2.0 如何把子组件的数据传给父组件(推荐)