0

我如何才能为 Phonegap 中的多个 HTML 页面仅归档一次加载 JS 库。

我有这个项目：

./index.html

./FoderA/index.html

./FoderB/index.html
....

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

提前致谢。

4

3 回答 3

1

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

jQuery Mobile和 Dojo等其他 JavaScript 框架也允许您执行此操作，但您需要加载这些框架。

于 2013-01-08T15:31:45.643 回答
1

你可以试试这个框架。以下是我的一个项目中的示例 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 中。其他页面不需要包含<head>或<body>，只需要从<div>开始

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>
于 2013-01-08T15:45:34.167 回答
0

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

于 2013-04-08T20:54:04.950 回答