以一个简单的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. HP Z240组建磁盘阵列RAID1

  2. 2018亚洲区预选赛北京赛站网络赛 D.80 Days 尺取

    题面 题意:你带着K元要去n个城市,这n个城市是环形的,你可以选择任意一个起点,然后顺时针走,对于每个城市,到达时可以获得a元,但是从这里离开又需要花费b元,问你能否找到一个起点(输出花钱最少的那个) ...

  3. javascript设计模式-工厂模式（简单工厂）

    接口在工厂模式中起着很重要的作用,如果不对对象进行某种类型检查的以确保其实现了必要的方法,工厂模式的好处也就所剩无几了,举个简单的例子. Interface.js // Constructor. va ...

  4. 关于ssh加密方式的理解

    最近公司服务器被挖矿,所以更换了ssh的连接方式,从之前的密码登陆更换为密钥登陆方式,且禁止了密码登陆.所以在配置这个密钥的过程中,顺带了解了些ssh的原理和相关知识.通用的开源 1.ssh是什么,为 ...

  5. B - Spyke Talks

    Problem description Polycarpus is the director of a large corporation. There are n secretaries worki ...

  6. (转载) 小议TCP的MSS(最大分段)以及MTU(最大传输单元)

    [背景知识]  MTU: Maximum Transmission Unit 最大传输单元 MSS: Maximum Segment Size 最大分段大小PPPoE: PPP Over Ethern ...

  7. Oracle---显式游标

    一  游标的分类 在Oracle中提供了两种类型的游标:静态游标和动态游标. 1.静态游标是在编译时知道其SELECT语句的游标.静态游标又分为两种类型,即隐式游标和显式游标. 2.当用户需要为游标使 ...

  8. Android之MVP架构

    MVP(Model View Presenter)模式是由MVC模式发展而来的,在如今的Android程序开发中显得越来越重要.本篇文章简单讨论了MVP模式的思想. 啥是MVP MVP模式的主要思想是 ...

  9. 基于HTML5陀螺仪实现ofo首页眼睛移动效果

    最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果. ofo眼睛效果 效果分析 从效果中不难看出,是使用陀螺仪事件实现的. 这里先来 ...

  10. vue中子组件需调用父组件通过异步获取的数据

    原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...