上一篇在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>
到了这里,你是否也有种兴奋的感觉呀?是否也给了你无限的遐想空间呢?
附件是到目前为止,所写的脚本包,可下载测试。
请关注下一篇,控件开发之继承关系