JavaScript DOM编程艺术 第六章 案例库改进 笔记

2024-03-29 10:36

本文主要是介绍JavaScript DOM编程艺术 第六章 案例库改进 笔记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

图片库改进版

本章内容

  • 把事件处理移除文档
  • 向后兼容
  • 确保可访问

回顾

图片库javascript代码

function showPic(whichPic) {// 展示图片document.getElementById("placeholder").setAttribute("src", whichPic.getAttribute("href"));// 显示描述var description = document.getElementById("description");var text = whichPic.getAttribute("title");description.firstChild.nodeValue = text;
}

HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Image Gallery</title><link rel="stylesheet" type="text/css" href="styles/layout.css">
</head><body><h1>图片库</h1><ui><li><a href="image/toWest/monkey.webp" title="悟空" onclick="showPic(this);return false;">悟空</a></li><li><a href="image/toWest/tulv.webp" title="唐僧" onclick="showPic(this);return false;">唐僧</a></li><li><a href="image/toWest/pig.webp" title="八戒" onclick="showPic(this);return false;">八戒</a></li><li><a href="image/toWest/wujing.webp" title="悟净" onclick="showPic(this);return false;">悟净</a></li><li><a href="image/whiteSnake/whiteSnake.webp" title="白娘娘" onclick="showPic(this);return false;">白娘娘</a></li><li><a href="image/whiteSnake/doctor.webp" title="许仙" onclick="showPic(this);return false;">许仙</a></li><li><a href="image/whiteSnake/greenSnake.webp" title="小青" onclick="showPic(this);return false;">小青</a></li></ui><img id="placeholder" src="image/gallery.png" alt="placeholder"><p id="description">选择一个图片</p><script type="text/javascript" src="scripts/showPic.js"></script>
</body></html>

它支持平稳退化吗

问题一:JS被禁用,上述代码是否能正常运行?

答案:JS被禁用,支持,点击时,通过href直接跳转到图片界面,通过浏览器回退可以进入每个界面

但是如果使用js伪协议就会出现问题,比如:

<a href="#" onclick="showPic(this);return false;">悟空</a>

因此,在href中设置路径是最好的选择。

它的JavaScript与HTML标记是否分离

网页的行为层(JavaScript)和结构层(HTML)是否分离?
答案:否

<li><a href="image/toWest/monkey.webp" title="悟空" onclick="showPic(this);return false;">悟空</a></li>

理想情况下,HTML标记应该只负责结构,JavaScript应该只负责行为。但是HTML标记中包含了JavaScript代码,这就违背了分离原则。
修改后的HTML代码如下:

<ui id="imageGallery"><li><a href="image/toWest/monkey.webp" title="悟空">悟空</a></li><li><a href="image/toWest/tulv.webp" title="唐僧">唐僧</a></li><li><a href="image/toWest/pig.webp" title="八戒">八戒</a></li><li><a href="image/toWest/wujing.webp" title="悟净">悟净</a></li><li><a href="image/whiteSnake/whiteSnake.webp" title="白娘娘">白娘娘</a></li><li><a href="image/whiteSnake/doctor.webp" title="许仙">许仙</a></li><li><a href="image/whiteSnake/greenSnake.webp" title="小青">小青</a></li>
</ui>

对列表中相同的方法使用id=“image-gallery”

添加事件处理函数

事件处理函数需要实现

  • 检测浏览器是否理解getElemntById()方法
  • 检测浏览器是否理解getElemntByTagName()方法
  • 检查网页是否存在一个id为"imageGallery"的元素
  • 遍历"imageGallery"元素中的所有链接
  • 设置onclick事件处理函数,点击时完成如下操作:
    • 调用showPic()函数,显示图片
    • 显示描述
    • 阻止默认行为
function prepareGallery() {// 检测浏览器是否理解getElemntById()方法if (!document.getElementsByTagName) return false;if (!document.getElementById) return false;if (!document.getElementById("imageGallery")) return false;var gallery = document.getElementById("imageGallery");var links = gallery.getElementsByTagName("a");for (var i = 0; i < links.length; i++) {links[i].onclick = function() {showPic(this);return false;}}
}

共享onload事件处理函数

在网页加载完成后执行prepareGallery函数

window.onload = function() {prepareGallery();
}

为了兼容可能存在要加载多个函数

function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func;} else {window.onload = function() {oldonload();func();}}
}addLoadEvent(prepareGallery);

到此为止,实现prepareGallery函数,可以正常运行。

不要做太多的假设

在prepareGallery函数中,我们假设了document.getElementById()方法存在,但是如果浏览器不支持该方法,该函数将无法正常运行。
因此不用在showPic函数中使用document.getElementById()方法

但是,代码里面还是假设了一定存在id为"placeholder"的元素和"description"元素,并未检测到是否存在。
因此,在showPic函数中,我们也需要添加对这两个元素的检测。这里图片显示是核心功能,描述是锦上添花,因此只做到点击图片,在占位符placeholder显示

function showPic(whichPic) {// 检测图片元素是否存在if (document.getElementById("placeholder") == null) return false;// 展示图片var source = whichPic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src", source);// 显示描述if (document.getElementById("description")) {var text = whichPic.getAttribute("title");var description = document.getElementById("description");description.firstChild.nodeValue = text;}return true;
}    

此时,图片库改进版已经可以正常运行,并且兼容了JS被禁用情况。

后面还有一种描述不明白,把placeholder图片从标记文档里删掉,并在浏览器刷新界面,无论点击imageGallery中的哪个链接都没有反应?(我实测好像可以)这里记录优化方法

links[i].onclick = function() {showPic(this);return false;
}// 修改为根据showPic函数返回值判断是否成功显示图片
links[i].onclick = function() {return !showPic(this);

先这样吧,没看懂

优化

to be continued

这篇关于JavaScript DOM编程艺术 第六章 案例库改进 笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/858376

相关文章

Maven中引入 springboot 相关依赖的方式(最新推荐)

《Maven中引入springboot相关依赖的方式(最新推荐)》:本文主要介绍Maven中引入springboot相关依赖的方式(最新推荐),本文给大家介绍的非常详细,对大家的学习或工作具有... 目录Maven中引入 springboot 相关依赖的方式1. 不使用版本管理(不推荐)2、使用版本管理(推

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

SpringBoot整合OpenFeign的完整指南

《SpringBoot整合OpenFeign的完整指南》OpenFeign是由Netflix开发的一个声明式Web服务客户端,它使得编写HTTP客户端变得更加简单,本文为大家介绍了SpringBoot... 目录什么是OpenFeign环境准备创建 Spring Boot 项目添加依赖启用 OpenFeig

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代