Question

我有这个非常简单的html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>

    <script src="https://code.jquery.com/jquery.js"></script>

    <script src="js/app.js"></script>
    <script src="js/model/dinnerModel.js"></script>
    <script src="js/view/exampleView.js"></script>
  </body>
</html>

底部包含的javascript文件是：

app.js：

$(function() {
    var model = new DinnerModel();

    var exampleView = new ExampleView($("#exampleView"));

});

dinnermodel.js：

var DinnerModel = function(){
    // some js stuff
}

exampleView.js：

var ExampleView = function () {
     // more js stuff
}

这对我来说运行正常，我的问题是：为什么？当app.js包含在其脚本标记中时，Dinnermodel.js和exampleView.js显然尚未加载，所以我应该在app.js中收到错误，说明没有声明DinnerModel，对吗？

Answer 1

因为$(function() {})等待直到dom准备就绪，这意味着其他脚本在其内部的代码被执行之前已经加载了

Answer 2

很棒的问题。

它的工作原理是因为您正在等待文档准备就绪，请参阅此网站。 https://learn.jquery.com/using-jquery-core/document-ready/

执行$( document ).ready(function() {或$(function() {完全相同。

当页面执行$()内的功能时，整个内容已加载并可供使用。

如果来自其他文件的引用变量尚未加载，javascript怎么也不会崩溃

2 个答案: