JavaScript第六章案例研究：图片库的改进版1

最新推荐文章于 2020-10-31 23:02:58 发布

原创最新推荐文章于 2020-10-31 23:02:58 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #读书笔记

JavaScript DOM编程艺术同时被 2 个专栏收录

33 篇文章

订阅专栏

JavaScript DOM学习笔记

33 篇文章

订阅专栏

本文探讨了如何确保JavaScript与HTML标记分离，实现网页在禁用JavaScript时仍能正常工作。通过改进图片库代码，采用挂钩方法将JavaScript行为层与结构层分离，确保了平稳退化。同时，介绍了如何通过prepareGallery函数和showPic函数调整行为，以及如何利用addLoadEvent函数正确处理页面加载事件。

1.它支持平稳退化吗？

①如果JavaScript功能被禁用，会怎样？

即使JavaScript被禁用，网页的所有链接工作也都可以正常工作。

②如果选用的是“javascript：”伪协议呢？

不支持在禁用了JavaScript的浏览器的浏览

③如果在链接中使用的是“#”呢？

与②情况相同。

2.它的JavaScript与HTML标记是分离的吗

网页的行为层最好作用于结构层之上。

图片库中的行为层与结构层是交杂在一起的，我们为了将JavaScript移出HTML文档找到了一种“挂钩”把JavaScript代码与HTML文档的有关标记关联起来

   <--  改进版  --> 
   <ul id="imageGallery">
       <li>
         <a href="images/fireworks.jpg" title="A firework display">Fireworks</a>
       </li>
        <li>
         <a href="images/coffeee.jpg" title="A cup of black coffee">Coffee</a>
       </li>
        <li>
         <a href="images/rose.jpg" title="A red, red rose">Rose</a>
       </li>
        <li>
         <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
       </li>
    </ul>

①添加事件处理函数

写一个prepareGallery函数：检查是否理解getElementsByTagName、getElementById。检查是否存在id为imagegallery的元素。遍历imagegallery元素中的所有链接，设置onclick事件，让它在有关链接被点击后把这个链接作为参数传递给showPic函数，取消链接被点击时的默认行为。

（1）检查点

原则：如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页的结构有任何依赖。

  function prepareGallery(){  
  if（！document.getElementsByTagName||!document.getElementById||
     !document.getElementById("imagegallery"))
         return false;
  }

（2）变量名里有什么

    function prepareGallery(){
       if（！document.getElementsByTagName||!document.getElementById||
     !document.getElementById("imagegallery"))
         return false;

       var gallery=document.getElementsById("imagegallery");
       var links=gallery.getElementsByTagName("a");
    }

（3）遍历

  for(var i=0;i<links.length;i++){
   //  javaScript code
  }

（4）改变行为

        links[i].onclick=function(){
              showPic(this)；  //这里this与links[i]时刻是相等的
              return false;
       }

（5）完成JavaScript函数

    function prepareGallery(){
       if（！document.getElementsByTagName||!document.getElementById||
     !document.getElementById("imagegallery"))
         return false;

       var gallery=document.getElementsById("imagegallery");
       var links=gallery.getElementsByTagName("a");
 
       for(var i=0;i<links.length;i++){
         links[i].onclick=function(){
             showPic(this);
             return false;
         }
      }
 }

②共享onload事件

上述代码中仍然有可改进之处。我们必须要执行imageGallery函数才能对onclick事件进行绑定。如果在函数加载完成之前执行，此时的DOM是不完整。所以，应该在网页加载完毕后触发一个onload事件。必须将prepareGallery绑定到这个事件。

  window.onload=prepareGallery;

那如果有两个函数，想要它们在页面加载时得到执行。

这里有个函数：addLoadEvent可以使你无论在页面加载完毕执行多少函数都应付自如。它将那些在页面加载完毕的函数创建为一个队列。

(1) 把现有的window.onload处理函数的值存入oldonload

(2) 如果这个处理函数没有绑定其他任何函数，就像平时那样把新函数添加给它

(3) 否则，就把新函数追加到现有指令末尾

    function addActionEvent(func){
      var oldload= window.onload;
      if(typeof window.onload != 'function'）{
         window.onload=func;
         }
      else{
         window.onload=function(){
          oldload();
          func();
         }
    }
}

  addLoadEvent(prepareGallery);

3.不要作太多的假设

   function showPic(whichpic){
      //检查某个特定元素是否存在
       if(!document.getElementById("placeholder") return false;
       var source=wwhichpic.getAttribute("source");
       var placeholder=document.getElmentById("placeholder");
       placeholder.setAttribute("src",source);
      //不同方式检查description元素。如果它存在，它将被更新，否则会被忽略 
      if(document.getElementById("description")){
            var text=whichpic.getAttribute("title");
            var description=document.getElementById("description");
            description.firstChildNode.nodeValue=text;
         }
       return true;
  }

改进后的showPic（）函数不再假设有关标记里肯定存在placeholder图片和description元素。

可是，还有问题：如果把placeholder图片从标记文档里删掉并刷新这个页面，会出现无论点击imageGallery清单哪个链接都没有响应。

问题出在于：prepareGallery函数做出的这个假设：showPic肯定会正常返回。所以，它取消了onclick的默认行为。

是否要返回一个false值已取消onclick的默认行为，其实应该由showPic函数决定

（1）如果图片切换成功，返回true

（2）如果图片切换不成功，返回false

//如果showPic返回true，那么更新placeholder。
//如果showPic返回true，我们的prepareGallery函数就阻止默认行为  

 function prepareGallery(){
       if（！document.getElementsByTagName||!document.getElementById||
     !document.getElementById("imagegallery"))
         return false;

       var gallery=document.getElementsById("imagegallery");
       var links=gallery.getElementsByTagName("a");
 
       for(var i=0;i<links.length;i++){
         links[i].onclick=function(){
            return !showPic(this);
         }
      }
 }