jsapi 中的 load 技术

作者:vkvi 来源:千一网络(原创) 日期:2008-6-27

Google 的 jsapi 有个 load 功能,就是我们只需要引入一个 loader.js,然后再执行 load 函数,就可以直接使用相应的 application 的 api,这跟以前是每使用一个 api 就需要使用 script 引入一个 js 文件相比,不仅方便了许多,而很利于部署和维护。

下面说说类似的实现方式,本例有四个文件:一个 loader.js,两个具体的 application 的 api 文件,一个应用页面。

loader.js

function Cftea()
{
}
 
function Cftea_load(applicationName, applicationVersion)
{
    if (applicationName == "app1")
    {
        if (applicationVersion == "1.0")
        {
            Cftea_loadScript("app1.js");
        }
    }
    else if (applicationName == "app2")
    {
        if (applicationVersion == "1.0")
        {
            Cftea_loadScript("app2.js");
        }
    }
}
 
function Cftea_loadScript(url)
{
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", url);
   
    document.body.appendChild(script);
}
 
Cftea.prototype.load = Cftea_load;
Cftea.prototype.onApp1LoadComplelte = null;
Cftea.prototype.onApp2LoadComplelte = null;
 
var cftea = new Cftea();

app1.js

function Cftea_App1()
{
    this.name = "app1";
}
 
Cftea.prototype.app1 = new Cftea_App1(); //为 Cftea 增加成员
cftea.onApp1LoadComplelte(); //触发读取完毕事件

app2.js

function Cftea_App2()
{
    this.name = "app2";
}
 
Cftea.prototype.app2 = new Cftea_App2(); //为 Cftea 增加成员
cftea.onApp2LoadComplelte(); //触发读取完毕事件

应用页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>api</title>
</head>
<body>
<div style="height:50px;"></div>
<div id="guestbook"></div>
 
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
<!--
cftea.onApp1LoadComplelte = function ()
{
    alert("app1 读取完毕,可以使用 cftea.app1 对象。\r\ncftea.app1.name=" + cftea.app1.name);
}
 
cftea.onApp2LoadComplelte = function ()
{
    alert("app2 读取完毕,可以使用 cftea.app2 对象。\r\ncftea.app2.name=" + cftea.app2.name);
}
 
cftea.load("app1", "1.0");
cftea.load("app2", "1.0");
-->
</script>
 
</body>
</html>

可以看到,在读取了相应的 application 的 api 之后,全局对象 cftea 就自动增加相应的成员,可以直接使用该对象。

你前面那位网友看了:一起学 Microsoft AJAX Library-组件、行为、控件

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他