个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:34:07 24 4
gpt4 key购买 nike

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

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

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

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

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

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

  • 来自单页 .html --> 多页 .html
  • 来自多页 .html --> 单页 .html
  • 来自单页 .html --> 单页 .html
  • 来自多页 .html --> 多页 .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/

关于javascript - 使用phonegap在jquery mobile中链接页面/加载javascript的最佳实践是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28792995/

24 4 0
文章推荐： c++ - 动态创建变量 C++/cli .NET
文章推荐： javascript - 覆盖导航不覆盖页面上的所有元素
文章推荐： c++ - 多尺度检测循环在 OpenCV 的 HOG 检测中是如何工作的？
文章推荐： html - 固定标题向标题添加空间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com