使用 phonegap 在 jquery 移动设备中链接页面/加载 javascript 的最佳做法是什么？

Question

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

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

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

此外，link页的方法有很多。

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

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

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

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

Answer 1

加载页面时不重要。因为您的所有 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>

Answer 2

你可以试试我的方法

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/

使用 phonegap 在 jquery 移动设备中链接页面/加载 javascript 的最佳做法是什么？

What is the best practice in linking pages/ loading javascripts in jquery mobile with phonegap?

javascript

jquery

hyperlink

jquery-mobile

cordova