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文件中不应 ...
随机推荐
- SDUT-3331_数据结构实验之串三：KMP应用
数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个小朋友,每个小朋友手里有一些糖块, ...
- Python基础：05集合类型
Python中,集合对象是一组无序排列的可哈希的值.所以集合成员可以做字典中的键.集合中的元素都是唯一的. 集合(sets)有两种不同的类型,可变集合(set) 和 不可变集合(frozenset). ...
- 从零学React Native之05混合开发
本篇文章,我们主要讨论如何实现Android平台的混合开发. RN给Android端发送消息 首先打开Android Studio, Open工程, 在React Native项目目录下选择andro ...
- hdu 2807 The Shortest Path（矩阵+floyd）
The Shortest Path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- python selenium处理iframe和弹框（一）
处理iframe和弹框 # encoding:utf-8 from selenium import webdriver import time driver = webdriver.Firefox() ...
- selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)
selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop Q群里 ...
- webkit浏览器下多行显示，有省略号效果
多行显示情况 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...
- Python--day42--mysql操作数据库及数据表和基本增删改查
sql语法规则: 一.操作文件夹 1.创建数据库db2:create database db2; 2.创建数据库db2并标明数据库的编码格式为utf8:create database db2 defa ...
- H3C 环路避免机制一：路由毒化
- H3C DHCP中继配置示例