模塊化開發可以用Ajax把需要的模塊請求過來,并且把模塊對應的js文件加載過來,于是我用面向對象的方法對其進行了封裝
以下是封裝的代碼:
(function(window,undefined){ function commonFn(){ this.loadPage = function(args){ var _container = args.container;//容器 var pageUrl = args.pageUrl;//頁面路徑 var pageScript = args.pageScript;//頁面對應的js文件 var onLoaded = args.onLoaded;//頁面記載完成后回調函數 $.ajax({ url : pageUrl, type : 'GET', dataType : 'html', timeout : 10000, success : function(res){ //加載html頁面 _container.append(res); // 加載js文件 var pageScriptTmp = document.createElement("script"); pageScriptTmp.setAttribute('type','text/javascript'); pageScriptTmp.setAttribute("src", pageScript); var documentHead = document.head; if(documentHead == undefined) { documentHead = document.getElementsByTagName("head")[0]; } documentHead.appendChild(pageScriptTmp); //js腳本加載完成后回調函數 pageScriptTmp.onload = pageScriptTmp.onreadystatechange = function(){ if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ onLoaded(); } } }, error : function(){ alert('頁面出錯了'); } }); } } var commonFnObj = new commonFn(); window.$commonObj = commonFnObj;})(window)以下是使用說明
$commonObj.loadPage ------ 請求模塊
$commonObj.loadPage({ container ://模塊容器【jquery對象】 pageUrl ://模塊路徑 pageScript ://模塊對應的腳本文件 onLoaded ://模塊加載完成后回調})模塊頁面用div包裹
新聞熱點
疑難解答