JavaScript Dom编程艺术-C5 最佳实践

一、平稳退化（graceful degradation）

     1.弹出窗口

          window.open(url,name,features)  //（网页地址，窗口名字，窗口属性）

     //例子：

          function popUp(winURL){

              window.open(winURL,"popup","width=320,height=480") ;

          }

     2.伪协议(pseudo-protocol)

          <a href= "javascript:pop('http://www.example.com/');">Example</a>

          是一个不好做法，较老的浏览器不支持。

     3.内嵌的事件处理

          <a href= "#" onclick ="pop();return false;">Example</a>

           #表示文档内部的链接记号。return false 这个连接不会被真的打开。

          这个做法也很糟糕，2， 3都不能平稳退化

      4.如果把href的值填入真实的地址，javascript被禁用也能正常执行。

    

推荐做法：把行为和结构分离开

      1.把事件放在js内处理，而不在html中写上

          例如：

               element.event = action

               getElementById(id).event = action

          根据前面点击图片来做的详细例子。

          <a href="http://www.baidu.com/" class="popup">Example</a>

          

          var links = document.getElementsByTagName("a");

          for(var i = 0; i<links.length; i++){

               if(links[i].getAttribute("class") =="popup"){

                    links[i].onclick = function(){

                         popUp(this.getAttribute("href"));

                         return false;

                    }

               }

          }

          当window.onload时，DOM已经加载好了

          window.onload = prepareLinks;

          function prepareLinks(){上面的js内容}

二、向后兼容

     1.对象检测(object detection)

          如果能理解，则进行

         if(method){

              statements

         }

         如果不能理解，直接返回

         if(!method) return false;

     2.浏览器嗅探技术（browser sniffing）

     未详讲，有兴趣自己查查咯

三、性能考虑

       1.尽量少访问DOM和尽量减少标记

          a.查询DOM元素，浏览器就搜索整个DOM树

          b.过多的标记数量 会增加DOM树的规模，增加遍历的时间成本。

        2.合并和放置脚本

          a.合并脚本可以减少加载页面时发送的请求数量。

          b.把所有脚本放在头部可能导致无法并行加载其它文件（如图像和其他脚本），一般将脚本放置在</body>之前，这样可以提高页面加载速度，且在加载时，window对象的load事件可以对文档进行各种操作。

        3.压缩脚本(.min.js)

          即把文件中不必要的字节（如空格和注释）删除，有的程序设置会使用更短的变量名，来减少文件的大小。

          一般站点板用min.js，工作版.js