干货JavaScript DOM编程艺术学习笔记4-6

Posted 2020-10-02

四、案例研究：javascript图片库

js:

function showPic(whichpic){

    //取得链接

   var source=whichpic.getAttribute("href");

   //取得占位图

   var placeholder=document.getElementById("placeholder");

   //改变占位图src属性

  placeholer.setAttribute("src",source);

  //取得文字描述

  var text=whichpic.getAttibute("title");

  //取得占位文字

   var description=document.getElementById("description");

   //改变占位文字值

   description.firstChild.nodeValue=text;

}

在html中调用：

<a onclick="showPic(this); return false;"></a>

注：

nodeValue属性:node.nodeValue节点的值，通常用这个属性来获取文本值，但要注意的是在<p id="description">text</p>中，description的值是null，它的第一个子节点firstChild的值才是text

nodeType属性:节点的nodeType属性返回的是数字，共有12种值，其中，元素节点是1，属性节点是2，文本节点是3.

childNodes属性:返回的是所有类型的节点，不仅是元素节点。

 

五、最佳实践

利用元素的class属性，将事件处理函数从html中分离出来。

window.onload=prepareLinks;

function prepareLinks(){

   //获取所有链接 

   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;

       }

    }

  }

}

function popUp(winURL){

   //打开一个新窗口显示winURL,窗口名为popup，宽320，高480

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

}

 注：

平稳退化graceful degradation:让一些不支持javacript的浏览器也能顺利完成基本的操作。比如就算有事件处理函数，在链接中将a href设置成真实的URL。比如搜索机器人searchbot基本都不能理解javascript代码，如果不能平稳退化，搜索排名就会受损。

渐进增强：用一些额外的信息去包裹原始数据，按照渐进增强原则创建的网页几乎都能平稳退化。css代码负责关于表示的信息，javascript代码负责行为的信息，他们都应该表现为额外的指令层。

为什么用window.onload来执行函数，而不是直接执行：不管js代码放在头部还是尾部，都有可能在脚本加载时文档还不完整，有些方法就不能正常工作。而document对象是window对象的一个属性，当window对象触发onload事件时，document对象已经存在。

向后兼容：对象检测object detection如果你不理解这个方法，请离开。if(!document.getElementById) return false;

性能考虑：尽量少访问DOM和尽量减少标记数量；合并和放置脚本，将代码合并到一个js文件中，可以减少加载页面时发送的请求数量。另外，文件如果放在head里会导致浏览器无法并行加载其他文件，一般放在文档末尾body之前可以让页面变得更快；压缩脚本，有很多压缩工具，引用压缩版本，另一个在即添加注释作为副本。

 

六、案例研究：图片库改进版

将图片库案例的事件处理函数从html中分离出来，并增加了对象检测来保证平稳退化。

function prepareGallery(){

   //对象检测

   if(!document.getElementsByTagName) return false;

   if(!document.getElementById) return false;

   if(!document.getElementById("imagegallery")) return false;

   //取得图片链接大框架   

   var gallery=document.getElementById("imagegallery");

   //取得图片链接

   var links=getElementsByTagName("a");

   //遍历链接

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

      //对每个链接执行onclick事件，在占位showPic

      links[i].onclick=function(){

          //showPic执行成功了返回false，阻止默认行为。失败的话返回true，继续执行默认行为，到链接地址

          return showPic(this)? false: true;

      }

   }

}

function showPic(whichpic){

  //对象检测

   if(!document.getElementById("placeholder")) return false;

   //取出链接的href

   var source=whichpic.getAttribute("href");

   //获得占位图元素

   placeholder=document.getElementById("placeholder");

   //检测占位元素是否是图片元素

   if(placeholder.nodenName!="IMG") return false;

   //改变占位图地址为链接图片

   placeholder.setAttribute("src",source);

   var description=document.getElementById("description");

   //有文字描述元素的话继续执行

   if(description){

       //链接title属性不存在的话赋值为空

       var text=whichpic.getAttribute("title")? whichpic.getAttribute("title"): "";

       //改变文字表述为链接的title

       description.firstChild.nodeValue=text;

   }

   //函数执行成功的话，返回true

   return true;

}

注：

this ：是执行事件处理函数onclick时关联的那个元素链接

onload事件：如果只有一个函数的话直接window.onload=function1;这种情况下再加一个函数的话window.onload=function2;只有最后的那个才会被实际执行。所以如果多个的话要整合一个addloadEvent，这样每次要增加函数的话只用增加一条语句：addLoadEvent(func2);即可。

     function addLoadEvent(func){

        //把现有的处理函数值存入oldonload

         var oldonload=window.onload;

         //如果还没有绑定任何函数，则把func添加给它

         if(!typeof oldonload!="function"){

            window.onload=func;

        }

        //如果已经绑定了函数，则新函数追加到末尾

        else{

           window.onload=function(){

              oldonload();

              func();

           }

        }

     }

DOM Core和HTML-DOM:

getElementById getElementsByTagName getAttribute setAttribute都是DOM Core，他们并不专属于javascript ，任何支持DOM的语言都可以使用；另外它们的用途也不仅限于处理网页，可以处理任何一种标记语言编写的文档。

HTML-DOM通常更短，用一个点比如用document.forms来代替document.getElementsByTagName("a")，用placeholder.src=sourc来代替placeholder.setAttribute("src",source)