博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数...
阅读量:5310 次
发布时间:2019-06-14

本文共 1531 字,大约阅读时间需要 5 分钟。

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

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

优雅降级

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

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

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

给出了两个反面典型

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

给出的处理方式为

向后兼容

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

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;}//绑定的点击事件links[i].οnclick=function(){    return showPic(this)}

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

多个函数绑定onload函数

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

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

 

转载于:https://www.cnblogs.com/mid-summer/p/3809913.html

你可能感兴趣的文章
贝贝网电面
查看>>
《mysql必知必会》 笔记
查看>>
1.20(字符串)
查看>>
Day 25 面向对象高阶
查看>>
常规SQL SERVER数据库置疑后恢复步骤
查看>>
[hadoop](1) MapReduce:ChainMapper
查看>>
注册表文件关联
查看>>
[职场、征人、面试](呛)你到底要不要换工作? Part (II) -- 诚实,最难堪的状态,却最有价值的对策...
查看>>
《AOIT shader in UE4》
查看>>
抽象类与接口的区别
查看>>
[CentOS7] vncviewer与windows之间的复制粘贴
查看>>
切割大文件与合并文件
查看>>
面试问题
查看>>
Android中的Handler
查看>>
简单小练习_自动拉微信群
查看>>
PHP 常量dirname(__file__)
查看>>
cookies
查看>>
commons-fileupload-1.2.1.jar 插件上传与下载
查看>>
P1439 【模板】最长公共子序列
查看>>
[CSS]图片与文字对齐问题
查看>>