HTML和JavaScript代码分离、平稳退化（1）
使用的编辑器是Hbuilder，浏览器是Chrome。
HTML和JavaScript代码分离，会使得修改网页功能和代码的阅读与维护会轻松的许多，不用在DOM中阅读大量的JavaScript代码。
文中主要是一个图片库的实现，是在学习JavaScript DOM编程艺术一书时的随笔，如有理解不对，或是有明显错误的地方还请指出。
HTML的代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/1.png" title="shi lai mu">史莱姆</a>
</li>
<li>
<a href="images/2.png" title="long wang">龙王</a>
</li>
<li>
<a href="images/3.png" title="qi mu nan xiong">齐木楠雄</a>
</li>
<li>
<a href="images/4.png" title="1988">1988</a>
</li>
</ul>
<!-- <img id="placeholder" src="data:images/6.png" alt="my image gallery">
<p id="description">Choose an image</p> -->
<script src="showPic.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JavaScript代码部分：
//DOM读取完即加载
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
//增加多个window.onload
function addLoadEvent(func) {
var oldonload = window.onload;//将window.onload中的函数赋给oldonload
if (typeof window.onload != 'function') {//如果window.onload不是函数类型，即其中没有函数则将需要onload的函数赋值给它
window.onload = func;
} else {//否则将两个函数合并
window.onload = function() {
oldonload();
func();
}
}
}
//插入到目标元素后面
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;//获取目标元素的父节点
if (targetElement == parent.lastChild) {//如果父节点的最后一个子节点是目标节点，则直接添加新元素节点
parent.appendChild(newElement);
} else {//否则将新节点加在目标元素的后一个节点之前，即放在目标元素之后
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
//预加载imagegallery中的属性元素
function prepareGallery() {
if (!document.getElementsByTagName) {
return false;
} //验证getElementsByTagName是否可以使用
if (!document.getElementById) {
return false;
} //验证getElementByID是否可以使用
if (!document.getElementById("imagegallery")) {
return false;
} //验证“imagegallery”id是否存在
var gallery = document.getElementById("imagegallery"); //获取id名为“imagegallery”的数组
var links = gallery.getElementsByTagName("a"); //获取数组里的“a”标签数组
for (var i = 0; i < links.length; i++) { //对“a”数组遍历并逐个操作
links[i].onclick = function() {
return !showPic(this); //平稳退化
}
//links[i].onkeypress = links[i].onclick; //没有也行。。。
}
}
//初始化占位符的相关属性
function preparePlaceholder(){
if(!document.getElementById) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById("imagegallery")) return false; //判断是否可以使用这些函数以及ID
//新建占位图片 设置占位图片的属性节点
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "images/6.png");
placeholder.setAttribute("alt", "my image gallery");
//新建占位字符 设置占位字符的属性节点和文字节点
var description = document.createElement("p");
description.setAttribute("id", "description");
var txt = document.createTextNode("Choose an image");
description.appendChild(txt);
//找到图片列表并将占位图片、占位文字依次放在后面
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
//主要体现平稳退化思想
function showPic(whichpic) {
if (!document.getElementById("placeholder")) {
return false;
} //验证“placeholder”id是否存在
var source = whichpic.getAttribute("href"); //获取被点击的链接的目标地址
var placeholder = document.getElementById("placeholder"); //获取占位图片的元素ID待操作
placeholder.setAttribute("src", source); //将获取到的被点击的链接地址赋值给占位图片的链接地址
if (document.getElementById("description")) { //判断“description”id是否存在，不存在则不做操作，存在则修改，属于锦上添花，代码不执行无较大影响
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //确定被点击链接的title值，没有则赋为空字符
var description = document.getElementById("description"); //获取字符占位符
if (description.firstChild.nodeType == 3) { //判断子节点的类型是否为字符节点
description.firstChild.nodeValue = text; //将被点击链接的title值赋值给占位符的字符节点
}
}
return true;
}
css代码部分：
body{
font-family: "helvetica", "Arial", serif;
color:#333;
background-color: #ccc;
margin: 1em;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none ;
}
ul{
padding: 0;
}
img{
display: block;
clear: both;
}
复制到编译器需要整理代码格式。
HTML和JavaScript代码分离、平稳退化（1）的更多相关文章
- javascript DOM 编程艺术 札记2 平稳退化
定义 指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...
- 平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- JavaScript - 平稳退化
JavaScript使用window对象的open()方法来创建新的浏览器窗口.这个方法有三个参数:window.open(url,name,features)这三个参数都是可选的.1.第一个参数是想 ...
- JavaScript DOM编程艺术读后感（1）—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- Javascript平稳退化、渐进增强
平稳退化 : javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候,它的基本功能不会受到任何影响.比方说一个网站使用了大量javascript来优化页面,我们现在把浏览器的j ...
- 编写更加稳定/可读的javascript代码
每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...
- 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- 高质量JavaScript代码书写基本要点
翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...
- web开发中，前端javascript代码的组织结构
网页包含三个层次: 结构(HTML) 表现(CSS) 行为(javascript) web标准中,三者要分离,网页源代码由三部分组成:.html文件..css文件和.js文件.就是说html文件中不应 ...
随机推荐
- vs code python保存时pylint提示"Unable to import 'flask'"
在配置vscode python开发环境时,编写如下代码并保存时,会提示Unable to import 'flask' from flask import Flask app = Flask(__n ...
- 一、JVM内存区域组成
一.JVM内存区域组成 java把内存分四种: 1.栈区(stack segment)— 由编译器自动分配释放,存放函数的参数值,局部变量的值等,具体方法执行结束之后,系统自动释放内存资源 2. ...
- codeforces1238-div2
C 目前在h的高度,1~h每一个台阶要么处于out的状态,要么处于in的状态,问最少改变几个台阶的状态,使得能够从h的高度到0. 下降的唯一的方式,拉动lever,h-1的状态取反,下落的最大的高度不 ...
- [转][ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]
由于ASP.NET Core框架在本质上就是由服务器和中间件构建的消息处理管道,所以在它上面构建的应用开发框架都是建立在某种类型的中间件上,整个ASP.NET Core MVC开发框架就是建立在用来实 ...
- 2005年NOIP普及组复赛题解
题目涉及算法: 陶陶摘苹果:入门题: 校门外的树:简单模拟: 采药:01背包: 循环:模拟.高精度. 陶陶摘苹果 题目链接:https://www.luogu.org/problem/P1046 循环 ...
- 2018-8-10-win10-uwp-自定义控件初始化
title author date CreateTime categories win10 uwp 自定义控件初始化 lindexi 2018-08-10 19:16:50 +0800 2018-2- ...
- Ant Design的Form组件中FormItem名称相同引起的问题
1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...
- 安装ssh-batch工具
关于sshbatch sshbatch是用perl写了非常方便操作管理集群的一个工具,项目的源码在GitHub托管. 关于sshbatch以及其详细的使用方法,春哥在GitHub上介绍的非常详细了,详 ...
- jackson java转json hibernate懒加载造成的无限递归问题
@JsonIgnore @JsonFilter @JsonBackReference @JsonManagedReference @JsonIgnoreProperties jackson中的@Jso ...
- vue——父子传值
转载地址:https://blog.csdn.net/xr510002594/article/details/83304141