最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

js模塊加載方式淺析

來源:懂視網 責編:小采 時間:2020-11-27 22:32:55
文檔

js模塊加載方式淺析

js模塊加載方式淺析:簡介: 前端模塊化開發(fā)日漸鼎盛,如何將零散的插件或者是普通的js腳本文件統(tǒng)一管理及引用,是眾多開發(fā)者共同的目標。本人是從事.net開發(fā)的,最近對前端的一些東西特別的感興趣,也會嘗試的夾雜一點自己的想法,寫一些小東西。東西不牛逼,但是感覺用起來還是
推薦度:
導讀js模塊加載方式淺析:簡介: 前端模塊化開發(fā)日漸鼎盛,如何將零散的插件或者是普通的js腳本文件統(tǒng)一管理及引用,是眾多開發(fā)者共同的目標。本人是從事.net開發(fā)的,最近對前端的一些東西特別的感興趣,也會嘗試的夾雜一點自己的想法,寫一些小東西。東西不牛逼,但是感覺用起來還是

簡介: 前端模塊化開發(fā)日漸鼎盛,如何將零散的插件或者是普通的js腳本文件統(tǒng)一管理及引用,是眾多開發(fā)者共同的目標。本人是從事.net開發(fā)的,最近對前端的一些東西特別的感興趣,也會嘗試的夾雜一點自己的想法,寫一些小東西。東西不牛逼,但是感覺用起來還是方便那么一點的。

下面就展示一下簡短的小代碼。

中心思想:通過外部調用事先封裝好的模塊加載方法,傳入?yún)?shù)(包括主目錄及模塊js或者css的目錄 ),在程序運行的同時,會動態(tài)的將相應的css或者是js代碼追加引用到head標簽內,這樣,就可以使用被引用的文件的樣式或者方法啦。

源文件:

(function(req) {
 window._Req= req;
})((function($) {
 var _factory = function() {}; //模塊工廠
 //docker
 _factory.prototype = {
 _origin: location.origin || location.protocol + "http://" + location.host,//域名地址
 _aim: null,
 _config: function(param) {
 var _default = { //默認參數(shù)
 _coreDir: "",
 _moduleArr: [
 ['', '']
 ], //模塊數(shù)組
 },
 _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))

調用:

_Req._config({
 _coreDir: "../jq-package",
 _moduleArr: [
 ['js/ui-dialog.js', 'css/dialog.css']
 ], //模塊數(shù)組
 });

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

js模塊加載方式淺析

js模塊加載方式淺析:簡介: 前端模塊化開發(fā)日漸鼎盛,如何將零散的插件或者是普通的js腳本文件統(tǒng)一管理及引用,是眾多開發(fā)者共同的目標。本人是從事.net開發(fā)的,最近對前端的一些東西特別的感興趣,也會嘗試的夾雜一點自己的想法,寫一些小東西。東西不牛逼,但是感覺用起來還是
推薦度:
標簽: 加載 方法 js
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top