javascript - 在正文中加载脚本的顺序并使用 jquery ready

标签 javascript backbone.js browser requirejs

我在 body 标签中有一个脚本。问题是有些代码在完成之前就被加载了,即使它在文档就绪 block 中也是如此。 ready block 中的代码不应该等待 script 标签中的代码完成吗?或者它只是推迟到呈现脚本标签但不执行?

<html>
<head>
  <script data-main="script.js" src="/assets/js/require.js"></script>
</head>
<body>
  <script type="text/javascript">
    var foo = ${fromServer};

  </script>
</body>
</html>

script.js:我希望这会等到脚本完成...

$(function() {
  // access script var from here, not set yet hmmmm
});

我很想知道这里发生了什么......

更新:

现在好了,这是来自页面的变量

  require.config({
        baseUrl: '/assets/js/app',
        shim: {
            d3: {
                exports: 'd3'
            },
            underscore: {
                exports: '_',
            },
            backbone: {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            uidate: {
                deps: ['jquery']
            }
        },
        paths: {
            d3: '../lib/d3.v3',
            jquery: '../lib/jquery-2.0.3.min',
            underscore: '../lib/underscore',
            backbone: '../lib/backbone'

        }
    });

require([...], function(...) {
  //console.log here and foo is set and good to go
  var myCollection = new MyCollection(foo);

在我的收藏中:

// define(.... {
// var coll = Backbone.Collection.extend({

initialize: function() {
  console.log(this);
}

看着我看到的控制台:

 {length: 0, models: Array[0], _byId: Object, constructor: function, model: function…}

当我在 Chrome 控制台中展开对象时,实际上那里有模型......很奇怪。如果我在 init 和 console.log(this) 中再次执行 setTimeout,则模型已设置。初始化模型的延迟从何而来?

我也试过只加载一个数组,比如:

var someColl = new MyCollection([ { ... }, { ... } ]);

同样的问题。

更新:我试图缩小问题的范围,console.log 在这里打印一个空数组

var testing = [{x:1,d:2},{x:3,d:8},{x:3,d:98}];
var myCollection = Backbone.Collection.extend({
    initialize: function() {
        console.log(JSON.stringify(this));
    }
});
var x = new myCollection(testing);

最佳答案

jQuery ready 在调用其回调之前等待 DOM 完成加载。这将大致相当于 </body> 时的情况。标记被解析并且它前面的所有内容(包括任何脚本)都已经被解析。未标记为 defer 的脚本或 async将已经运行。

您的问题并不完全清楚您的问题到底是什么,但是 jQuery 就绪 block 中的代码将在 <head> 中的其他脚本之后执行。或 <body>被执行。

如果您使用 require.js 库异步加载脚本,那么这些脚本可能会在文档准备好之前或之后加载,具体取决于文档加载中发生的其他情况。如果您需要协调异步加载这些脚本的时间,那么您将必须使用 require.js 库中的功能来了解这些脚本何时加载或在这些脚本中使用 document.ready 以确保它们等待用于解析文档的其余部分。

关于javascript - 在正文中加载脚本的顺序并使用 jquery ready,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21949620/

相关文章:

javascript - 如何使用 javascript/jquery 仅显示具有特定类的 li?

ruby-on-rails - restful api (rails), mvc javascript app (ember or backbone) and token based authentication

javascript - Backbone.js - 防止 PUT/POST on model.validate 失败

javascript - 有没有人有使用 Backbone.js 和 Pylons/Pyramid 的经验?有什么 sample 要看吗?

jquery - JavaScript 回调的工作原理

javascript - 使用 jquery 从选定的单选按钮获取文本值

javascript - 防止字符串中出现特殊字符

javascript - 如何更改 material-ui 中 IconButton 的设计?

browser - 如何在 HTTP 中对 Content-Disposition header 的文件名参数进行编码?

vb.net - VB.NET-从“表单加载”事件导航时,Web浏览器卡住