javascript控件开发之动态加载(2)
上一篇在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来定时判断调用。
脚本列表文件,此处的相对路径，是以init.js所在的目录(common)为起点，往上一个文件夹（script），再进入css文件夹，
staticScript.js
样式文件如下
到此，我们可以先进行一下测试，
直接用浏览器打开test.html 然后查看控制台，就会发现输出如下：
再通过html查看器查看到的html源码，已变成如下代码
与原始的html代码，是不是区别很大呀，
原始html代码如下：
到了这里，你是否也有种兴奋的感觉呀？是否也给了你无限的遐想空间呢？
附件是到目前为止，所写的脚本包，可下载测试。
请关注下一篇，控件开发之继承关系
另外要再准备一个可供加载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>
到了这里，你是否也有种兴奋的感觉呀？是否也给了你无限的遐想空间呢？
附件是到目前为止，所写的脚本包，可下载测试。
请关注下一篇，控件开发之继承关系