Analyser la façon dont les modules JavaScript sont chargés

Cet article présente principalement en détail le matériel d'apprentissage principal de la méthode de chargement de module js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Introduction : Développement modulaire frontal. est de plus en plus populaire. Comment gérer et référencer uniformément des plug-ins dispersés ou des fichiers de script js ordinaires est un objectif commun à de nombreux développeurs. Je suis engagé dans le développement .net. Récemment, j'ai été particulièrement intéressé par certaines choses front-end, je vais également essayer d'y intégrer certaines de mes propres idées et d'écrire quelques petites choses. Le truc n'est pas génial, mais il semble quand même un peu pratique à utiliser.

Ce qui suit est un code court.

Idée centrale : En appelant en externe la méthode de chargement du module pré-encapsulé, en passant des paramètres (y compris le répertoire principal et le répertoire js ou css du module), pendant que le programme est en cours d'exécution, il ajoutera dynamiquement le code CSS ou js correspondant à la balise head, afin que vous puissiez utiliser le style ou la méthode du fichier référencé.

Fichier source :

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

Appel :

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

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!