以一个简单的web程序为例

详细设计模式请配合代码及凝视食用

<!DOCTYPE html>
<!--
1 预留退路:假设用户禁用了js。链接还能正常显示吗?(href)
2 分离js:行为层与结构层真的分开且互不干扰吗?(onclick)
3 向后兼容:js代码中检測了浏览器的函数支持吗?(if(!xxx)return)
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImageGallery</title> <!--<script type="text/javascript" src="scripts/showPic.js"></script>-->
<script type="text/javascript" src="scripts/preparegallery.js"></script>
<!--<script type="text/javascript" src="scripts/popUp.js"></script> 測试弹窗脚本-->
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<!--<link rel="stylesheet" href="css/.warning.css" type="text/css" media="screen">--> </head> <body>
<h1>snapshots</h1>
<!-- 測试通过链接调用js函数-->
<!--<a href="javascript:popUp('http://www.baidu.com');">test 'javascript:'</a>-->
<!-- 測试通过onclick调用js函数-->
<!--<a href="#" onclick="popUp('http://www.baidu.com');return false">test on click popUp</a>-->
<!-- 预留退路:将href地址与popup的url地址设为同样的-->
<!--<a href="http://www.baidu.com" onclick="popUp('http://www.baidu.com');return false;">test popup</a>-->
<!-- 使用弹窗的标准写法2个-->
<!--<a href="http://www.baidu.com" onclick="popUp(this.getAttribute('href'));return false;">test popup</a>-->
<!--<a href="http://www.baidu.com" onclick="popUp(this.href);return false;">test popup</a>-->
<!-- test warning css-->
<!--<p class="warning">Be careful!</p>-->
<ul id="imagegallery"><!-- js分离的群体控制,挂钩子-->
<li>
<!--js分离前(onclick)<a href="images/fireworks.jpg"
onclick="showPic(this);return false;" title="A firework display">Firework</a>-->
<!--測试js分离(popup)(单个控制)<a href="images/fireworks.jpg"
title= "A firework display" class="popup">Fireworks</a>-->
<a href="images/fireworks.jpg" title="A firework display">
Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee">
Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
BigBen</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" onload="alert(3)"/> <!--img:alt 无法显示图片时用来替换的文本-->
<p id="description">Choose an image.</p>
</body>
</html>
window.onload = preparegallery;
//addLoadEvent(preparegallery());
//addLoadEvent(showPic()); function preparegallery(){
if (!document.getElementsByTagName) return false; // 向后兼容
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false; // 预防性措施 var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onclick = function() {
// 此处依据showPic的返回值控制了:onclick之后是否还要再打开一次链接(预留退路)
//alert(showPic(this));
return showPic(this);
}
}
} // 改良后的showPic函数 (集成里替换图片、替换文字的两个功能)
// 为什么检測的这么仔细呢,面对我们不可控制的html时写的js代码,不能主观觉得html里一定有什么,有点fuzzing的感觉
function showPic(whichpic) {
// 向后兼容。假设没有placeholder,那么onclick函数全然无用,
// 考虑到“预留退路”,应该不取消onclick后面的return!
// 此处用showPic的返回值进行控制是否取消onclick的"后摇"
// (见调用showPic()的onclick函数! )
if (!document.getElementById("placeholder")) return true; // 向后兼容(不取消onclick之后的默认动作)
var source = whichpic.getAttribute("href");
// 检查是否是图片 注意在nodeName中全是大写的
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName != "IMG") return true;
placeholder.setAttribute("src", source); // 替换图片 if (!document.getElementById("description")) return false; // 向后兼容(取消默认动作)
var description = document.getElementById("description");
if (whichpic.getAttribute("title")) { // 继续降低依赖性,用if推断
var text = whichpic.getAttribute("title");
} else {
var text = ''; // 这样处理即使出错也不会影响视觉效果
}
// 检查是否是文本
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text; // 替换文本
}
return false; // 千万别忘了这一句
} /*
// 载入js函数的通用方式
// 由于要将js分离,将onclick写到js里,所以须要在载入完html后、接受用户操作前载入js函数
// 为避免onload的冲突,採用下面两种通用方式 //1 为onload指定函数
window.onload = function(){
showPic();
preparegallery();
};
//2 程序化解决(在脚本库中加入addLoadEvent() 函数 并在加入时调用)
addLoadEvent(preparegallery());
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
} //使用:
//addLoadEvent(function_name)
/**
*
* Created by xy on 7/18/15.
*/ function popUp(winURL){
window.open(winURL, "popUp", "width=320, height=480");
} /*
//分离js与html(将onclick方法放入js代码中)
//script文档在html的head标签里被引入并载入,所以以下代码将会在body载入之前就执行,是无效的 var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
*/ /*
//正确的处理方式(分离js) window.onload = prepareLinks;
function prepareLinks(){
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
if(links[i].getAttribute("class") == "popup") { //对具有class=popup属性的标签载入onclick方法
links[i].onclick = function() {
popUp(this.getAttribute("href")); //调用popUp函数
return false;
}
}
}
}
*/ //向后兼容(察看浏览器知否支持这种方法)
//为了降低大括号层数,使用if(!xxx)return false;特别注意这里的方法不是调用。方法后面不要有小括号! //改动上例代码例如以下
//window.onload = prepareLinks;
function prepareLinks(){
if (!document.getElementsByTagName) return false; // see this !
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
if(links[i].getAttribute("class") == "popup") {
links[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}

html与JacaScript中的重要思想:预留后路、向后兼容、js分离的更多相关文章

  1. 实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

    javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...

  2. React 中的函数式思想

    函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...

  3. 在WPF程序中打开网页:使用代理服务器并可进行JS交互

    本项目环境:使用VS2010(C#)编写的WPF程序,通过CefSharp在程序的窗体中打开网页.需要能够实现网页后台JS代码中调用的方法,从网页接收数据,并能返回数据给网页.运行程序的电脑不允许上网 ...

  4. excel表格中如何将内容粘贴到筛选后的可见单元格[转]

    默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...

  5. [MySQL]load data local infile向MySQL数据库中导入数据时,无法导入和字段不分离问题。

    利用load data将文件中的数据导入数据库表中的时候,遇到了两个问题. 首先是load data命令无法执行的问题: 命令行下输入load data local infile "path ...

  6. C++ 中的模板类声明头文件和实现文件分离后,如何能实现正常编译?

    C++ 中的模板类声明头文件和实现文件分离后,如何能实现正常编译? 这个feature叫做Export Template,即外名模板,它的作用在于使得模板代码可依照C/C++语言习惯,将模板声明和实现 ...

  7. ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  8. VB.NET中使用Linq TO SQL添加数据后获得自增长列ID

    VB.NET中使用Linq TO SQL添加数据后获得自增长列ID: Dim tempOrdre As New Order With { .CustomerID = cmbCustomerName.S ...

  9. WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案

    首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼 ...

随机推荐

  1. 第20章 Redis配置

    20.1 Redis基础配置文件 20.2 Redis备份(持久化) save 900 1 save 300 10 save 60 10000 # By default Redis will stop ...

  2. PDOHelper (原创)

    class PDOHelper{ public static $db =null;// new PDO('mysql:host=192.168.1.68;dbname=test','root','12 ...

  3. 【BZOJ1597】【Usaco2008 Mar】土地购买 斜率优化DP

    题目: 题目在这里 思路与做法: 这题如果想要直接dp的话不太好处理. 不过, 我们发现如果\(a[i].x>=a[j].x\)且\(a[i].y>=a[j].y\) \((\)a是输入的 ...

  4. JXOI2019 退役记

    day0 考前一天在机房和RyeCatcher,还有高一数竞大佬wyt一起颓三国杀,被深深吸引无法自拔,所谓大考大浪,也算是缓解缓解压力 刷刷空间发现好多外地OIer都赶到江科了,萌生出去见一见我江西 ...

  5. jupyter在特定环境特定目录中启动

    代码如下: @echo off start %windir%\System32\cmd.exe "/c" D:\Anaconda\Scripts\activate.bat # 启动 ...

  6. Monad的重点

    Monad是非常强有力的概念,在介绍Monad是什么和如何工作的之前,我们应该先确认Monad能解决什么问题.Monad是各种编程问题的的 meta solution,它不是某种特定问题的解决方案,我 ...

  7. 使用angular.js获取form表单中的信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HDFS开发中的一些问题(逐步补充)

    1.windows操作系统下运行时报:Failed to locate the winutils binary in the hadoop binary path   java.io.IOExcept ...

  9. 工厂模式-CaffeNet训练

    参考链接:http://blog.csdn.net/lingerlanlan/article/details/32329761 RNN神经网络:http://nbviewer.ipython.org/ ...

  10. 编写模块时的声明(含MODULE_LICENSE等)(转)

    编写模块必须先声明下面两句: #include <linux/module.h>               //这个头文件包含了许多符号与函数的定义,这些符号与函数多与加载模块有关 #i ...