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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com