Analysieren, wie JavaScript-Module geladen werden

In diesem Artikel werden hauptsächlich die primären Lernmaterialien der js-Modullademethode im Detail vorgestellt, die einen gewissen Referenzwert haben.

Einführung: Front-End-Modulentwicklung Die einheitliche Verwaltung und Referenzierung verstreuter Plug-Ins oder gewöhnlicher JS-Skriptdateien wird immer beliebter. Dies ist ein gemeinsames Ziel vieler Entwickler. Ich beschäftige mich in letzter Zeit besonders mit der .net-Entwicklung. Ich werde auch versuchen, einige meiner eigenen Ideen einzubringen und einige kleine Dinge zu schreiben. Das Zeug ist nicht großartig, aber es fühlt sich immer noch ein wenig praktisch an, es zu verwenden.

Das Folgende ist ein Kurzcode.

Zentrale Idee: Durch externen Aufruf der vorgekapselten Modullademethode, Übergabe von Parametern (einschließlich des Hauptverzeichnisses und des Verzeichnisses des Moduls js oder css), während das Programm ausgeführt wird , wird der entsprechende CSS- oder JS-Code dynamisch an das Head-Tag angehängt, sodass Sie den Stil oder die Methode der referenzierten Datei verwenden können.

Quelldatei:

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

Aufruf:

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

Das obige ist der detaillierte Inhalt vonAnalysieren, wie JavaScript-Module geladen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!