Javascript 为什么document.write被认为是一个;坏习惯;?
我知道这被认为是坏习惯;我希望能编一份原因清单,提交给第三方供应商,说明他们为什么不应该使用Javascript 为什么document.write被认为是一个;坏习惯;?,javascript,Javascript,我知道这被认为是坏习惯;我希望能编一份原因清单,提交给第三方供应商,说明他们为什么不应该使用document.write来实现他们的分析代码 请说明您申请文档的原因。请将作为一种不好的做法写在下面。实际上文档没有什么问题。写,就其本身而言。问题是它很容易被滥用。甚至很糟糕 对于提供分析代码(如Google analytics)的供应商而言,这实际上是他们分发此类代码片段的最简单方式 它使脚本保持小型化 他们不必担心重写已经建立的onload事件,也不必包括安全添加onload事件所需的抽象 它非
document.write
来实现他们的分析代码
请说明您申请
文档的原因。请将作为一种不好的做法写在下面。实际上文档没有什么问题。写,就其本身而言。问题是它很容易被滥用。甚至很糟糕
对于提供分析代码(如Google analytics)的供应商而言,这实际上是他们分发此类代码片段的最简单方式
它使脚本保持小型化
他们不必担心重写已经建立的onload事件,也不必包括安全添加onload事件所需的抽象
它非常兼容
只要你不在文档加载后尝试使用它,文档。在我看来,写并不是天生的邪恶。它会覆盖页面上的内容,这是最明显的原因,但我不会称之为“坏”
除非您使用JavaScript创建整个文档,否则它没有多大用处。在这种情况下,您可以从document.write开始
即便如此,当您使用document.write时,您并没有真正利用DOM——您只是将一团文本转储到文档中,因此我认为这是一种糟糕的格式。我认为最大的问题是,通过document.write编写的任何元素都会添加到页面元素的末尾。对于现代页面布局和AJAX来说,这很少是理想的效果。(您必须记住DOM中的元素是暂时的,脚本运行的时间可能会影响其行为)
最好在页面上设置一个占位符元素,然后操纵它的innerHTML。
document.write需要在页面加载或正文加载中使用。因此,如果您想在任何其他时间使用该脚本来更新页面内容文档,那么write几乎毫无用处
从技术上讲,document.write
只会更新HTML页面,而不会更新XHTML/XML。IE似乎很宽容这个事实,但其他浏览器不会
一些更严重的问题:
- document.write(此后为DW)在XHTML中不起作用
- DW不会直接修改DOM,从而阻止进一步的操作(试图找到这方面的证据,但最好是根据情况)
- 页面加载完成后执行的DW将覆盖页面,或写入新页面,或无法工作
- DW在遇到的地方执行:它不能在给定的节点点注入
- DW正在有效地编写序列化文本,这不是DOM概念上的工作方式,而且是创建bug的一种简单方法(.innerHTML也有同样的问题)
使用安全且对DOM友好的更好,它使用XML呈现(如XHTML页面)来断开页面
最佳:一些浏览器切换回HTML呈现,一切正常
可能:某些浏览器在XML呈现模式下禁用document.write()函数
最糟糕的:某些浏览器在使用document.write()函数时会触发XML错误。Pro:
- 这是从外部(主机/域)脚本嵌入内联内容的最简单方法
- 您可以覆盖框架/iframe中的整个内容。在更现代的Ajax技术被广泛使用之前(1998-2002),我经常在菜单/导航部分使用这种技术
Con:
- 它序列化渲染引擎以暂停,直到加载所述外部脚本,这可能需要比内部脚本更长的时间
- 它的使用方式通常是将脚本放在内容中,这被认为是糟糕的形式
这是我的两便士,一般来说,你不应该使用文档。写是为了负重,但有一个例子肯定有用:
我最近在尝试创建AJAX滑块库时发现了这一点。我创建了两个嵌套div,并使用JS将宽度
/高度
和溢出:隐藏
应用到外部
。这是为了在浏览器禁用JS的情况下,div将浮动以容纳库中的图像-这是一种非常优雅的降级
问题是,正如上面的文章一样,这个JS劫持CSS的行为直到页面加载后才开始,在加载div时引起了瞬间的闪烁。因此,我需要编写一个CSS规则,或者在加载页面时包含一个工作表
显然,这在XHTML中不起作用,但由于XHTML看起来像是一只死鸭子(在IE中呈现为标记汤),因此可能需要重新评估您对DOCTYPE的选择…它可能会阻塞您的页面
document.write
仅在加载页面时有效;如果在页面加载完成后调用它,它将覆盖整个页面
这实际上意味着您必须从内联脚本块调用它,这将阻止浏览器处理后面的部分页面。在编写块完成之前,脚本和图像不会被下载。另一个合法使用文档的方法。write
来自HTML5样板示例
window.jQuery | | document.write(“”)
我还看到了使用JSON解析/stringify polyfill()的相同技术
window.JSON | | document.write(“”)
可以将document.write()(和.innerHTML)看作是对源代码字符串的求值。这对于许多应用程序来说非常方便。例如,如果您从某个源代码中以字符串的形式获取HTML代码,只需“评估”它就很方便了
我
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>
<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>
(cons 'orange '())
(eval-string "(cons 'orange '())")
(eval '(cons 'orange '()))