将 JS 代码从 HTML 移动到 HEAD 部分的源代码答案

【问题标题】：Move JS code from HTML to source in HEAD section将 JS 代码从 HTML 移动到 HEAD 部分的源代码
【发布时间】：2013-08-20 03:34:02
【问题描述】：

我有一个问题，如果你不介意的话，我希望你指导我解决它... 在我的 HTML 源代码中，到处都有几段 css 代码。所以我决定放在一个名为 principal.css 的文件中，并在 head 部分执行以下操作

<link href="css/principal.css" rel="stylesheet" type="text/css" />

这非常有效！我的想法是对我的 HTML 中的 javascript 代码做同样的事情，但它没有奏效。这是其中之一：

$("[data-slider]")
    .each(function () {
    var input = $(this);
    $("<span>")
        .addClass("output")
            .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
    $(this)
        .nextAll(".output:first")
            .html(data.value);
    });

有什么特殊的方法可以做到这一点吗？我的目标是页面的代码量最少，我留下良好的缩进、文档化和干净。您好，我将等待您的答复！请原谅我的英语...

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

头：

<head>
  <link href="css/principal.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="myscript.js"></script>
</head>

myscript.js

$(function() {    
    $("[data-slider]")
        .each(function () {
        var input = $(this);
        $("<span>")
            .addClass("output")
                .insertAfter($(this));
        })
        .bind("slider:ready slider:changed", function (event, data) {
        $(this)
            .nextAll(".output:first")
                .html(data.value);
        });
});

【讨论】：

最好在样式加载后放置脚本。
你的JS代码也不正确。它应该像这样开始：$(function() { /* code here */ });

【解决方案2】：

如果您打算将 js 代码放在单独的文件中，我想补充一点，这是个好主意。您应该知道，您不必使用...

<script>
  //js code

</script>

...脚本标签在一个单独的 js 文件中。

【讨论】：

【解决方案3】：

将您的js 代码放在单独的.js 文件中。类似于如何将 CSS 放在一个单独的文件中，然后将其链接到您的 html 文件。

像这样，在你的 html 文件中：

<script src="somejsfile.js"></script>

是的，您必须将 js 代码包装在 document.ready 函数中，以便在文档元素完成加载时执行。

例如：

$(document).ready(function() {
    // Your JS code here
});

这是因为浏览器HTML 解释器从TOP to BOTTOM 读取代码，所以如果您没有设置document.ready，JavaScript 将在您的任何document elements are loaded 之前运行。

【讨论】：

【解决方案4】：

.ready() 文档

$(document).ready(function(){
    // your code here
});

或

.load() 文档

$(window).on('load', function(){
    // your code here
});

【讨论】：

【解决方案5】：

你需要把它包装在 $(document).ready(...)

此外，它有不寻常的缩进。像这样格式化它可能会更好：

$(document).ready(function() {
    $("[data-slider]").each(function () {
        var input = $(this);
        $("<span>").addClass("output").insertAfter($(this));
    }).bind("slider:ready slider:changed", function (event, data) {
        $(this).nextAll(".output:first").html(data.value);
    });

});

我个人不喜欢连续链接这么多这样的命令。它可能更高效，但它使调试和修复问题变得更加困难。我个人会将 .each() 和 .bind() 分成单独的语句。但我想这是一个偏好问题。

【讨论】：

太棒了！你认为你的解决方案会为我提供 HTML 中的任何 JS 代码吗？
$() 表示它是 jquery 代码。如果要将 jquery 拉入单独的文件中，则每个文件都必须具有此 $(document).ready() 包装器，或 $(window).load()，如下所述。
非常感谢您的建议，我觉得很有用，我会考虑的，您有什么好的书籍来学习这种类型的 JavaScript 练习吗？
我从不使用任何书籍，但网上有数百个 jquery 教程。我相信你可以很容易地找到一个好的。或者只是在stackoverflow上询问。如果您喜欢我的回答，可以将其标记为正确。谢谢。
好的，我去搜索一下，谢谢！ :-)