3

直到现在我还没有使用 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 文件，我应该在哪里调用 app.initialize，与调用 js 文件的位置有关？

这是我的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 的应用程序的默认模板会非常有用；-)

4

1 回答 1

2

该 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”。 js”。

我将库和自定义 JS 文件都包含在 body 标记的底部以获得更好的性能：我应该将 <script> 标记放在 HTML 标记中的什么位置？

我根据它们的用途/内容命名“js”（应用程序的自定义 JS 文件）下的文件，例如：events.js、models.js、settings.js、util.js，......你可以在上面的代码片段我已经在应用程序的大写名称下“命名”了我的自定义 JS 对象，因此 util.js 中的所有内容都将被称为：MYAPP.util.formatDate().

于 2013-11-02T15:59:57.770 回答