不冲撞的JavaScript
日期：2014-05-16 浏览次数：20294 次
不唐突的JavaScript
我们通常把CSS从XHMTL文档中分离出来，那么我们也应该将JavaScript分离到外部文件中，对于CSS，你可以通过在标签上使用style属性把CSS应用到DOM对象，但是，我们往往会将嵌入式的JavaScript代码随意丢弃在文档中,现在，我们要停止这种做法了，我们要将JavaScript遵循与CSS相同的分离规则(如果要细分的话，我们可以把CSS理解为表现，HTML理解为结构，JavaScript理解为行为，我们的原则是把这三个都分离开来，不过这得依托于浏览器的兼容。到这里，对于本文的标题就好理解了，把行为从结构中分离出来，也就是说把JavaScript从HTML中隔离开来，形成一个单独的模块)，在这里，我们把行为与结构相分离称为“不唐突的JavaScript”(Unobtrusive JavaScript)，例如:jQuery
第一种：把嵌入式脚本与其他标记混合在一起添加到body标签中
这种方式不仅反复展开代码，而且导致不必要的代码复制
第二种:把嵌入式脚本添加到文档的<head>元素中
这种方式似乎相对于第一种好一点，但任然混合了结构和行为
第三种:通过使用外部源文件来包含JavaScript脚本
请遵循这样一种准则，就是在任何情况下，都要把全部脚本包含在一个外部源文件中，来保证行为和结构完全分离(不存在无法将全部脚本放到源文件中的情况)，从今天开始这样做吧，请重新审视你的代码，使用外部文件的另一个好处就是较少了整个页面的大小，因为，他们通常会被客户的Web浏览器缓存起来，并且只下载一次，从而较少了每个后续页面的加载时间。
让我们开始从HTML中移除事件处理程序，这在一定程度上会改变你的开发思想
http://www.huddletogether.com的Lokesh Dhakar编写的Lightbox JS。这是个图像查看解决方案，堪称是行为与结构分离的典范
我们通常把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》
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
