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