H5常用的底层方法---加载页面的封装

来源：互联网发布：c语言删除文件内容编辑：程序博客网时间：2024/06/14 12:43

模块化开发可以用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包裹

0 0