Question

我正在尝试将一些Javascript代码放在.js文件中，以便我可以从多个HTML页面调用它。问题是，如果我将它放在HTML页面的脚本中，我的Javascript代码可以正常工作，但是当放在外部.js文件中时，它根本不起作用。我已经看了好几次这些问题，但仍然找不到错误。

以下是HTML页面：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/global.css" />
    <link rel="stylesheet" type="text/css" href="css/contacts.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src ="js/contactsModule.js"></script>
    <title>Hall of Heroes</title>
</head>
<body onload = "contactsModule.getContacts();">



    <!-- Global Header Starts Here -->
    <div class="header">
        <div class="cancel">
            <img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home -->
        </div>
        <h1>My Contacts</h1>
    </div>

    <div class="wrapper">
        <h3>A</h3> <!-- letter header goes here -->

        <!-- Begin Contact Unit -->
        <div class="feed">

        </div>
        <!-- End Contact Unit -->

    </div>

   </body>

   </html>

这是.js文件：

var contactsModule = (function($){

        function getContacts()
        {
            dbContacts();
        }

        function displayContacts(contactArray){
            window.alert('displayContacts now running!');
            var jsonObject = $.parseJSON(contactArray);
            jsonObject.forEach(function (dat) {
                //Begin Contact Unit
                $('.feed')
                    .append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\
                    </div><div class="feed-text"><p><span class="name_highlight">\
                    ' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
                //End Contact Unit
            });
        }
        function dbContacts() {
            var avatarUrl;
            var firstName;
            var lastName;

            $.ajax({
                type: "GET",
                url: "http://www.hallofheroesapp.com/php/contacts.php",
                data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName},
                success: function (response) {
                    window.alert('AJAX ran successfully!');
                    displayContacts(response);
                },
                error: function(response){
                    alert("Error:" + response);
                }
            });
        }
 }(jQuery));

感谢您的帮助！

Answer 1

您没有从IIFE退回任何东西。 contactsModule将不包含任何内容，即相等undefined。除了全局定义的函数之外，仅定义函数不会使这些函数成为某个对象的一部分。您必须分配它们，或将它们定义为对象文字的一部分

您的代码应该是

var contactsModule = (function($){
    return {
        getContacts: function() {
             /* code */
        },
        displayContacts: function(contactArray){
             /* code */
        }
        dbContacts function() {
             /* code */
        }
    };
 }(jQuery));

Answer 2

如何使用

$(document).ready(function(){
     ///// your code here...

});

Answer 3

......改变......

<body onload = "contactsModule.getContacts();">

...到......

<body>

...并使用jquery ...

添加事件处理程序

(function($){

        function getContacts()
        {
            dbContacts();
        }

        /* ... etc ... */

        // use jquery's onready handler
        $(getContacts);

 }(jQuery));

Answer 4

有同样的问题。当你研究谷歌时很容易。您的Js代码在DOM加载之前加载。反过来应该是另一种方式。所以你必须使用这个

$(document).ready(function(){
  //only jQuery is recommended, global JavaScript functions outside!
});

还有JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  //global function outside! 
});

只有这样，您才能确保在jquery找到元素之前加载了DOM。

Javascript函数在HTML页面内部工作，但不能从外部.js文件工作

4 个答案: