不冲撞的JavaScript

2012-06-27

不唐突的JavaScript我们通常把CSS从XHMTL文档中分离出来，那么我们也应该将JavaScript分离到外部文件中，对

不唐突的JavaScript
我们通常把CSS从XHMTL文档中分离出来，那么我们也应该将JavaScript分离到外部文件中，对于CSS，你可以通过在标签上使用style属性把CSS应用到DOM对象，但是，我们往往会将嵌入式的JavaScript代码随意丢弃在文档中,现在，我们要停止这种做法了，我们要将JavaScript遵循与CSS相同的分离规则(如果要细分的话，我们可以把CSS理解为表现，HTML理解为结构，JavaScript理解为行为，我们的原则是把这三个都分离开来，不过这得依托于浏览器的兼容。到这里，对于本文的标题就好理解了，把行为从结构中分离出来，也就是说把JavaScript从HTML中隔离开来，形成一个单独的模块)，在这里，我们把行为与结构相分离称为“不唐突的JavaScript”(Unobtrusive JavaScript)，例如:jQuery
第一种：把嵌入式脚本与其他标记混合在一起添加到body标签中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Inline JavaScript</title></head><body><h1>Inline Example</h1><script type="text/javascript">//JavaScript代码</script></body></html>

这种方式不仅反复展开代码，而且导致不必要的代码复制
第二种:把嵌入式脚本添加到文档的<head>元素中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Head JavaScript</title><script type="text/javascript">//JavaScript代码</script></head><body><h1>Head Example</h1></body></html>

这种方式似乎相对于第一种好一点，但任然混合了结构和行为
第三种:通过使用外部源文件来包含JavaScript脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>External File JavaScript</title><script type="text/javascript" src="source.js"></script></head><body><h1>External File Example</h1></body></html>

请遵循这样一种准则，就是在任何情况下，都要把全部脚本包含在一个外部源文件中，来保证行为和结构完全分离(不存在无法将全部脚本放到源文件中的情况)，从今天开始这样做吧，请重新审视你的代码，使用外部文件的另一个好处就是较少了整个页面的大小，因为，他们通常会被客户的Web浏览器缓存起来，并且只下载一次，从而较少了每个后续页面的加载时间。
让我们开始从HTML中移除事件处理程序，这在一定程度上会改变你的开发思想
http://www.huddletogether.com的Lokesh Dhakar编写的Lightbox JS。这是个图像查看解决方案，堪称是行为与结构分离的典范
《AdvancED DOM Scripting Dynamic Web Design Techniques》

热点排行

Bad Request.