Question

我，我相信很多其他开发人员习惯于在<head>标记或视图页面中的''标记中编写较小的内联脚本块。现在我的脑袋看起来像这样，

<head>
    <title>Simple Demo</title>
    <script>
        function setCheckCheckboxState(checkbox, state) {

        }

        $(function() {

            $("#tri-state").prop("indeterminate", true);
        });
    </script>
</head>

虽然代码运行正常，但在Chrome开发者控制台中，在$(function()调用之上，我收到错误Uncaught ReferenceError: $ is not defined

现在我不喜欢在尝试调试代码时看到与我的代码无关的错误，因此我已将@Scripts.Render("~/bundles/jquery")移到<head>标记中。为什么MS应该将它移到主体后面，当我们都可以访问一个几乎本能的函数时，我们只使用它来调用整个文档加载后的任何jQuery代码？

Answer 1

主要表现。参考： jQuery Script included at bottom of page in mvc 4 template

Answer 2

必须在使用jQuery的任何函数之前声明jQuery脚本。

需要在jQuery脚本引用之后调用此代码，以解决您遇到的Uncaught Reference错误。

$(function(){...});

根据最佳做法（由Yahoo!和其他许多人完成），脚本会在</body>标记结束之前添加，这就是MS选择该方法的原因。从技术上讲，文档就绪函数$(function(){});不应该是必需的，因为脚本已经位于页面的底部，这是在UI元素加载到DOM之后。最好总是将它用于安全措施。

<body>
   <div id="content"></div>
   @Scripts.Render("~/bundles/jquery")
   <script type="text/javascript">
       $(function() {
           ....
       });
   </script>
</body>

为什么jQuery包只在新MVC4 _Layout页面的底部呈现？

2 个答案: