《JavaScript Dom 编程艺术》读书笔记-第6章
本章继续对图片库进行改进，主要内容包括三个方面：
1. 把事件处理函数移出文档；
2. 向后兼容；
3. 确保可访问。
之前代码的HTML片段，此时如果浏览器不支持JS，图片显示也能正常工作，只是体验感降低。可见将“href”设置为真实存在的值，能够保证平稳退化。
<a href="image/2.jpg" onclick="showpic("image/2.jpg"); return false;"title="2" >2 </a>
考虑分离结构层（JS）和行为层。作为一条原则：如果想用JS给某个网页添加一些行为，就不应该让JS代码对这个网页的结构有任何期待。
function imagegallery(){
if (!document.getElementsByTagName){
return false; //检查是否有该方法
}
if(!document.getElementById){
return false;//检查是否有该方法
}
if(!document.getElementById("imagegallery")){
return false;//检查是否ID为imagegallery的元素
}
var gallery=document.getElementById("imagegallery");//找到该元素
var links=gallery.getElementsByTagName("a");//所以图片链接元素
for (var i=0; i<links.length;i++ )//遍历
{
links[i].onclick=function()//设置onclick函数
{
return !showPic(this);//取消元素点击的默认行为，传给showPic的参数是关键字this，他代表此时与onclick方法相关联的那个元素。
}
}
}
共享onload事件函数：addLoadEvent。
function addLoadEvent(func){
var oldload=window.onload;//把现有的onload函数存入到oldload
//alert(typeof oldload)
if (typeof oldload !='function')
{
window.onload=func;//如果oldload不是函数类型，那么之前没有函数绑定onload
}else{
window.onload=function(){
oldload();
func();
}
}
}
对于showPic函数，之前没有对它进行检查和测试。
function showPic(whichpic){
if (!document.getElementById("placeholder"))
{
return false//getElementById函数在imagegallery已经检查过，所以只需检查是否含有id=placeholder的元素。
}
var source=whichpic.getAttribute("href");
var placehold=document.getElementById("placeholder");
if (placehold.nodeName!='IMG')//nodeName总是返回一个大写字母的值，即时元素在HTML里是小写的
{
return false
}
placehold.setAttribute("src",source);
if (document.getElementById("describe"))//检查是否有describe元素，如果有
{
var tx=whichpic.getAttribute("title")?whichpic.getAttribute("title"):" ";//检查图片是否有title，有就修改，没有为空
var des=document.getElementById("describe");
if (des.firstChild.nodeType==3)
{
des.firstChild.nodeValue=tx;
}
}
return true;//如果切换成功放回TRUE，否则FALSE
}
把JS从HTML里分离出去还有一个好处，在把内嵌型事件处理函数移出标记文档是，在文档里为JS留下一个挂钩：
<ul id="imagegallery">
这个挂钩也可以用在CSS里。在html文件的<head>部分引用它：
<link rel="stylesheet" href="mywebCSS.css" type="text/css" media="screen"/>
DOM Core和HTML DOM：两种方法可以互换。
在js代码中遇到以下几个DOM方法：
getElementById
getElementsByTagName
getAttribute
setAttribute
这些方法书序DOM Core，并不属于js，任何一种支持DOM的语言都可以使用。
在JS和DOM为HTML文件编写脚本时，还有许多属性可以使用。比如onclick，用于图片库的事务管理。这些属性属于HTML-DOM。
比如：
document.getElementsByTagName("form")可以简化为document.forms。
element.getAttribute("src")可以简化为element.src。
HTML-DOM只能用来处理web文档。
本章的几个改进：
尽量不让JS代码依赖于哪些没有保证的假设，为此需要增加很多测试和检查。
没有使用onkeypress也能使JS代码的可访问性得到保证。
最重要的是，把事件处理函数从标记文档分离到一个外部JS文件中。
结构与行为的分离越大越好。
《JavaScript Dom 编程艺术》读书笔记-第6章的更多相关文章
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
- JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- JavaScript DOM编程艺术-学习笔记（第二章）
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
随机推荐
- select2的用法
<link href="../css/select2.min.css" rel="stylesheet" /> <script src=&qu ...
- ELK(ElasticSearch+Logstash+ Kibana)搭建实时日志分析平台
一.简介 ELK 由三部分组成elasticsearch.logstash.kibana,elasticsearch是一个近似实时的搜索平台,它让你以前所未有的速度处理大数据成为可能. Elastic ...
- UI自动化（十二）appium
windows不可以测试iosmac 是可以测试Android ios appium cmd 下装的是appium的服务端appium-desktop 是定位元素的工具,同时自带一个appium服务端 ...
- D8 双连通分量
记得有个梗那一天,zw学生zzh大佬说逃不掉的路变成a不掉的题哈哈哈哈: 分离的路径: BZOJ 1718POJ 3177LUOGU 286: 思路:在同一个边双连通分量中,任意两点都有至少两条独立路 ...
- D6差分及树上差分
原谅我这篇博客拖了很久才写: 来到学校就和白痴一样缺了一世纪的课 上课特别懵:还有开学考枯了: 差分有列的差分,对于一段区间[l,r]进行修改,显然如果我们对于他的差分数组的l和r+1进行修改就可以了 ...
- 剑指offer（41）和为S的连续正数序列
题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...
- Day 10733 使用独立安装包安装.Net Framework 4.6.2时，提示『无法建立到信任根颁发机构的证书链』
出现该问题的原因是未能更新本机的受信任证书颁发机构证书列表,导致安装包验证失败,以下几种情况可以造成此问题: 1.安装该运行库的系统未接入互联网: 2.安装该运行库的系统所在的网络环境,屏蔽了对微软受 ...
- File 与 FileStream 文件运用
using System.IO; using System.Text; using UnityEngine; /// <summary> /// File 一次性控制 (小文件) /// ...
- centos7 安装xinetd,telnet
安装方式:yum [root@master ~]# yum list |grep telnettelnet-server.x86_64 1:0.17-59.el7 ...
- vue+iview实现table和分页及与后台数据交互
最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码 <template> <div> <Table :columns=& ...