Question

如何为Phonegap中的多个HTML页面仅存档一次JS库的存档。

我有这个项目：

./index.html

./FoderA/index.html

./FoderB/index.html
....

并且在每个index.html中我使用cordova2.2.0.js，但性能会有所降低。我可以加载一次JS库（cordova，jquerymobile，....），例如当./index.html应用程序启动时吗？

提前致谢。

Answer 1

如果您导航到新页面，则需要重新加载所有JavaScript，因此避免这种情况的方法不是导航到新页面。您可以使用Ajax完成此购买以加载第二页并将其添加到您的DOM。看看这个good write up，其中Bryce推出了自己的loadPage功能。

其他JavaScript框架（如jQuery Mobile和Dojo）允许您执行此操作以及需要加载这些框架的albiet。

Answer 2

您可以尝试this framework。以下是我的一个项目的示例index.html：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Maze</title>
<script src="Scripts/cordova/cordova-2.2.0.js" type="text/javascript"></script>
<script src="Scripts/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="Scripts/novas/nova.all.js" type="text/javascript"></script>
<script src="Scripts/maze/maze.data.js" type="text/javascript"></script>

</head>

<body>
<div id="themes">
    <link href="themes/nova.ui.core.css" rel="stylesheet" />
    <link href="themes/nova.ui.content.css" rel="stylesheet" />
</div>
<div id="body">
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            nova.application.start("home.html");
        });
    </script>
</div>
</body>
</html>

实际上，所有其他页面都将通过ajax调用加载到div＃body中。其他页面不需要包含＆lt; head＆gt;或＆lt; body＆gt;，仅从＆lt; div＆gt;

开始

home.html：

<style>
#content {
    width: 100%;
    min-height: 100%;
    position: relative;
}
.content-w1 {
    padding: 15px;
    padding-bottom: 20px;
}
#links {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    line-height: 20px;
}
.content-w1 h1 {
    background-color: #FFFCE5;
    text-align: center;
    margin: 0px;
    padding: 10px 0px;
    color: #30C5F2;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 5px;
}

</style>

<div id="content">
<div class="content-w1">
    <div class="logo-home"></div>
    <ul class="color-blocks">
        <li>Never</li>
        <li>Lose</li>
        <li>Your</li>
        <li>Hope</li>
        <li>.</li>
    </ul>
    <ul class="menu">
        <li id="linkLevels">Choose Level</li>
        <li id="linkHelp">Help</li>
        <li id="linkQuickStart">
            Quick Start
            <small id="quickstartLevel">Level 1</small>
        </li>
    </ul>
    <div class="challenge">
    </div>
</div>
<div id="links">
    &copy;2012, NovaSoftware.com, 
    <i>v1.0</i>
</div>
</div>
<script language="javascript" type="text/javascript">


nova.application.currentPage.onLoaded(function () {
    function init() {
        if (window.DbService == undefined) {
            return;
        }

        var service = new DbService();
        var quickStart = 1;
        service.init(function () {
            service.getQuickStartLevel(function (level) {
                $("#quickstartLevel").html("Level " + level);
                quickStart = level;
            });
        });

        nova.touch.bindClick("#linkQuickStart", function () {
            alert("linkQuickStart");
            var page = new nova.Page("pages/game.html");
            page.level = quickStart;
            nova.application.gotoPage(page);
        });
        nova.touch.bindClick("#linkLevels", function () {
            nova.application.gotoPage("pages/levels.html");
        });
        //nova.application.gotoPage("pages/levels.html");
    }

    init();
});


</script>

Answer 3

您应该使用Ajax将所有js库和css加载到DOM

如何在Phonegap中只加载一次JS库？

3 个答案: