使用phonegap在jquery mobile中链接页面/加载javascript的最佳实践是什么？答案

【问题标题】：What is the best practice in linking pages/ loading javascripts in jquery mobile with phonegap?使用phonegap在jquery mobile中链接页面/加载javascript的最佳实践是什么？
【发布时间】：2015-05-01 19:31:22
【问题描述】：

我的 phonegap 项目有多个 html（超过 4 个），其中包含一些单页和多页。当我在页面中移动时，有时 javascript 会中断。也许我链接页面错误......我一直在谷歌搜索......并得到了很多不同的答案。

有人说要包括所有相同的头，因为 .js 不会通过 ajax 类型的页面加载来加载
一些关于app.initialize()的讨论；一些人谈论'pageinit'。一些建议使用 onload();在正文标签中。有人说 pageshow: function(){}。
一些关于 .Deferred()/ $.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded); 的讨论 有很多初始化方法！

包含 JS 文件的最佳做法是什么？

此外，链接页面的方法有很多。

我猜如果锚点导致多页 html，使用 data-rel='external' 是一个很好的做法。但有人说 data-dom-cache="true"。有人说 $.mobile.changePage();

链接页面的最佳做法是什么？

来自单页 .html --> 多页 .html
来自多页 .html --> 单页 .html
来自单页 .html --> 单页 .html
来自多页 .html --> 多页 .html

你能给我一个好的基础教程吗？或其中之一的链接？提前谢谢你。

【问题讨论】：

标签： javascript jquery cordova jquery-mobile hyperlink

【解决方案1】：

你可以试试我的方法。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.css" rel="stylesheet">
    <script src="cordova.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/ratchet.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body onload="init()">

  </body>
</html>

main.js

var pagesHistory = [];
var currentPage = {};
var path = "";

function init(){

    $("body").load(path + "pages/ListPage.html", function(){
        $.getScript(path + "js/ListPage.js", function() {
            if (currentPage.init) {
                currentPage.init();
            }
        });
    });

}

ListPage.js

currentPage = {};

currentPage.init = function(){
    console.log("ListPage :: init");
};

currentPage.loadPage = function(pageIndex){
    console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
    $("body").load(path + "pages/" + pageIndex + ".html");
    $.getScript(path + "js/" + pageIndex +".js", function() {
        if (currentPage.init) {
            currentPage.init();
        }
    });
};

ListPage.html

<script>
    $.getScript(path + "js/ListPage.js");
</script>

<header class="bar bar-nav">
    <button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
    <h1 class="title">ListPage</h1>
</header>

<div class="content">
<div class="content-padded">
    <button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>

如果您需要有关此导航的更多说明，请告诉我。

参考：http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/

【讨论】：

\这样形成页面有什么好处？我目前有 5 个 html 页面。使用 php、socket 等。你会推荐我以这种方式重新创建我的项目吗？我是 phonegap 的新手，我不确定如何形成我的页面导航逻辑。而且 urs 看起来不错
是的，我的朋友。对于 php 部分，您可以创建为 REST API。甚至 1000 个 html 页面都没有问题。
我正在将我的代码应用到您的基本设置中。但没有加载 css。例如： index.html->ListPage.html 有效，但 css 文件不跟随。即使我在 index.html 头中包含所有 .css 链接，在移到 ListPage.html 后，css 也不会应用。你知道为什么吗？
你能更新你的问题吗？我想看看你最新的代码。
是的，顺便感谢您的帮助！ stackoverflow.com/questions/28807740/…

【解决方案2】：

加载页面时并不重要。因为您的所有 html 文件都包含在您的应用程序包中。我使用过如下的 jQuery Mobile；

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/jquery.css">

    <script src="js/dependencies/jquery.js"></script>
    <script src="js/dependencies/jquery.mobile.js"></script>
    <script src="js/dependencies/ejs.js"></script>

</head>

<body>

   <div data-role="page" id="page-homepage" class="my-page" data-theme="b">
       <div data-role="header" class="div-header">
           // some header contents
       </div>
       <div role="main" class="ui-content">
           // some contents
       </div>
   </div>
   .
   .
   <div data-role="page" id="page-login" class="my-page" data-theme="b">
       <div role="main" class="ui-content">
           // login contents
       </div>
   </div>
   .
   .
   <script>

        /* jQuery Mobile pagecontainer change function's options */
        var changePageOptions = {
            transition: 'none',
            changeHash: true,
            reverse: true,
            showLoadMsg: true
        };   

        $("#btn-page-login").on("tap", function() {
            $(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
        });

   </script>

</body>
</html>

【讨论】：