首页 > 代码库 > 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

2024-07-09 17:35:20   222人阅读

刚刚开始自学前端，如果不对请指正；欢迎各位技术大牛指点。

开始学习《javascript dom编程艺术》，整理一下学习到的知识。今天刚刚看到第六章，记下get到的几个知识点。

优雅降级

看到版本翻译为预留退路，刚刚看到个名词，我觉得很奇怪，以前没有听说过啊。不过看到英文注释就知道了Graceful degradation不就是优雅降级么，听说过！

书中举了个例子，点击一个链接，弹出一个窗口的方法。

function popUp(WinURL){     window.open(WinURL,"popUp","width=320,height=480");}

给出了两个反面典型

1 <a href="#" onclick="popUp(‘http://www.example.com/‘);return false;">Example<a> 2 <a href="javascript:popUp(‘http://www.example.com/‘);">Example<a>

上面为内嵌事件处理函数，下面一行为javascript伪协议。两种处理方式的坏处就是如果浏览器不支持javascript，用户不能正常地使用。

给出的处理方式为

<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

向后兼容

向后兼容，考虑旧版本浏览器的兼容性，这个很好理解，给出一个例子

if (!getElementById)  return false;

直正觉得get的是在美术馆例子中的一小段的代码的应用。这个小技巧不算是向后兼容了，应该算是函数优化了。

//显示图片方法function showPic(whichPic){    if(!document.getElementById("placeholder")) return true;//如果不存在图片，返回true    //TODO  获得图片地址并替换     if(!document.getElementById("description")) return false;//如果不存在描述，返回false    //TODO 获得描述信息并替换    return false;}//绑定<a>的点击事件links[i].onclick=function(){    return showPic(this)}

上面是啥意思呢，就是说如果不能正常得到图片的结点，就返回true,那么onclick执行打开图片链接的功能，浏览跳转到一张图片的页面。如果能得到图片结点，那么得到的图片会显示在预留的位置，名为placeholder的容器里。这种功能我也能实现，不过没有他的这么简洁。

多个函数绑定onload函数

这个只给出代码，我觉得我再看这篇笔记的话，应该也能看懂的，就不多做解释了。这里只是把代码记录一下，收藏了~

function addLoadEvent (func) {    var oldLoad = window.onload;//先将现有的事件处理函数存到一个变量中    if(typeof window.onload!=‘function‘){//如果还没有绑定任何函数，把新变量追加给它        window.onload=func;    }else{        window.onload=function(){            oldLoad();            func();//如果绑定函数，在新函数末尾追加        }    }}//简单地测试一下function function_name (argument) {    console.log(argument);}addLoadEvent(function_name("hehe"));addLoadEvent(function_name("haha"));

 


联系
我们