Question

直到现在我还没有使用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创建应用程序的默认模板真的很有用; - ）

Answer 1

包含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中，我会调用地理定位，相机或我正在使用的任何插件。

BTW，您需要注意的两个重要事项示例：您需要先包含cordova.js才能访问ondeviceready或使用任何插件，此外还要包括index.js两次。也许您复制<script src="js/index.js"></script>进行编辑并包含js/cordova.js并忘记更改名称/路径？

除此之外，我所做的是将应用程序的JS和外部库分离到两个单独的目录中以便更好地组织，比如“lib”和“js”，所以你要包含“js / functions.js”和“lib” /jquery.js”。

我在body标签的底部包含libs和自定义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()。

phonegap + jquery mobile，良好做法

1 个答案: