什么是平稳退化呢?我们要知道,有些网站、用户是会禁用掉Javascript的。我们要做的是,将JavaScript做到”即使用户禁用掉JavaScript也不会影响到基本操作“这一点。

一般来说,我们有这几个方面要注意、检查:

检查DOM方法是否可用

当我们使用document.getElementById、document.getElementsByTagName、document.getElementsByClassName等DOM方法时,通常要检查这些方法是否可用。如果不可用,我们在保证基本操作的前提下退出函数。

检查元素属性、元素本身是否存在

在编写网站过程中,有时我们可能会将某个元素删除掉或它的属性删除掉。这是如果不”留好后路“,网站将很容易因为脚本文件出现问题。下列是元素或其属性被删除的示例:

if(!document.getElementById("placeholder")) //改变图片是我们的主要操作;因此如果placeholder不存在,那么文字的改变将没有意义
       return false;//如果图片切换失败,退出函数,返回false

元素不存在,直接退出函数;

var pictitle = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";//如果title属性缺失,返回空字符串

元素属性不存在,返回空字符串。

检查某函数是否运行成功

我们在调用函数的过程中往往会涉及到别的函数。有时我们应当判断,我们在当前函数中调用的函数是否能成功运行呢?如果运行失败那么怎样平稳退化呢?

下面是一个例子:

for(var i = 0; i < links.length; i++)
{
   links[i].onclick = function()
  {
        return !showPic(this);
//如果图片切换成功,showPic返回true,那么该函数返回false,点击链接弹出新窗口的默认行为将被禁用
  }                        
//如果图片切换失败,showPic返回false,那么该函数返回true,点击链接将会保留原有的行为,
//即禁用js或者placeholder不存在也不影响操作
}

我们看到,在当前函数中调用的函数有返回值true/false。当true时代表执行成功,我们做出相应的操作;false时代表执行失败,我们就留下后路,在这里即保留点击链接的默认行为。

其实有些检查是没有必要的。在实际工作中,我们针对自己的个人情况决定是否需要这些检查。这些检查针对的是当HTML文档不在我们的掌控范围之内的情况。理想情况下,我们的脚本不应该对HTML文档的内容和结构做出太多的假设。当我们清楚HTML的具体情况时,很多检查也就没有必要了。但是平稳退化的思想依旧重要。

这里是一个平稳退化非常到位的实例,仅供参考。

//Programmed by LucyShawYang
//Created on 2019.1.20
//Last modified on 2019.1.21

function showPic(whichpic)
{
   if(!document.getElementById("placeholder")) //改变图片是我们的主要操作;因此如果placeholder不存在,那么文字的改变将没有意义
       return false;//如果图片切换失败,退出函数,返回false
   var source = whichpic.getAttribute("href");
   var placeholder = document.getElementById("placeholder");
   placeholder.setAttribute("src", source);

   if(document.getElementById("description"))//改变文字是我们的次要操作;即使description不存在,我们上面改变图片的操作也可以运行
  {
       var pictitle = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";//如果title属性缺失,返回空字符串
       var description = document.getElementById("description");
       if(description.firstChild.nodeType == 3)//如果description的firstchilde是文本节点,则执行以下操作
           description.firstChild.nodeValue = pictitle;
  }
   return true;//如果图片切换成功,返回true,方便下面判断图片是否切换成功
}

function prepareGallery()
{
   if(!document.getElementById || !document.getElementsByTagName)//检查这两种DOM方法是否可行
       return false;
   if(!document.getElementById("imagegallery"))//预防性措施:即使以后从网页上删除了图片库,也不用担心JS代码会出错
       return false;

   var gallery = document.getElementById("imagegallery");
   var links = gallery.getElementsByTagName("a");
   for(var i = 0; i < links.length; i++)
  {
       links[i].onclick = function()
      {
           return !showPic(this);//如果图片切换成功,showPic返回true,那么该函数返回false,点击链接弹出新窗口的默认行为将被禁用
      }                         //如果图片切换失败,showPic返回false,那么该函数返回true,点击链接将会保留原有的行为,
                                 //即禁用js或者placeholder不存在也不影响操作
  }
}
function addLoadEvent(func)
{
   var oldonload = window.onload;//将现有的window.onload事件存入oldonload变量
   if(typeof oldonload != 'function')//如果这个事件处理函数上还没有绑定任何函数
       window.onload = func;//那么就给它添加这个函数
   else//如果事件处理函数上已经有了其他的函数
  {
       window.onload = function()
      {
           oldonload();//执行旧的函数
           func();//并将新函数追加到现有指令的末尾
      }
  }
}

addLoadEvent(prepareGallery);
分类: Javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注