淺談js模組載入方式（初級）

標籤：error   foreach   dialog   ram   substr   doc   extend   img   目標   

 1.簡介：  前端模組化開發日漸鼎盛，如何將零散的外掛程式或者是普通的js指令檔統一管理及引用，是眾多開發人員共同的目標。本人是從事.net開發的，最近對前端的一些東西特別的感興趣，也會嘗試的夾雜一點自己的想法，寫一些小東西。東西不牛逼，但是感覺用起來還是方便那麼一點的。下面就展示一下簡短的小代碼。

 2.中心思想：通過外部調用事先封裝好的模組載入方法，傳入參數（包括主目錄及模組js或者css的目錄 ），在程式啟動並執行同時，會動態將相應的css或者是js代碼追加引用到head標籤內，這樣，就可以使用被引用的檔案的樣式或者方法啦。

 1 (function(req) { 2     window._Req= req; 3 })((function($) { 4     var _factory = function() {}; //模組工廠 5     //docker 6     _factory.prototype = { 7         _origin: location.origin || location.protocol + "//" + location.host,//網域名稱地址 8         _aim: null, 9         _config: function(param) {10             var _default = { //預設參數11                     _coreDir: "",12                     _moduleArr: [13                         [‘‘, ‘‘]14                     ], //模組數組15                 },16                 _opt = {};17             $.extend(_opt, _default);18             if (typeof param === ‘object‘)19                 $.extend(_opt, param);20             this._aim = _opt;21             this._load();   //載入模組22         },23         _load: function() {24             try {25                 var _modules = this._aim._moduleArr,26                     _core = this._aim._coreDir;27                 _modules.forEach(function(_element) {28                     _element.forEach(function(_ele) {29                         var _index = _ele.lastIndexOf(‘.‘), 30                             _moduleType = _ele.substring(_index + 1), 31                             _moduleDir = _core + ‘/‘ + _ele, 32                             _module = null;33                         switch (_moduleType) {34                             case ‘js‘:35                                 _module = document.createElement(‘script‘);36                                 _module.src = _moduleDir;37                                 break;38                             case ‘css‘:39                                 _module = document.createElement(‘link‘);40                                 _module.href = _moduleDir;41                                 _module.rel = ‘stylesheet‘;42                                 break;43                             default:44                                 console.error("對不起模組類型不符");45                                 break;46                         }47                         document.head.appendChild(_module); 48                     });49                 }, this);50             } catch (ex) {51                 throw ex;52             }53         }54     };55     return new _factory(); //返回工廠56 })(jQuery))

源檔案

1  _Req._config({2        _coreDir: "../jq-package",3                     _moduleArr: [4                         [‘js/ui-dialog.js‘, ‘css/dialog.css‘]5                     ], //模組數組6   });

調用

 

淺談js模組載入方式（初級）