javascript控件开发之动态加载(二)-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20476 次

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新增加的代码如下

//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>

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

1 楼 rex0654335 前天

好牛B 的样子

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>