使用的编辑器是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. @loj - 2090@ 「ZJOI2016」旅行者

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 Y 来到了一个新的城市旅行.她发现了这个城市的布局是网格状的 ...

  2. 微信小程序之购物车demo

    这篇小demo主要使用了一下几个技术点 1.全局变量的使用 在这里定义的变量 任何一个页面和组件都可以访问到 在使用到的页面 const app = getApp(); 声明一个实例 然后 app.g ...

  3. 自定义View系列教程04--Draw源码分析及其实践

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  4. 洛谷P2330 [SCOI2005]繁忙的都市

    #include<bits/stdc++.h> using namespace std; ; ; int n,k,Max,tot; struct node{ int cnt,fa; }f[ ...

  5. 模板—点分治A（容斥）（洛谷P2634 [国家集训队]聪聪可可）

    洛谷P2634 [国家集训队]聪聪可可 静态点分治 一开始还以为要把分治树建出来……• 树的结构不发生改变,点权边权都不变,那么我们利用刚刚的思路,有两种具体的分治方法.• A:朴素做法,直接找重心, ...

  6. poj 2689 Prime Distance （素数二次筛法）

    2689 -- Prime Distance 没怎么研究过数论,还是今天才知道有素数二次筛法这样的东西. 题意是,要求求出给定区间内相邻两个素数的最大和最小差. 二次筛法的意思其实就是先将1~sqrt ...

  7. idea乱码问题（全）

    中文乱码问题分类: 编码普通中文乱码 properties文件中文乱码 console控制台中文乱码 搜索框中文乱码 svn注释中文乱码 问题截图: 2.properties文件中文乱码 4,.搜索框 ...

  8. H3C 物理层

  9. .net Framework 源代码 · ScrollViewer

    本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单. 看完本文,可以学会如何写一个 ScrollViewer ,如何定义一个 IS ...

  10. H3C 环路避免机制四：定义最大值