javascript美术馆（改进2）

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

1、实现预留退路

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

  1. <script src="js/showPic.js"></script>
  2.         <h1>Snapshots</h1>
  3.         <ul id="imagegallery">
  4.             <li><a href="images/01.jpg" title="01 display"><img width="100px" src="data:images/01.jpg" alt="01"/></a></li>
  5.             <li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>
  6.             <li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>
  7.         </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;

  1. <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中

  1. function addLoadEvent(func){
  2.     var oldonload = window.onload;
  3.     if(typeof window.onload != 'function'){  //判断页面是否已加载  ，已加载的话就追加到后面
  4.         window.onload = func;
  5.     }else{
  6.         window.onload = function(){
  7.             oldonload();                      //
  8.             func();
  9.         }
  10.     }
  11. }

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

gallery.html文件

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="style/css/gallery.css" type="text/css" />
  7.         <script src="js/showPic.js"></script>
  8.     </head>
  9.     <!--
  10.         作者：1107989194@qq.com
  11.         时间：2014-04-14
  12.         描述：javascript美术馆
  13.         占位符、动态创建元素、
  14.         1、实现预留退路 （js被禁掉，图片也可以显示出来，href属性带有图片路径）
  15.         2、实现分离javascript（外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质）
  16.         3、实现向后兼容（进行必要的检查,向后兼容性if (!document.getElementsByTagName) return false）
  17.     -->
  18.     <body>
  19.         <h1>Snapshots</h1>
  20.         <ul id="imagegallery">
  21.             <li><a href="images/01.jpg" title="01 display"><img width="100px" src="data:images/01.jpg" alt="01"/></a></li>
  22.             <li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>
  23.             <li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>
  24.         </ul>
  25.     </body>
  26. </html>

css文件

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0px;
  5.     list-style: none;
  6. }
  7. body{
  8.     font-family:"arial, helvetica, sans-serif";
  9.     color: #333;
  10.     background-color: #ccc;
  11.     margin: 1em 10%;
  12. }
  13.  
  14. h1{
  15.     color: #333;
  16.     background-color: transparent;
  17. }
  18.  
  19. a{
  20.     color: #c60;
  21.     background-color: transparent;
  22.     font-weight: bold;
  23.     text-decoration: none;
  24. }
  25. ul{
  26.     padding: 0;
  27. }
  28. li{
  29.     float: left;
  30.     padding: 1em;
  31.     list-style: none;
  32. }
  33. #imagegallery{
  34.     list-style: none;
  35. }
  36. #imagegallery li{
  37.     display: inline;
  38. }
  39.  
  40. #imagegallery li a img{
  41.     border: 0px;
  42. }

js文件：

  1. /***********判断页面是否已加载事件的函数********************************/
  2. function addLoadEvent(func){
  3.     var oldonload = window.onload;
  4.     if(typeof window.onload != 'function'){  //判断页面是否已加载  ，已加载的话就追加到后面
  5.         window.onload = func;
  6.     }else{
  7.         window.onload = function(){
  8.             oldonload();                      //
  9.             func();
  10.         }
  11.     }
  12. }
  13.  
  14. /***********自定义函数   将元素插入到一个元素的后面************************/
  15. function insertAfter(newElement,targetElement){
  16.     var parent = targetElement.parentNode;
  17.  
  18.     if(parent.lastChild == targetElement){
  19.         parent.appendChild(newElement);
  20.     }else{
  21.         parent.insertBefore(newElement,targetElement.nextSibling);
  22.     }
  23. }
  24.  
  25. /***************动态创建  占位符 ***********************************/
  26. function preparePlaceholder(){
  27.     if(!document.createElement) return false;      //对象检测    如果浏览器不支持，则停止执行并返回false
  28.     if(!document.createTextNode) return false;
  29.     if(!document.getElementById) return false;
  30.     if(!document.getElementById('imagegallery')) return false;
  31.  
  32.     var placeholder = document.createElement('img');
  33.     placeholder.setAttribute('id','placeholder');
  34.     placeholder.setAttribute('src','images/placeholder.jpg');
  35.     placeholder.setAttribute('width','400px');
  36.     placeholder.setAttribute('alt','my image gallery');
  37.  
  38.     var description = document.createElement('p');
  39.     description.setAttribute('id','description');
  40.     var desctext = document.createTextNode('choose an image');
  41.     description.appendChild(desctext);
  42.     var gallery = document.getElementById('imagegallery');
  43.     insertAfter(placeholder,gallery);
  44.     insertAfter(description,placeholder);
  45. }
  46.  
  47. /****************循环输出所有的照片**********************************/
  48. function prepareGallery(){
  49.     if(!document.getElementById) return false;      //对象检测
  50.     if(!document.getElementsByTagName) return false;
  51.     if(!document.getElementById('imagegallery')) return false;
  52.  
  53.     var gallery = document.getElementById('imagegallery');   //根据它的父级元素，找到所要的a标签，缩短查找事件（即使通过tagName可直接找到所有的a标签）
  54.     var links = gallery.getElementsByTagName('a');
  55.     for(var i =0; i<links.length; i++){
  56.         links[i].onclick = function(){
  57.             return showPic(this);
  58.         }
  59.         links.onkeypress = links[i].onclick;
  60.     }
  61. }
  62.  
  63. /**************显示图片********************************************/
  64. function showPic(whichpic){
  65.     if(!document.getElementById('placeholder')) return false;  //对象检测
  66.     var source = whichpic.getAttribute('href');
  67.     var placeholder = document.getElementById('placeholder');
  68.     placeholder.setAttribute('src',source);
  69.  
  70.     if(!document.getElementById('description')) return false;
  71.     if(whichpic.getAttribute('title')){
  72.         var text = whichpic.getAttribute('title');
  73.     }else{
  74.         var text = '';
  75.     }
  76.  
  77.     var description = document.getElementById('description');
  78.     if(description.firstChild.nodeType == 3){
  79.         description.firstChild.nodeValue = text;
  80.     }
  81.     return false;
  82. }
  83.  
  84. addLoadEvent(preparePlaceholder);
  85. 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. windows下python 编码问题

    windows下py文件编码: 当print 时遇到unicode 会根据系统编码转换, 而raw_input 中的输出遇到unicode编码是不会的转码的,会报错UnicodeEncodeError ...

  2. Asp.net MVC2中你必须知道的扩展点（一）：Controller Factory

    Asp.net mvc2中提供很多可以扩展的地方,利用这些扩展之后,asp.net mvc使用起来更加灵活.Simone Chiaretta曾写过一篇文章:13 ASP.NET MVC extensi ...

  3. POJ 1837 Balance 01背包

    题目: http://poj.org/problem?id=1837 感觉dp的题目都很难做,这道题如果不看题解不知道憋到毕业能不能做出来,转化成了01背包问题,很神奇.. #include < ...

  4. codeforces 278Div1 B题

    虚拟参赛的时候没想到是线段树,看到很多人都过了,也蛮着急的. 首先用二分+线段树的方法更新DP[i]:它表示以A[i]为结尾可以最前到哪个位置: 再用线段树计算ans[i]:它表示当前i个A元素可以最 ...

  5. Windows server2008 搭建ASP接口访问连接oracle数据库全过程记录--备用

    真的是太不容易了,以前的时候在window server 2003上面搭建了一套asp+oracle的接口系统,就费了好大的劲儿,其实那会迷迷瞪瞪的也不知道怎么的就弄好了,也懒得管了.OK,从昨天到今 ...

  6. Jsop入门程序

    package com.baidu; import java.io.IOException; import org.jsoup.Jsoup;import org.jsoup.nodes.Documen ...

  7. 第一次写Makefile文件

    test.c文件内容 #include <stdio.h> int main(int argc, char const *argv[]) { printf("hahahah\n& ...

  8. bzoj 3043: IncDec Sequence 模拟

    3043: IncDec Sequence Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 248  Solved: 139[Submit][Statu ...

  9. ALV 行列 颜色

    1)颜色含义 1:海蓝:2:浅清:3:黄色:4:浅蓝:5:青色:6:红色:7:橙色.(1)首位为主颜色:(2)次位为辅助颜色:(3)末位为0时,表示首位数字表为表格的底色:末位为1时,则表示以1为底色 ...

  10. angular中实现jQuery的Document Ready

    angular中不推荐混用JQuery的,原因呢问度娘. 其实这是一个比较蛋疼的问题,尤其是angular2.0,尽量不要在页面上写js,用ts写到模块里面去吧.. 汲取各位先人的智慧,还是列一下 w ...