直到现在我还没有使用 Phonegap 推荐的这个 index.js :
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
我应该把我自己的 js 函数和事件(我所有的 js 文件)放到这个文件中，从这个文件中，另一个文件中？
相对于调用 js 文件的位置，我应该在哪里调用那些 js 文件以及我应该在哪里调用 app.initialize？
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/boardDims.js"></script>
<script src="js/functions.js"></script>
<!-- <script src="cordova.js"></script>-->
</head>
<body>
现在我正在使用远程服务进行编译:$ phonegap remote run android
如果有一个使用 Phonegap + JQM 的应用程序的默认模板，对于像我这样的初学者来说非常有用;-)
最佳答案
index.js 是作为示例包含在内的，您实际上并不需要使用它。它基本上向您展示了如何使用 ondeviceready .您需要使用 ondeviceready当你使用插件时，因为他们的大部分调用只能在 ondeviceready 之后可用已被解雇。因此，您将对监听器上的插件的调用连接到 ondeviceready .例如，我是这样做的:
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", MYAPP.events.onDeviceReady, false);
}
</script>
</head>
<body onload="onLoad();">
在 MYAPP.events.onDeviceReady 中，我调用了地理定位、相机或我正在使用的任何插件。
顺便说一句，在您的示例中需要注意两件重要的事情:您需要包括 cordova.js在你可以访问之前 ondeviceready或使用任何插件，另外你还包括 index.js两次。也许你复制了 <script src="js/index.js"></script>编辑它并包含 js/cordova.js忘记更改名称/路径？
除此之外，我所做的是将应用程序的 JS 和外部库分隔在两个单独的目录中以便更好地组织，例如“lib”和“js”，因此您将包括“js/functions.js”和“lib”/jquery.js”。
为了获得更好的性能，我在 body 标签的底部同时包含了库和自定义 JS 文件:Where should I put <script> tags in HTML markup?
我根据它们的用途/内容将文件命名为“js”(应用程序的自定义 JS 文件)，例如:events.js、models.js、settings.js、util.js，...你可以在上面的代码片段中看到我在应用程序的大写名称下“命名空间”了我的自定义 JS 对象，因此 util.js 中的所有内容都将被称为:MYAPP.util.formatDate() .
关于jquery-mobile - phonegap + jquery mobile，良好实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19740280/