将JavaScriptembedded到HTML体中是不好的做法?
我正在开发的一个团队养成了在我们HTML页面的正文中随意使用<script>
标签的习惯。 例如:
<html> <head></head> <body> <div id="some-div"> <script type="text/javascript">//some javascript here</script> </div> </body> </html>
我以前没见过这个。 它似乎在我testing过的less数浏览器中工作。 但据我所知,把脚本标签放在这样的地方是无效的。
我错了吗? 我们把脚本标签放在这样的div标签里有多糟糕? 有什么浏览器兼容性问题,我应该知道的?
这是完全有效的。
您不希望在标记中混入大量的代码(最好是使用外部脚本),但是可以这样做:
-
添加额外的绑定信息进行渐进式增强(这些数据难以适应类名或其他方法来隐藏扩展信息属性); 要么
-
在哪里有必要尽快启动脚本增强(而不是等待窗口加载/文档就绪)。 一个例子就是自动对焦,如果太晚就会激怒。
你可能会考虑<style>
元素,这在<body>
是不允许的(虽然大多数浏览器都允许)。
其实这很常见 例如, Google的分析跟踪代码只使用以下语法:
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script>
如果Google足够好…
这是有效的,取决于你的服务器端框架和代码的性质,有时很难避免。
这是有效的!
您可以使用:
<script type="text/javascript"> //<![CDATA[ // some javascrpt code that perfectly validates in the w3c validator //]]> </script>
我不认为你可以说这是一个不好的做法。 你必须告诉案件。 但是可以肯定的是把所有的JS都放在同一个地方是很好的。 如果你的html文件中有一小段JS,它会有点混乱。
我更喜欢将外部脚本的引用放到头部,以及用于启动和初始化小部件以及不进入正文的脚本。
很容易遇到的一个问题是,正文中的脚本元素不能访问后面的元素。 另外,一个相关的令人讨厌的浏览器兼容性问题是,IE不允许脚本元素来修改它们所在的元素。所以,如果你有这个:
<div id="foo"> <script type="text/javascript"> document.getElementById("foo")... // do something to it </script> </div>
IE不会喜欢你的页面。 IE的旧版本用来给出非常神秘的错误信息,甚至是整个页面,但IE8似乎给出了一个描述性的错误信息。
只要你确定你的脚本只能访问安全访问的DOM,我不认为把脚本元素放入正文中是不好的。 事实上,恕我直言,在相关元素之后放置初始化小部件的脚本可以比将所有东西放在一个地方更具可读性(我相信这也可能使它们更早运行,这使得在页面加载时跳转的可能性更小)。
正如几个人提到的那样,它是有效的,有效的,而且被广泛使用。
就语义推荐(或者至less推荐使用)而言,最佳实践是将脚本标签放在标题内。
考虑性能的更现代的最佳实践build议将脚本标记(外部和内联)放在body标记之前的右下angular,以允许标记在任何JavaScript执行之前完全呈现。
为了便于理解和维护代码,build议使用“unobtrusive javascript”,代码位于外部文件中,并将事件绑定到DOM。 (谷歌unobtrusive的JavaScript)
其中一种情况,其有用的JavaScript内联是初始化variables的值只存在服务器端,这将稍后由外部JavaScript代码使用。
请参阅yahoo ui获得最佳实践: http : //developer.yahoo.com/performance/rules.html (位于页面底部的javascript)
我以前没见过这个。 它似乎在我testing过的less数浏览器中工作。 但据我所知,把脚本标签放在这样的地方是无效的。
这是有效的,但不是一个好(或推荐)的做法。
我错了吗? 我们把脚本标签放在这样的div标签里有多糟糕? 有什么浏览器兼容性问题,我应该知道的?
把<script>
放在任何其他元素下(但它应该在<head>
或<body>
)是没有问题的。 在浏览器兼容性方面也没有问题,但是,在网页上embeddedJS脚本存在严重的缺点(如何/为什么它们被认为是不好的) :
- 添加页面权重
- 缩小的难度(或可能不可能)
- 无法迁移或用于其他页面
- 无法caching(每次加载页面时都需要下载)
- 没有关注的分离(难以维护)
然而,这也是很好的,因为你知道一段HTML所需要的JS将会是他们所需要的。 而不是必须断言和build立在文件顶部的一些包容。
所以,而不是“如果你要使用这个HTML,请确保你导入xyz.js”,你可以包括HTML并完成它。
所以,这不一定是可怕的邪恶。 也许不是壮观的,但也不是完全可怕的。 种类取决于意图。
这是完全有效的,但它可能会伤害可维护性。 另请参见我应该在HTML标记中放置<script>标记? 为什么在Firefox中调用这个JQuery函数失败?
这是许多许多最佳实践之一,与提高性能相关,因为这是改善您的编程方法。 最终在Web开发中让产品变得最重要!
我假设你的团队正在这样做,要么是因为他们想dynamic地插入脚本,要么是他们正在编写脚本,在页面加载时会触发。
我绝对不会说在ABSOLUTELY NECESSARY(只要它在CDATA块中)这样做的时候有什么问题,但除此之外,我build议你的团队使用原型或jQuery之类的脚本库,并保留页面外部的脚本。 这通常是更清洁的,图书馆有时会强制代码的清洁,我敢打赌,目前没有发生。
我也不会在内联脚本标记中运行任何耗时的function,因为这些function是在页面加载时发生的,正如Jason所述,可能会减慢页面的负载。 所有的脚本库都有整齐的function,可以让你在页面加载的时候做一些事情,并且可以让你select在页面加载的时候加载,比如在加载完dom之后。
这当然是合法的,例如我在Exforsys的几页上就看到了它。
现在,这是一个教程网站,显示了HTML和Javascript的基础知识,所以在这种情况下,这是完全可以理解的。 但是,我不想在生产代码中看到任何东西,而不仅仅是一两个简单的陈述。 没有看到你已经取代了/ / //some javascipt here
我不想评论。
这不应该有任何浏览器问题。
它是有效的添加在身体,但IE真的不喜欢它。 所以要更安全的一面,确保你的脚本内的标签。
这真的是在我们正在开发的项目中造成浩劫(特别是IE)
脚本应该保存在头文件中的最后build议是确保脚本在被调用之前被加载。 这只是某些事件处理程序的问题。 对于其他types的脚本,这并不重要,对于某些types(如document.write),这没有任何意义。
一些东西:
- 这是完全有效的代码明智的。
- 这是完全不推荐的。
这样做会减慢你的页面加载速度,因为Javascript必须在页面的其余部分可以呈现之前执行。 如果你在Javascript中做了很多工作,你的浏览器可能会挂起。 您应该尝试(尽可能)dynamic加载您的Javascript,并在页面结束时(最好在</body>
标签之前)
购买和阅读高性能的Javascript 。 它会改变你写JS的方式。
如果你有一个可以同时处理html和javascript语法的编辑器。 如果你喜欢先阅读几行html然后javascript ..当然。 去吧。