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 ファイルへの呼び出しの位置に関連して、これらの 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 を使用したアプリのデフォルト テンプレートがあると非常に便利です ;-)

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 内で、地理位置情報、カメラ、または使用しているプラ​​グインを呼び出します。

ところで、あなたの例で注目すべき2つの重要なこと：プラグインにcordova.jsアクセスしondevicereadyたり操作したりする前に含める必要があります。さらに、index.js2回含めています。おそらく、<script src="js/index.js"></script>編集してインクルードするためにを複製しjs/cordova.js、名前/パスを変更するのを忘れていませんか?

それとは別に、アプリの JS と外部ライブラリを "lib" と "js" のように 2 つの別のディレクトリに分けて整理し、"js/functions.js" と "lib/jquery. js".

libs ファイルとカスタム JS ファイルの両方を body タグの最後に含めて、パフォーマンスをわずかに向上させます: HTML マークアップの <script> タグはどこに置くべきですか

そして、「js」(アプリのカスタム JS ファイル) の下にあるファイルに、その目的/コンテンツに応じて名前を付けます。たとえば、events.js、models.js、settings.js、util.js などです。上記のスニペットでは、アプリの大文字で始まる名前の下にカスタム JS オブジェクトを「名前空間化」したため、util.js 内のすべてが次のように呼び出されますMYAPP.util.formatDate()。

于 2013-11-02T15:59:57.770 に答える