将 JS 代码从 HTML 移动到 HEAD 部分的源代码
Posted
技术标签:
【中文标题】将 JS 代码从 HTML 移动到 HEAD 部分的源代码【英文标题】：Move JS code from HTML to source in HEAD section 【发布时间】：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);
);
有什么特殊的方法可以做到这一点吗？ 我的目标是页面的代码量最少，我留下良好的缩进、文档化和干净。 您好，我将等待您的答复！ 请原谅我的英语...
【问题讨论】：
【参考方案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 教程。我相信你可以很容易地找到一个好的。或者只是在***上询问。如果您喜欢我的回答，可以将其标记为正确。谢谢。 好的，我去搜索一下，谢谢！ :-)以上是关于将 JS 代码从 HTML 移动到 HEAD 部分的源代码的主要内容，如果未能解决你的问题，请参考以下文章