在html中包含javascript的最佳实践

Question

我一直在很多地方阅读,并且除了有一些document.write脚本或范围问题之外,还使用知识在页面底部包含javascript.但最近,我遇到了一些我从未(可能)看过或使用过的东西.有些人在'i'标签内使用脚本标签.我不知道在其他标签内使用脚本标签的原因.

我真的很感谢对我的问题的澄清.

ps包含所有脚本标记的"i"标记位于页面底部,就在关闭正文标记之前.

Answer 1

我假设您正在谈论http://craga89.github.io/notyfy/,并且您<i>在Firebug的HTML面板或类似工具中看到了标记:

Firebug - HTML窗格

该页面包含无效的HTML.特别是,它有几个未封闭的标签.这使得浏览器在呈现页面之前应用某些修复,因为它需要使用有效的HTML才能在内存中生成DOM树.与此相关的主要问题是,无法保证所有浏览器都会生成相同的修补程序,或者这些修补程序将按预期工作.

如果您打开原始HTML代码(在某些浏览器中可以点击Ctrl+ U),您会看到<script>标签没有被<i>标签包围.您在DOM节点中看到的是浏览器应用的修复程序的结果.

例如,<i>顶部有一个未关闭的标签:

<i>notyfy adds the ability to style notyfy via CSS, as well removing the need for JS-based layouts and implementing event-type callbacks.</p>

如果你想知道,一些前端框架,如Twitter Boostrap决定(ab)使用<i>标签来显示图标:

<span class="runner" data-layout="top" data-type="alert">Alert <i class="icon-caret-right"></i></span>

当然,这与JavaScript无关 - 这些图标是用CSS生成的.

编辑: HTML代码和DOM树之间存在微妙但重要的区别.浏览器使用HTML代码构建称为DOM树的文档的内存表示.HTML被设计为可能无效,但DOM树不能.例如,这个HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>Invalid HTML test</title>
</head>
<body>
    <p>Hellow, <i>world</div>
</body>
</html>

...将生成此树:

Firebug的HTML面板

如你所见,它们是不同的.为了生成有效的文档结构,我的浏览器已经完全删除了<div>标记,并决定在正文结束前关闭<p>和<i>标记.