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

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

本文关键字：javascript 加载 最佳 是什么 phonegap jquery-mobile 链接 使用      更新时间：2023-09-26

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

  • 有人说要包含所有相同的头，因为.js不会通过ajax类型的页面加载来加载
  • 有些人谈论app.initialize（）；有些人谈论"pageinit"。有些人建议使用onload（）；在body标签中。有人说pageshow:function（）｛｝
  • 一些谈论。Deferred（）/$.when（deviceReadyDeferred，jqmReadyDeferre）.then（doWhenBothFrameworksLoaded）；初始化方法太多了

包含JS文件的最佳实践是什么

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

  • 我想，如果一个锚点导致多页html，那么使用datarel='external'是一个很好的做法。但也有人说data-domcache="true"。有人说$.mobile.changePage（）

链接页面的最佳实践是什么

  • 从单页.html-->多页.html
  • 从多页.html-->单页.html
  • 来自singlepaged.html-->singlepaged.html
  • 来自multipaged.html-->multipaged.html

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

你可以试试我的方法。

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/

加载页面时不重要。因为你所有的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>
相关文章：