腳本標簽在HTML文檔中的位置- <head> 和 <body> 有不同的行為

Question

我有這段HTML代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Backbone.js Demos</title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
  <script src="app.js"></script>

<script type="x-tmpl" id="list_tmpl">
    <span><%= part1 %><%= part2 %></span>
    <a href="#swappy" class='swap'>[SWAP]</a>
    <span>&nbsp;</span>
    <a href="#del" class='remove'>[DELETE]</a>
</body>
</html>

當腳本標簽在body標簽之間時，我的腳本可以正常工作。 但是，如果我將所有腳本標簽都移到head ，它們將停止工作。 我對為什么感到困惑。 這種行為有什么原因嗎？ 謝謝大家的時間和幫助！

編輯：APP

(function($){

    Backbone.sync = function (method, model, success, error){
        success();
    };

    var Item = Backbone.Model.extend({
        defaults: {
            part1: 'Hello',
            part2: 'World'
        }
    });

    var ItemList = Backbone.Collection.extend({
        model: Item
    });

    var ItemView = Backbone.View.extend({
        tagName: 'li',

        events: {
            'click .swap': 'swap',
            'click .remove': 'remove'
        },

        initialize: function(){
            _.bindAll(this, 'render', 'unrender', 'swap', 'remove');

            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },

        render: function(){
            $(this.el).html(_.template($('#list_tmpl').html(), this.model.toJSON()));
            return this;
        },

        unrender: function(){
            $(this.el).remove();
        },

        swap: function(){
            var swapped = {
                part1: this.model.get('part2'),
                part2: this.model.get('part1')
            };

            this.model.set(swapped);
        },

        remove: function(){
            this.model.destroy();
        }
    });

    var AppView = Backbone.View.extend({
        el: $('body'),

        events: {
            'click #add': 'addItem'
        },

        initialize: function (){
            this.counter = 0;

            _.bindAll(this, 'render', 'addItem', 'appendItem');

            this.collection = new ItemList();
            this.collection.bind('add', this.appendItem);

            this.render();
        },

        render: function(){
            $(this.el).append("<button id='add'>Add Item</button>");
            $(this.el).append("<ul id='todoList'/>");
        },

        addItem: function(){
            this.counter++;
            var item = new Item();
            item.set({
                part2: item.get('part2') + this.counter
            });

            this.collection.add(item);
        },

        appendItem: function(item){
            var itemView = new ItemView({
                model: item
            });

            $('#todoList', this.el).append(itemView.render().el);
        }
    });

    var Tasker = new AppView();
})(jQuery);

Answer 1

解決此問題的最簡單方法是使用以下命令啟動app.js

$(function() {

代替

(function($){

jQuery在DOM可用后執行腳本。 比起您，您可以將腳本放在首位。

Answer 2

當js文件在加載后使用主體時，就會發生此行為，因此必須將它們嵌入主體中。

您可以將jquery，json和下划線文件放在頭部。

其他文件，必須檢查它們在加載時是否不調用主體。

Answer 3

您將不得不使用頁面中元素的屬性在app.js的末尾添加app.js。

使用此標記。 始終關閉腳本標簽。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Backbone.js Demos</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</head>
<body>
    <script type="x-tmpl" id="list_tmpl">
    <span><%= part1 %><%= part2 %></span>
    <a href="#swappy" class='swap'>[SWAP]</a>
    <span>&nbsp;</span>
    <a href="#del" class='remove'>[DELETE]</a>
    </script>
    <script src="app.js"></script>
</body>
</html>

腳本標簽在HTML文檔中的位置- <head> 和 <body> 有不同的行為

問題描述

3 個解決方案

解決方案1
4 2012-12-10 07:49:51

解決方案2
3 已采納 2012-09-11 07:21:26

解決方案3
1 2012-09-11 07:35:16

腳本標簽在HTML文檔中的位置- <head> 和 <body> 有不同的行為

問題描述

3 個解決方案

解決方案1 4 2012-12-10 07:49:51

解決方案2 3 已采納 2012-09-11 07:21:26

解決方案3 1 2012-09-11 07:35:16

解決方案1
4 2012-12-10 07:49:51

解決方案2
3 已采納 2012-09-11 07:21:26

解決方案3
1 2012-09-11 07:35:16