在正文中加载脚本并使用jquery准备好

时间:2014-02-22 04:22:38

标签: javascript backbone.js browser requirejs

我在body标签里面有一个脚本。问题是一些代码在完成之前被加载,即使它在文档就绪块中。 ready块中的代码是否应该等待脚本标记中的代码完成?或者只有在脚本标记呈现但未执行之前它才会延迟?

<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);

在MyCollection中:

// 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);

1 个答案:

答案 0 :(得分:2)

jQuery ready在调用其回调之前等待DOM完成加载。这大致等同于解析</body>标记并且已经解析了它前面的所有内容(包括任何脚本)。未标记为deferasync的脚本已经运行。

从您的问题来看,您的问题究竟是什么并不完全清楚,但jQuery ready块中的代码将在执行<head><body>中的其他脚本后执行。

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