Question

我正在创建一个AJAX繁重的Web应用程序，我很好奇人们在将样式和脚本标记添加到HTML文档正文时的想法。

我一直在使用jquery.load（）方法动态插入内容。可以加载到body元素中的示例部分HTML页面是：

<script type="text/javascript">
    $(function() {
        // All required java script for the control goes here...
    });
</script>

<style type="text/css">
    /* All required styles for the inserted HTML go here */
</style>

<div id="some-control">
    <!-- Required HTML markup is here. -->
</div>

由于这个HTML被加载到DIV中，我们最终得到的是脚本和样式标记，这些标记不在头部，而是在HTML文档的正文中。我不确定这是否是有效的HTML？这是开发支持AJAX的Web应用程序的常用方法吗？我应该注意哪些缺点？

Answer 1

就Javascript而言，你可以把它放在页面的任何位置，前提是它将处理的元素在之前加载，并且它不会抛出错误undefined元素。 Famous Yahoo performance article甚至谷歌（就搜索引擎优化而言）建议在</body>标记之前的页面末尾添加javascript。

如果您可以设法将脚本放在</body>标记之前，那么这被认为是一种很好的方法，否则如果一切正常，那么您现在正在做的事情应该没问题。

Answer 2

我实际上不同意Sarfraz并且说你应该尽可能避免在你的页面体中使用<script>和<style>标签。将JS移动到外部文件的优势是无穷无尽的。最明显的包括：

利用浏览器缓存 - 如果您只是在您的身体中编写代码，那么需要为每个页面加载额外的千字节数据。如果它是一个通用功能，你就会浪费宝贵的加载时间。如果它在外部文件中，大多数现代浏览器会缓存该文件，并且只会经常请求新版本。这也会减少服务器负载（减少请求）
此外，如果您在多个页面上使用类似的脚本，如果您需要进行更改会发生什么:(。现在您正在搜索<script>标记的每个实例以进行更改将所有代码集中放置并通用允许一次更改并完成
版本控制 - 如果您使用版本控制（GIT，SVN等），跟踪和还原一个文件（如果您犯了错误或意外丢失代码）要比所有文件更容易

CSS分享了类似的故事。同样，具有缓存和集中存储以及可重用性。然而，对于在网站上匹配的样式来说更为重要。从UI的角度来看，您不希望您的字体在页面之间进行更改，并且每次要添加新样式时都不希望编辑40个页面。

至于在文档中使用JS，因为您使用的是加载了AJAX的内容，我建议您查看.bind和.live。它们允许您将处理程序附加到DOMObject的现有和未来实例。例如：

$('.class').live('click', function(){
  alert('I was clicked!');
});

这将适用于页面加载时存在的任何对象以及稍后创建的对象。以下代码不会 - 它仅适用于在加载时创建的对象：

$('.class').click(function(){
  alert('I was clicked!');
});

Answer 3

当我看到大型网站内容管理系统经常提出一些＆lt; style＆gt;元素（有些，不是全部）接近依赖于这些类的内容，我得出的结论是这匹马不在谷仓里。

查看来自cnn.com，nytimes.com，huffingtonpost.com，您最近的大城市报纸等的页面来源。所有这些都是这样做的。

如果有充分的理由增加额外的＆lt; style＆gt;在身体的某个部分 - 例如，如果你实时包含（）各种独立的页面元素，并且每个元素都有一个嵌入的＆lt; style＆gt;它本身，组织将更清洁，更模块化，更易理解，更易于维护 - 我说只是咬紧牙关。当然，如果我们可以拥有限制范围的“本地”样式（如局部变量），那么你会更好地使用你拥有的HTML，而不是你以后想要或希望拥有的HTML。

当然，正如其他人所阐述的那样，有可能存在缺点和良好（如果不总是令人信服的）理由遵循正统观念。但对我来说，它看起来越来越像是对＆lt; style＆gt;的深思熟虑的使用。在＆lt; body＆gt;中已经成为主流。

添加样式和脚本标签到身体可接受？

3 个答案: