javascript美术馆（改进2）

一、javascript编程过程中的好习惯

1、实现预留退路

js被禁掉，图片也可以显示出来，href属性带有图片路径

<script src="js/showPic.js"></script>

        <h1>Snapshots</h1>

        <ul id="imagegallery">

            <li><a href="images/01.jpg" title="01 display"><img width="100px" src="data:images/01.jpg" alt="01"/></a></li>

            <li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>

            <li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>

        </ul>

通过专用的id，图片的点击显示在单独的js文件中处理。

上面的代码就做到了我们在编程过程中所说的预留退路。因为在上面的href链接 中，我们写全了图片的路径，这样即使用户禁用了javascript，但是我们预留了退路，所以在没有javascript“干扰”的情况下，浏览器将沿着href属性给出的连接前进，用户看到了新图片而不是“该页无法显示”之类的信息。虽然这样与javascript在当前页面上进行切换的显示效果略差，但是总比什么都不显示强很多。

2、实现分离javascript

外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质。

仍然是上面的代码，把点击图片的js代码全部放到了外部的js文件中，这样关联起来全靠一个独一无二的id号。

3、实现向后兼容

进行必要的检查,确保老浏览器不会因为我们的javascript脚本而死机，

例如：if (!document.getElementsByTagName) return false                         //对象检测，如果浏览器不支持，就立即退出，不执行。

二、搞懂了的问题

1、return false;

<a href="javascript:showPic('images/coffee.jpg'); return false" title="A cup of coffee">Coffee</a>

return false这个语句的作用，就是阻止浏览器的默认行为不发生

当点击这个链接时，因为onclick事件处理函数所触发的javascript代码返回给它的值是false，所以这个链接 在被点击时默认行为将不会发生。

同样，onclick="showPic(this)；return false；"加了return false后可以不让用户被他们所点击的链接带到另一个图片查看窗口去。

2、document.body(专用记号)

等价于一下：

var body_element = document.getElementByTagName("body")[0];

3、结构化设计原则

每个函数应该只有一个入口和一个出口。

4、如何将多个javascript函数绑定到onload事件处理函数上

法一：匿名函数

window.onload = function(){

firstFun();

secondFun();

}

法二：

自己编写代码（写一个判断函数）

如果未加载，就加载事件函数；如果已加载，则追加到后面。！！注意：要把window.onload事件处理函数的值放进oldonload中

function addLoadEvent(func){

    var oldonload = window.onload;

    if(typeof window.onload != 'function'){  //判断页面是否已加载  ，已加载的话就追加到后面

        window.onload = func;

    }else{

        window.onload = function(){

            oldonload();                      //

            func();

        }

    }

}

三、javascript美术馆（改进）全部代码

gallery.html文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="style/css/gallery.css" type="text/css" />

        <script src="js/showPic.js"></script>

    </head>

    <!--

        作者：1107989194@qq.com

        时间：2014-04-14

        描述：javascript美术馆

        占位符、动态创建元素、

        1、实现预留退路 （js被禁掉，图片也可以显示出来，href属性带有图片路径）

        2、实现分离javascript（外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质）

        3、实现向后兼容（进行必要的检查,向后兼容性if (!document.getElementsByTagName) return false）

    -->

    <body>

        <h1>Snapshots</h1>

        <ul id="imagegallery">

            <li><a href="images/01.jpg" title="01 display"><img width="100px" src="data:images/01.jpg" alt="01"/></a></li>

            <li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>

            <li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>

        </ul>

    </body>

</html>

css文件

*{

    margin: 0;

    padding: 0;

    border: 0px;

    list-style: none;

}

body{

    font-family:"arial, helvetica, sans-serif";

    color: #333;

    background-color: #ccc;

    margin: 1em 10%;

}

h1{

    color: #333;

    background-color: transparent;

}

a{

    color: #c60;

    background-color: transparent;

    font-weight: bold;

    text-decoration: none;

}

ul{

    padding: 0;

}

li{

    float: left;

    padding: 1em;

    list-style: none;

}

#imagegallery{

    list-style: none;

}

#imagegallery li{

    display: inline;

}

#imagegallery li a img{

    border: 0px;

}

js文件：

/***********判断页面是否已加载事件的函数********************************/

function addLoadEvent(func){

    var oldonload = window.onload;

    if(typeof window.onload != 'function'){  //判断页面是否已加载  ，已加载的话就追加到后面

        window.onload = func;

    }else{

        window.onload = function(){

            oldonload();                      //

            func();

        }

    }

}

/***********自定义函数   将元素插入到一个元素的后面************************/

function insertAfter(newElement,targetElement){

    var parent = targetElement.parentNode;

    if(parent.lastChild == targetElement){

        parent.appendChild(newElement);

    }else{

        parent.insertBefore(newElement,targetElement.nextSibling);

    }

}

/***************动态创建  占位符 ***********************************/

function preparePlaceholder(){

    if(!document.createElement) return false;      //对象检测    如果浏览器不支持，则停止执行并返回false

    if(!document.createTextNode) return false;

    if(!document.getElementById) return false;

    if(!document.getElementById('imagegallery')) return false;

    var placeholder = document.createElement('img');

    placeholder.setAttribute('id','placeholder');

    placeholder.setAttribute('src','images/placeholder.jpg');

    placeholder.setAttribute('width','400px');

    placeholder.setAttribute('alt','my image gallery');

    var description = document.createElement('p');

    description.setAttribute('id','description');

    var desctext = document.createTextNode('choose an image');

    description.appendChild(desctext);

    var gallery = document.getElementById('imagegallery');

    insertAfter(placeholder,gallery);

    insertAfter(description,placeholder);

}

/****************循环输出所有的照片**********************************/

function prepareGallery(){

    if(!document.getElementById) return false;      //对象检测

    if(!document.getElementsByTagName) return false;

    if(!document.getElementById('imagegallery')) return false;

    var gallery = document.getElementById('imagegallery');   //根据它的父级元素，找到所要的a标签，缩短查找事件（即使通过tagName可直接找到所有的a标签）

    var links = gallery.getElementsByTagName('a');

    for(var i =0; i<links.length; i++){

        links[i].onclick = function(){

            return showPic(this);

        }

        links.onkeypress = links[i].onclick;

    }

}

/**************显示图片********************************************/

function showPic(whichpic){

    if(!document.getElementById('placeholder')) return false;  //对象检测

    var source = whichpic.getAttribute('href');

    var placeholder = document.getElementById('placeholder');

    placeholder.setAttribute('src',source);

    if(!document.getElementById('description')) return false;

    if(whichpic.getAttribute('title')){

        var text = whichpic.getAttribute('title');

    }else{

        var text = '';

    }

    var description = document.getElementById('description');

    if(description.firstChild.nodeType == 3){

        description.firstChild.nodeValue = text;

    }

    return false;

}

addLoadEvent(preparePlaceholder);

addLoadEvent(prepareGallery);

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

  1. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  2. javascript之JSON小案例，实现添加数据与清楚数据

    对json应用给出一个小案例,加深一些理解: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  3. spring boot入门小案例

    spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...

  4. JavaWeb_(Struts2框架)Ognl小案例查询帖子

    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...

  5. 小案例带你揭秘JS事件

    小案例带你揭秘JS事件 ### 什么是事件? 在js中一个事件的组成由那些呢? 谁触发事件:事件源 触发什么事件: 事件的类型 触发事件干什么事:事件处理函数 事件传播的过程 捕获阶段 就是从wind ...

  6. SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用

    博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...

  7. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

  8. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  9. javascript综合小案例，校验用户注册信息提交

    完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...

随机推荐

  1. C#中线程的用法

    通过委托的方式创建线程 static int sum(int x) { return x+x; { Func<int> a = sum; 创建一个新的线程格式:a.BeginInvoke( ...

  2. C语言-02基本运算

    1.除法运算 / 整数除于整数,还是整数.参与运算的操作数必须是同类型. 1/2的值是0.参与运算的操作数是什么类型,得出的值就是什么类型.   10.5 + 10将右边的10提升为了double类型 ...

  3. 【原】jQuery编写插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js.该插件用来实现以下两个功能1.设置元素的颜色.2.获取元素的颜色. 先在搭建好如下编写插件的框架: ;(fun ...

  4. 提交App Store注意事项1

    1.未遵守苹果iOS APP数据储存指导方针. 如果你的App有离线数据下载功能,尤其需要关注这一点.因为离线数据一般占用存储空间比较大,可以被重新下载和重建,但是用户往往希望系统存储空间紧时也依然能 ...

  5. WebViewJavascriptBridge

    上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...

  6. 移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览

    先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小 使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经 ...

  7. C/S和B/S两种软件体系结构

    目前两种流行的软件体系结构就是C/S和B/S体系结构,下面对两种体系结构进行一下总结: 1.C/S(客户端/服务器模式): 客户端和服务器都是独立的计算机,客户端是面向最终用户的应用程序或一些接口设备 ...

  8. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  9. BZOJ 1634: [Usaco2007 Jan]Protecting the Flowers 护花

    Description Farmer John went to cut some wood and left N (2 <= N <= 100,000) cows eating the g ...

  10. hdu 3062

    2-SAT的入门题: 网上说这个算法最好的入门教材是:伍昱的<由对称性解2-SAT问题>的ppt和赵爽的论文<2-SAT 解法浅析>: 看了一下伍昱的ppt,很好理解! 而这道 ...