通过图片查看器案例了解最佳实践

最新推荐文章于 2024-10-02 15:35:50 发布

code~he

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量197

点赞数

分类专栏：笔记文章标签： css javascript html es6

本文链接：https://blog.csdn.net/qq_44421547/article/details/105443963

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本次案例我将通过一个很简单的图片查看器的例子来和大家一起来了解一下最佳实践

首先我们先来看一下最终效果
在这里插入图片描述
这个例子非常简单，首先用html和css来做布局，比如先做成这个样子

然后利用js技术来实现图片的点击切换，最终可以实现切换的样子

这些都是很简单的就在这里不说了，我们主要通过这个案例来了解一下最佳实践

凡是做事情都要为自己留一条后路，这在最佳实践中被称为平稳退化；我们都知道现在还是有一些不支持javascript语言的浏览器被少数人使用着，因此我们必须要考虑到，如果浏览器不支持js，我们如何更好的为用户呈现一个页面
比如下面的代码

	<a href="img/大话西游.jpg" title="我的意中人是绝世美人">大话西游</a>

这个代码当用户点击的时候，如果浏览器支持js，我们就以查看器的形式查看图片，并且从而阻止默认事件；如果浏览器不支持js，我们就以链接的方式打开图片，这就是一个很好的处理
再比如说，如果浏览器不支持我们用到的document.getElementById等dom操作方法怎么办，因此我们需要当浏览器不支持时，使用return false；让其返回，从而不会报错

	//向后兼容（最佳实践）
	if(!document.getElementsByTagName){
		return false;
	}
	if(!document.getElementById){
		return false;
	}

再比如说，我们获取的资源丢失了怎么办，我们书写的标签被人改动了怎么办，这种情况出现了，我们该怎么办；因此，我们需要当出现意外情况时，要么返回，要么提示用户等等

	//预防所获取的元素不存在
	if(!document.getElementById('imagegallery')){
		return false;
	}

		//判断title是否存在
				if(this.getAttribute('title')){
					let target_img_title = this.getAttribute('title');
					let target_img_text = document.getElementById('show_text');
					target_img_text.innerText = target_img_title;

					//判断其第一个子节点是不是文本节点
					// if(target_img_text.firstChild.nodeType == 3){
					// 	// target_img_text.firstChild.nodeValue = target_img_title;
					// }

				}else{
					let target_img_text = document.getElementById('show_text');
					target_img_text.innerText = '该资源标题丢失';
				}