使用的编辑器是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. oracle函数 VARIANCE([distinct|all]x)

    [功能]统计数据表选中行x列的方差. [参数]all表示对所有的值求方差,distinct只对不同的值求方差,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数]x,只 ...

  2. 详解Python中内置的NotImplemented类型的用法

    它是什么? ? 1 2 >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Pyth ...

  3. Libev源码分析05：Libev中的绝对时间定时器

    Libev中的超时监视器ev_periodic,是绝对时间定时器,不同于ev_timer,它是基于日历时间的.比如如果指定一个ev_periodic在10秒之后触发(ev_now() + 10),然后 ...

  4. IntelliJ IDEA和Eclipse设置JVM运行参数

    打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions 文件,需针对不同的JDK进行配置: 32 位:idea.exe.vmoptions64 位:idea64.exe.v ...

  5. Fish Shell使用心得

    Fish的官网宣传语是 Finally, a command line shell for the 90s. 翻译过来就是 Fish shell 是一个为90后准备的 shell. 有人说:" ...

  6. h3c 广域网与OSI参考模型

  7. oracle之简null空值问题，用nvl（a,b）函数解决

    oracle之简null空值问题,用nvl(a,b)函数解决 原文链接:https://blog.csdn.net/u013821825/article/details/48766749 oracle ...

  8. xUtils框架的介绍（二）

    xUtils中有四大组件可以供我们使用,分别是ViewUtils.HttpUtils.BitmapUtils以及DbUtils.如果你没能先读一下我的上一篇文章,那么请你移步过去先整体了解一下,再回过 ...

  9. Ubuntu Kylin 14.04安装

    早听说Ubuntu Kylin对中国本地做了很多定制的工作,想搜狗输入法.WPS,还有中国日历等.昨天没事就下载了一个Kylin试用了下,使用的方法还是使用EasyBCD软件做了个硬盘安装启动,关于E ...

  10. vuex 快速上手，具体使用方法总结（含使用例子）

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...