Question

jQuery具有“就绪”功能：

$(function() {...});

并且cordova文档说要添加一个事件监听器：

document.addEventListener("deviceready", onDeviceReady, false();
function onDeviceReady(){...}

在使用任何引用它们的代码之前，是否需要同时调用这两个库以确保两个库都已加载？

嵌套它们是否有意义，即：

$(function(){
    onDeviceReady(){...}
}

只是想弄清楚这样做的最好方法，也许我正在过度思考

Answer 1

JS文件按顺序加载。所以在你的HTML中只需将你的.js文件放在jQuery和cordova之后，它就不会在加载之前运行。

<script src="jQuery"></script>
<script src="cordova"></script>
<script src="yourScript"></script> <!-- this won't run before both jQ and cordova are loaded -->

对于就绪事件，如果您不想嵌套它们，您可以在所有库都准备就绪时构建自己的事件：

var listener = {
    jquery: false,
    cordova: false,
    fire: function(e) {listener[e] = true; if (listener.jquery && listener.cordova) go();
};
document.addEventListener("deviceready", function(){listener.fire('cordova'), false();
$(document).ready(function(listener.fire('jquery')){});

function go() {
// your code here
}

这将起作用，并且go（）将在所有加载时触发，但是我真的不确定你是否真的需要所有这些并且有一个更简单的方法来做它。

Answer 2

将document.ready放入deviceready：

var onDeviceReady = function (){
    jQuery(document).ready(function (){
        // go!
    });
};

document.addEventListener("deviceready", onDeviceReady, false);

jQuery的ready()是DOMContentLoaded的代理，表示文档已经过解析，可以安全地查询或操作。

jQuery本身（jQuery，$）在库完成执行后立即可用;你不需要做任何特别的事情来等待它。

Answer 3

你可以在设备准备好之后调用你的jquery函数。让我给你一个如何做到这一点的完整例子。首先确保你已经添加了你将要使用的所需的cordova / phonegap插件。在我的情况下，我已经加载了设备插件。

打开一个空白文档，然后在html的head部分添加html骨架，添加以下内容：

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>//include the cordova.js file
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>//include the jquery.min.js file strictly after the cordova.js file
<script type="text/javascript" charset="utf-8">


    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {

        $(document).ready(function(){ //jquery starts here and is inside the device ready function


            //the next few lines are now the calling my plugins
            //#deviceproperties is a paragraph in html that has an id deviceproperties
            //#hideme is a span inside the paragaraph that has the id deviceproperties.inside the span is the statement that is saying 'loading device properties' and will be removed as soon as the script hide() runs

           $('#deviceProperties').prepend("<br>" + device.cordova 
                                 + "<br>" + device.platform
                                 + "<br>" + device.uuid
                                 + "<br>" + device.version
                                  );

            $('#hideme').hide();//hide the loading device properties
        });//lets end jquery`s document.ready

    }//lets end cordova`s device ready

</script>

加载设备属性...

我如何等待Cordova和jQuery加载他们的库？

3 个答案: