javascript控件开发之动态加载(1)

最新推荐文章于 2024-09-11 15:33:18 发布

iteye_20428

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量310

点赞数

分类专栏：控件开发文章标签： javascript 框架控件开发 ViewUI

本文链接：https://blog.csdn.net/iteye_20428/article/details/82575431

版权

控件开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

做了几年开发，平时看着会做框架的高手，那个羡慕妒忌恨呀，有闲的时候，总会想，要是自己能做一个框架该多好呀，经过一段时间的积累，有了一点点进步，于是决定亲手开发一个框架，本系列主要做一些初步的框架，希望自己学习，希望也能帮到跟我一样有梦想的人。
所谓框架，就是基于它，能很方便的进行业务开发，减少技术上的时间花费，通过了解那么多框架后，你是否也有想从0开始，自己开发一个呢！如果有，那就一起来吧，也许会有很大乐趣哦。
此次要做的框架，是前端javascript框架，面向的是，大型应用前端界面，比如数据编辑，数据查询，数据管理等用到的前端控件及功能，有两个主要的目的，第一，简化web页面上的布局设计，第二，把应用尽可能的控件化，框架的开发思路是先做框架的布局，再开发具体的控件，接着扩展页面的控制，
现在开始我们的控件框架之旅。
先创建如下目录结构。
+--demo
+--script
+--common
+--init.js
+--css
+--web
+--test.html
以demo做为我们的框架的根目录,
script做为所有js的根目录，
script目录下的common目录作为框架基础目录，框架用到的文件都放置于此，css文件用于存放样式文件，
web则是页面目录，
整个框架中，需要一个起始js文件，这个文件将是我们框架的入口，起到初始化，加载，运行的作用，我们把文件命名为init.js并放在common目录下，
在init.js文件里定义第一个对象scriptUtil;该对象有三个属性，
1. js脚本加载列表，
2. css文件加载列表，
3. 控件对象列表，
如下：


function scriptUtil() {
    //加载导入的js列表
    this.scriptList = {};
    //加载的css列表
    this.cssList = {};
    //创建的控件类
    this.com = {};
};

接着，编写一个页面test.html用于测试，并且引入init.js文件，放到web目录下


<!DOCTYPE html>
  <head><title>test</title>
    <script src="../script/common/init.js" type="text/javascript"></script>
  </head>  
  <body>
  </body>
</html>

为了能够清楚加载的情况，给对象scriptUtil添加一个日志输出的函数和一个加载成功的判断函数；


scriptUtil.prototype = {
    /**
     * 日志输出.
     * 参数 src 字符串
     */
    LogInfo : function(src) {
        if(window.console.info) {
            window.console.info(src);
        }
    },
    /**
     * 是否加载判断.
     * 参数 src 加载的文件名
     */
    isImport : function(src) {
        return (typeof this.scriptList[src] != "undefined" 
             || typeof this.cssList[src] != "undefined");
    }//方法之间用逗号隔开
}

再添加一个文件类型判断函数，目前仅包括css, js两种文件


scriptUtil.prototype = {
    //之前添加过的方法
    /**
     * 文件类型. 
     * 参数 scr 文件路径
     */
    scrType : function(scr) {
        var scrAry = scr.split(".");
            if (scrAry.length > 1) {
                return scrAry[scrAry.length - 1].toUpperCase();
            } else {
                return "";
            }
    } //方法之间用逗号隔开,
}

我们用的是普通的目录结构，因此需要处理相对路径的问题，添加一个获取根目录路径的函数（dome目录）,
这里用到了算法，首先，我们有两个路径，一个是html文件的路径即test.html的路径，另一个是js初始化文件的路径，即init.js的路径,通过这两个文件的路径，用来分析出整个工程的相对路径，
1. 先判断是不是全路径，既http开头，或f:开头，
2. 如果是，就从开始循环找到第一个不相同的目录，
3. 通过html路径的相对深度，找到js文件，需要回退文件夹（../）的层次
4. 拼成完成的js相对路径。


scriptUtil.prototype = {
    //之前添加过的方法
    getPath : function() {
                //获取默认的init.js文件路径
		var srcUrl = document.getElementsByTagName("script")[0].src;
		var re = /[\/\\]+/g;
                //判断是否是硬盘，或服务器上的URL
		if (/([a-zA-Z]:)|([hH][tT][tT][pP]:\/\/)/.test(srcUrl)) {
                        //获取html的URL
			var docUrl = document.URL;
                        //拆分成数组
			var srcAry = srcUrl.split(re);
			var docAry = docUrl.split(re);
			var indexs = 0;
                        //循环找到第一个不相同的目录
			for ( var i = 0, 
			    len = srcAry.length < docAry.length ? srcAry.length
					: docAry.length; 
			        i < len; i++) {
				if (srcAry[i] !== docAry[i]) {
					indexs = i;
					break;
				}
			}
                        //test.html目录回寻到根目录
			var path = "";
			for ( var i = indexs, len = docAry.length; i < len - 1; i++) {
				path = path + "../";
			}
                        //完善js的目录
			for ( var i = indexs, len = srcAry.length; i < len - 1; i++) {
				path = path + srcAry[i] + "/";
			}
			return path;
		} else {
                        //如果是相对目录，则直接使用。
			var srcAry = srcUrl.split(re);
			var path = "";
			for ( var i = 0, len = srcAry.length; i < len - 1; i++) {
				path = path + srcAry[i] + "/";
			}
			return path;
		}
	},
}

通过上面的路径函数，可以得到要加载的路径，接下来要做的就是把文件加载进来，即import函数，函数需要三个参数，第一个参数，可以传一个或多个文件名，第二个参数，是回调函数，第三个是相对路径，因为路径不一定需要，因此放在第三个参数上，这里的实现算法是，
1. 拿第一个文件，判断文件类型
2. 生成对应的script或link对象，绑定onload和onerror事件
3. 添加到<head>标签上，
4. 在绑定的事件激活后，记录加载的文件，递归下一次调用，
5. 如果加载完了，调用回调函数


scriptUtil.prototype = {
//之前添加过的方法, 用逗号隔开
    /**
     * 加载文件，
     * 参数 src 加载的文件，字符串或数组，
     * 参数 callBack 回调函数，
     * 参数 sPath 指定路径 默认为空
     */
    Import : function(src, callBack, sPath) {
        //路径
        if(typeof sPath == "undefined") sPath = "";
        //转换成数组
        var src = src || [];
        if(typeof src == "string") {
            src = [src];
        }
        //获取head元素
        var _doc = document.getElementsByTagName("head")[0];
        var importObj = {};
        if(src.length > 0) {
            var curSrc = sPath + src[0];
            //删除数组内第一个文件名
            src.splice(0, 1);
            var srctype = this.scrType(curSrc);
            if(typeof this.scriptList[curSrc] === "undefined" 
                && typeof this.cssList[curSrc] === "undefined") {
                        //如果没有加载过
		    	if ("JS" == srctype) {                        
                   	//加载js文件
				    importObj = document.createElement("script");
				    importObj.type = "text/javascript";
				    importObj.language = "javascript";
				    importObj.src = curSrc;                    
                    this.scriptList[curSrc] = 0;
		   	    } else if ("CSS" == srctype) {                        
                    //加载样式文件
				    importObj = document.createElement("link");
				    importObj.rel = "stylesheet";
				    importObj.type = "text/css";
				    importObj.href = curSrc;                    
                    this.cssList[curSrc] = 0;
                }
                //保存相关对象到importObj中
                importObj.csrc = curSrc;  
                importObj.cstype = srctype;
                importObj.self = this;
                //加载成功事件
		   	    importObj.onload = importObj.onreadystatechange = function() {
                    var csrc = this.csrc;                        
				    if(!this.readyState||this.readyState=='loaded'
                        ||this.readyState=='complete'){                                
                        var cst = this.cstype;
                        var Self = this.self;       
                        //打上加载成功标志                         	
					    if ("JS" == cst) {
                            Self.scriptList[csrc] = "sucess"; 
                            Self.LogInfo("import script " + csrc + " sucess.");
                        } else if  ("CSS" == cst) {
                            Self.cssList[csrc] = "sucess";
                            Self.LogInfo("import css " + csrc + " sucess.");
                        }
                        this.onload=this.onreadystatechange=null;
                        //继续加载后续文件，
                        if(src.length > 0) {
                            Self.Import(src, callBack, sPath);
                        } else if(typeof callBack == "function") {
                            callBack(true);
                        }
                        this.self = null;
                    }
		    	}
                //导入错误的事件
		    	importObj.onerror = function() {
                    var Self = this.self;
                    var csrc = this.csrc; 
                    var cst = this.cstype;		
                    //打上加载成功标志 						
                    if ("JS" == cst) {
                        Self.scriptList[csrc] = "error"; 
                        Self.LogInfo("import script " + csrc + " error.");                                         
                    } else if  ("CSS" == cst) {
                        Self.cssList[csrc] = "error";
                        Self.LogInfo("import css " + csrc + " error.");
                    }
                    //清除加载失败的文件
                    _doc.removeChild(importObj);
                    this.onerror = null;
                    //继续加载后续文件，
                    if(src.length > 0) {
                        Self.Import(src, callBack, sPath);
                    } else if(typeof callBack == "function") {
                        //回调
                        callBack(true);
                    }
                    this.self = null;
		   	    }
                //添加加载文件到head中
                _doc.appendChild(importObj);
		    } else {
                if(src.length > 0) {
                    this.Import(src, callBack, sPath);
                } else if(typeof callBack == "function") {
                    callBack(true);
                }
            }
        } else if(typeof callBack == "function") {
            callBack(true);
        }               
	}// Import
}