Parsing how JavaScript modules are loaded

This article mainly introduces the primary learning materials of js module loading method in detail, which has certain reference value. Interested friends can refer to it

Introduction: Front-end modular development is becoming increasingly popular. How to uniformly manage and reference scattered plug-ins or ordinary js script files is a common goal of many developers. I am engaged in .net development. Recently, I have been particularly interested in some front-end things. I will also try to mix in some of my own ideas and write some small things. The stuff isn't awesome, but it still feels a little convenient to use.

The following is a short code.

Central idea: By externally calling the pre-encapsulated module loading method, passing in parameters (including the main directory and the module js or css directory), while the program is running, it will dynamically Append the corresponding css or js code to the head tag, so that you can use the style or method of the referenced file.

Source file:

(function(req) {
  window._Req= req;
})((function($) {
  var _factory = function() {}; //模块工厂
  //docker
  _factory.prototype = {
    _origin: location.origin || location.protocol + "//" + location.host,//域名地址
    _aim: null,
    _config: function(param) {
      var _default = { //默认参数
          _coreDir: "",
          _moduleArr: [
            ['', '']
          ], //模块数组
        },
        _opt = {};
      $.extend(_opt, _default);
      if (typeof param === 'object')
        $.extend(_opt, param);
      this._aim = _opt;
      this._load();  //加载模块
    },
    _load: function() {
      try {
        var _modules = this._aim._moduleArr,
          _core = this._aim._coreDir;
        _modules.forEach(function(_element) {
          _element.forEach(function(_ele) {
            var _index = _ele.lastIndexOf('.'), 
              _moduleType = _ele.substring(_index + 1), 
              _moduleDir = _core + '/' + _ele, 
              _module = null;
            switch (_moduleType) {
              case 'js':
                _module = document.createElement('script');
                _module.src = _moduleDir;
                break;
              case 'css':
                _module = document.createElement('link');
                _module.href = _moduleDir;
                _module.rel = 'stylesheet';
                break;
              default:
                console.error("对不起模块类型不匹配");
                break;
            }
            document.head.appendChild(_module); 
          });
        }, this);
      } catch (ex) {
        throw ex;
      }
    }
  };
  return new _factory(); //返回工厂
})(jQuery))

Call:

_Req._config({
    _coreDir: "../jq-package",
          _moduleArr: [
            ['js/ui-dialog.js', 'css/dialog.css']
          ], //模块数组
 });

The above is the detailed content of Parsing how JavaScript modules are loaded. For more information, please follow other related articles on the PHP Chinese website!