使用的编辑器是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）的更多相关文章

  1. javascript DOM 编程艺术 札记2 平稳退化

    定义 指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...

  2. 平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript - 平稳退化

    JavaScript使用window对象的open()方法来创建新的浏览器窗口.这个方法有三个参数:window.open(url,name,features)这三个参数都是可选的.1.第一个参数是想 ...

  4. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  5. Javascript平稳退化、渐进增强

    平稳退化 : javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候,它的基本功能不会受到任何影响.比方说一个网站使用了大量javascript来优化页面,我们现在把浏览器的j ...

  6. 编写更加稳定/可读的javascript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  7. 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  8. 高质量JavaScript代码书写基本要点

    翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...

  9. web开发中，前端javascript代码的组织结构

    网页包含三个层次: 结构(HTML) 表现(CSS) 行为(javascript) web标准中,三者要分离,网页源代码由三部分组成:.html文件..css文件和.js文件.就是说html文件中不应 ...

随机推荐

  1. Gym - 101480K_K - Kernel Knights (DFS)

    题意:有两队骑士各n人,每位骑士会挑战对方队伍的某一个位骑士. (可能相同) 要求找以一个区间s: 集合S中的骑士不会互相挑战. 每个集合外的骑士必定会被集合S内的某个骑士挑战. 题解:讲真被题目绕懵 ...

  2. git 练习

    删除文件 git rm test.txt git  commit -m 'remove test.txt' 回复到最新版本 git checkout -- test.txt git checkout ...

  3. Part17—触摸屏显身手—Part17.1—原理简介

  4. Keras框架下的保存模型和加载模型

    在Keras框架下训练深度学习模型时,一般思路是在训练环境下训练出模型,然后拿训练好的模型(即保存模型相应信息的文件)到生产环境下去部署.在训练过程中我们可能会遇到以下情况: 需要运行很长时间的程序在 ...

  5. Spark1.6.1 MLlib 特征抽取和变换

    Spark1.6.1 MLlib 特征抽取和变换 1 TF-IDF TF-IDF是一种特征向量化方法,这种方法多用于文本挖掘,通过算法可以反应出词在语料库中某个文档中的重要性.文档中词记为t,文档记为 ...

  6. 七个用于数据科学(data science)的命令行工具

    七个用于数据科学(data science)的命令行工具 数据科学是OSEMN(和 awesome 相同发音),它包括获取(Obtaining).整理(Scrubbing).探索(Exploring) ...

  7. 网易大数据平台的Spark技术实践

    网易大数据平台的Spark技术实践 作者 王健宗 网易的实时计算需求 对于大多数的大数据而言,实时性是其所应具备的重要属性,信息的到达和获取应满足实时性的要求,而信息的价值需在其到达那刻展现才能利益最 ...

  8. dotnet 设计规范 · 抽象定义

    严格来说,只有一个类被其他的类继承,那么这个类就是基类.在很多时候,基类的定义是提供足够的抽象和通用方法和属性.默认实现.在继承关系中,基类定义在上层抽象和底层自定义之间. 他们充当抽象实现的实现帮助 ...

  9. SpringSecurity认证流程详解

    SpringSecurity基本原理 在之前的文章<SpringBoot + Spring Security 基本使用及个性化登录配置>中对SpringSecurity进行了简单的使用介绍 ...

  10. IE显示 “Promise”未定义，vue项目兼容ie的两种方案

    第一种方法: 直接在html中加入js链接: <script src = "https://cdn.polyfill.io/v2/polyfill.min.js">&l ...