js模块化加载器实现

背景

自es6以前，JavaScript是天生模块化缺失的，即缺少类似后端语言的class，
作用域也只以函数作为区分。这与早期js的语言定位有关，
作为一个只需要在网页中嵌入几十上百行代码来实现一些基本的交互效果的脚本语言，
确实用不着严格的组织代码规范。但是随着时代的发展，js承担的任务越来越重，
从原先的script引入几十行代码即可的状态变成现在多人协作文件众多的地步，
管理和组织代码的难度越来越大，模块化的需求也越来越迫切。
在此背景下，众多的模块化加载器便应运而生。

模块化规范和实现

前文提到在es6模块化出现之前，为了解决模块化的需求，出现了众多的模块化机制例如cmd，amd等。遵循不同规范有sea.js, require.js等实现。

• AMD:
  Asynchronous Module Definition 异步模块定义。浏览器端模块化开发的规范，
  模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
  AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。require.js详情参考

  //依赖前置，jquery模块先声明
  define(['jquery'], function ($) {
  /***/
  })

• CommonJS:
  CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。CommonJS规范参考

  //同步加载
  var $ = require('jquery');
  /****/
  module.exports = myFunc;

• CMD：
  CMD（Common Module Definition） 通用模块定义。该规范是SeaJS推广过程中发展出来的。
  与AMD区别：
  AMD是依赖关系前置，CMD是按需加载。更多参考

  define(function (require, exports, module) {
  // 就近依赖
  var $ = require('jquery');
  /****/
  })

• UMD：
  Universal Module Definition 通用模块规范。
  基于统一规范的目的出现，看起来没那么简约，但是支持amd和commonjs以及全局模块模式。

  //做的工作其实就是这么粗暴，判断当前用的什么就以当前规范来定义
  (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
  // AMD
  define(['jquery'], factory);
  } else if (typeof exports === 'object') {
  // CommonJS
  module.exports = factory(require('jquery'));
  } else {
  // 全局变量
  root.returnExports = factory(root.jQuery);
  }
  }(this, function ($) {
  // methods
  function myFunc(){};
  // exposed public method
  return myFunc;
  }));

  综上所诉，各个不同的规范都有各自的优点，具体使用需要是各自项目情况而定。没有好不好只有适用与否。

模块加载器实现原理浅析

以上各种模块加载器关于模块化的实现都有各自的特点，并且是比较成型完善的体系。本文也无意去重新实现一个大而全的模块加载器。
本着学习的态度，简单对其中的部分原理进行部分探究。
所有的模块加载器的实现都要有以下步骤:

• 动态创建脚本节点
  模块化归根到底还是要在浏览器中加载脚本。
• 解析依赖模块路径
  模块化的初衷就是解决各个文件的依赖问题，所以各个模块之间的依赖分析必不可少。
  该部分需要控制脚本加载队列，对递归依赖进行分析，按顺序进行加载
• 模块缓存
  将每个模块的内容根据特定规则保存起来，为调用做准备。
  对于没有声明name的模块要匹配的话就需要根据currentScript获取文件名。然后进行缓存.

基础方法声明

既然是有个加载器，当然是会指定一些规则来让使用者遵循。否则也实现不了相应的方法。不同的框架的实现方式也是不同的，不过速途同归。
作为一个模块加载器(简单归简单)，基本的接口如下：

• 定义模块(define):
  define(deps,func,name)参数如下
  1 deps: 依赖模块，支持数组，或者省略
  2 func: 自身func，即接受依赖模块作为参数的回调
  3 name: 模块对应的name，如果不存在则根据当前路径来命名。
  功能无非是根据不同的状态将该模块处理后的属性，例如name等。存入模块队列(modules变量)中。

  modules[ src ] = {
  name : name || src,
  src : src,
  dps : [],
  exports : (typeof fn === "function")&&fn(),
  state : "complete"
  };

• 依赖模块接口(require):
  require(deps,func)参数同define。这里就不实现支持commonjs的方式了，即依赖必须前置声明。

  //不支持 
  var a = require('a');
  //支持 
  require( ['a'], function(a) {
  var a1 = a;
  }); 

  这样而来require模块的完全可以通过define来实现了。

动态创建脚本

归根到底前端模块化的实质还是通过script标签来引入相应文件(基于服务端的模块加载器非此类实现，例如webpack等)。
所以必不可少的需要进行创建和引入。主要用到的createElement方法来创建以及appendChild插入dom中。

/**
* @param src string
* 此处的src为路径，即define里的字段
* */
var loadScript = function(src) {
/**
* 进一步处理，是否网络路径或者本地路径
* */
var scriptSrc = getUrl(src);
/**
* 接下来实现大同小异，无非是脚本加载变化时的处理函数的做法
* */
var sc = document.createElement("script");
var head = document.getElementsByTagName("head")[0];
sc.src = scriptSrc;
sc.onload = function() {
console.log("script tag is load, the url is : " + src);
};
head.appendChild( sc );
};

解析依赖模块路径

由前面创建脚本可知，需要解析脚本路径来分别区分当前不同路径。
路径和模块的对应关系遵循id=路径的原则

 

//此处的a对应的路径即为base+a.js.
require('a', function(){
//abcc
} ) 

当然实际情况中的匹配是很复杂的，简单实现就不考虑那么多。
对于匿名模块的存在，是可以通过document.currentScript获取当前路径手动给其增加标识的。
脚本路径无外乎一下几种情况：

• 相对路径：
  此种路径只需要获取当前跟路径拼接处理即可。(为了简化处理，此处入口文件在项目根目录下)
• http网络路径:
  此路径直接不变即可.

• npm依赖的各种包，此处就先不处理这种了毕竟是简单实现。

  var getUrl = function(src) {
  var scriptSrc = "";
  //判断URL是否是
  //相对路径'/'或者'./'开头的，获取当前根路径替换掉其他字符即可。
  if( src.indexOf("/") === 0 || src.indexOf("./") === 0 ) {
  scriptSrc = require.config.base + src.replace(/(^/|^./)/,"");
  }else if( src.indexOf("http:") === 0 ) {
  //直接获取
  scriptSrc = src;
  }else if( src.match(/^[a-zA-Z1-9]/) ){
  //不以路径符开头的直接凭借
  scriptSrc = require.config.base + src;
  }else if(true) {
  alert("src错误!");
  };
  if (scriptSrc.lastIndexOf(".js") === -1) {
  scriptSrc += ".js";
  };
  return scriptSrc;
  };

  此处还需要获取当前的根路径，模块化加载必定会有script来加载加载器js。所以可以据此来判断当前路径。
  关于兼容性的处理，这里就不在讲述。

  //去除&?等字符
  var repStr = function(str) {
  return (str || "").replace(/[&?]{1}.+/g,"") || "";
  };
  if(document.currentScript) return repStr(document.currentScript.src);

模块缓存

脚本加载之后，需要根据模块不同的状态进行处理。模块主要分以下状态：
1 init：
初始化，即刚进行模块相关属性的处理，未进行模块解析。即将进行模块加载处理
2 loading:
模块解析中，即将完成
3 complete:
模块解析完成，将参数对象，exports接口存在缓存中。依赖模块解析完成之后进行执行。
至此，关于模块化的探究就基本结束了。说来原理大家都知道。无非就是解析一下模块路径，然后动态创建脚本，控制下加载就可以了。实现以下还是有很多收获的

参考文章

• require中文

• JS模块化编程之加载器原理

• commonjs规范

• hello Sea.js

如水穿石，厚积才可薄发