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

最新推荐文章于 2018-06-27 15:47:54 发布

iteye_20428

最新推荐文章于 2018-06-27 15:47:54 发布

阅读量105

点赞数

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

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

版权

控件开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上一篇在init.js文件内编写了加载对象，在这基础上，在init.js文件内再定义一个全局变量，及一个起始函数（startup），在body加载完成后执行，
另外要再准备一个可供加载js的文件，在common目录下新增加一个文件，staticScript.js,代码中只有一个数组对象，为了验证加载的情况，我们再添加一个简单的样式com.comStyle.css文件，
文件目录如下
+--demo
+--script
+--common
+--init.js
+--staticScript.js
+--css
+--com.comStyle.css
+--web
+--test.html
init.js新增加的代码如下，startUp这段代码的思路是，先把脚本列表文件加载进来即staticScript.js文件，然后跟据文件内的文件数组列表，按顺序加载到页面中，最后调用onShow事件函数，
startUp是我们整个系统框架的启动函数，类似操作系统的bootStart,我们加一段等待body加载完成后再调用startUp函数的代码，用setInterval来定时判断调用。


//win object
var thisWindow = new scriptUtil();
function startUp() {
        //获取相对路径
	var initsrc = thisWindow.getPath();
        //加载文件列表js文件。
	thisWindow.Import(["staticScript.js"], function(state) {
		if (state && typeof staticScript != "undefined") {
			var len = staticScript.length;          
                        //加载列表中的文件。                      
			thisWindow.Import(staticScript, function(state) {               
                        //处理页面显示事件。
				    if (typeof thisWindow.onShow == "function") {
					    thisWindow.onShow();
				    }                
			}, initsrc);
		}
	}, initsrc);
};
//等待body加载后，执行startUp
var sartHandel = setInterval(function() {
    if(document.getElementsByTagName("body") != null) {
        clearInterval(sartHandel)
        startUp();        
    } else {
        thisWindow.LogInfo("waitting loading...");
    }
},20);

脚本列表文件,此处的相对路径，是以init.js所在的目录(common)为起点，往上一个文件夹（script），再进入css文件夹，
staticScript.js


staticScript = [
    "../css/com.comStyle.css"
];

样式文件如下


.winStyle {
    border:1px solid #C3D2E6;
    font-size:12px;
    width:10px;
    height:10px;
}

到此，我们可以先进行一下测试，
直接用浏览器打开test.html 然后查看控制台，就会发现输出如下：


"import script ../script/common/staticScript.js sucess."
"import css ../script/common/../css/com.comStyle.css sucess."

再通过html查看器查看到的html源码，已变成如下代码


<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="../script/common/init.js"></script>
        <script type="text/javascript" src="../script/common/staticScript.js"></script>
        <link rel="stylesheet" type="text/css" href="../script/common/../css/com.comStyle.css"></link>
    </head>
    <body>
    </body>
</html>

与原始的html代码，是不是区别很大呀，
原始html代码如下：


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

到了这里，你是否也有种兴奋的感觉呀？是否也给了你无限的遐想空间呢？
附件是到目前为止，所写的脚本包，可下载测试。
请关注下一篇，控件开发之继承关系

iteye_20428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript控件开发之动态加载(2)

上一篇在init.js文件内编写了加载对象，在这基础上，在init.js文件内再定义一个全局变量，及一个起始函数（startup），在body加载完成后执行，另外要再准备一个可供加载js的文件，在common目录下新增加一个文件，staticScript.js,代码中只有一个数组对象，为了验证加载的情况，我们再添加一个简单的样式com.comStyle.css文件，文件...
复制链接

扫一扫