模块化开发可以用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包裹
新闻热点
疑难解答