8.1.1 行为隔离 · javascript面向对象编程指南

一个网页通常有三个元素 - 内容 - 外观 - 行为 ##内容（HTML） - 尽量避免在HTML标签中使用style属性 - 不要使用与外观有关的HTML标签，例如<font> - 尽量根据语义需要来选择标签，而不是去考虑浏览器会如何绘制它们。 ##外观（CSS）将外观与内容分开，有一种好方法就是对浏览器默认的绘制行为进行重置。 ##行为（JS） - 尽可能少用<script>标签 - 尽量不要使用内嵌事件的处理方法 - 尽量不要使用CSS表达式 - 当js被用户禁用时，我们要动态地添加一些表示无目标的替换标记 - 在内容末尾、<body>标签之前，插入一个external.js文件 ##行为隔离实例 ``` |-index.html//实例 ``` ##异步的js代码载入 - 当<script>标签被放置在<body>元素的最末，这么做是因为载入js代码的过程会阻塞页面DOM的构建，甚至某些浏览器中，一些需要下载的组件也会被阻塞。将<script>移动到页面底部可以确保它形成阻塞，并且这段js被载入后只会增强这个基本功能已经完整的页面。 - 另一种防止js文件阻塞页面的方法是将他们异步载入，这么做的话，我们早一些开始载入它们。HTML5为此提供了defer属性 ``` <script defer src='behaviors.js'></script> ``` 有部分老的浏览器不支持defer属性，我们可以用动态创建script节点，然后将它插入DOM的方法来解决这个问题，而且这种方法新老浏览器都能接受。我们需要使用一些内联js代码来载入外部js文件。这段代码可以放在文档的顶部，这样一来外部js文件就会早一些被载入： ``` <head> <script> (function(){ var s = document.createElement('script'); s.src = 'behaviors.js'; document.getElementByTagName('head')[0].appendChild(s); }); </script> </head> ```