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

发布时间:2020-10-03编辑:脚本学堂
本文介绍了javascript控件开发教程中有关动态加载的方法,本节是javascript控件开发之动态加载的第二部分,有需要的朋友参考下。

上一篇在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控件开发之继承关系