JS(04)图片库改进之书写优秀的JS-DOM

swp — Thu, 10 Jul 2014 18:41:00 GMT

今天完成了图片库的改进，不得写下关于这个的深切感触，获得的宝贵经验！。不罗嗦直接看先看代码
1.平稳退化
要支持平稳退化，也就是在浏览器禁用js时，不会造成无法浏览，知识用户体验变差了而已，功能还是实现了的。此时就不能使用javascript伪协议加href属性来解决。如下。
2.分离js
分离js的关键技术就是要结合HTML生命周期，和window对象的onload方法以及元素对象拥有事件函数进行相应的自定义函数绑定。
3.兼容性（对象检查技术、其实用来确定代码错误位置也很好用）
4.优化代码(使用特定压缩工具，压缩js代码)
1 DOCTYPE html>

2 <html>
3     <head>
4         <meta charset="utf-8" />
5         <title>Image Gallerytitle>
6     head>
7     <body>
8         <h1>Snapshotsh1>
9         <ul id = "imagegallery">
10             <li>
11                 <a href="images/fireworks.jpg" title="A fireworks display">
12                 Fireworks
13                 a>
14             li>
15             <li>
16                 <a href="images/coffee.jpg" title="A cup of black coffee">
17                 Coffee
18                 a>
19             li>
20             <li>
21                 <a href="images/rose.jpg" title="A red. red rose">
22                 Rose
23                 a>
24             li>
25             <li>
26                 <a href="images/bigben.jpg" title="The famous clock">
27                 Big Ben
28                 a>
29             li>
30         ul>
31         <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
32         <p id="desp">Choose an Imagep>
33         <script type="text/javascript" src="./scripts/showPic.js">
34         script>
35     body>
36 html>

g 1 function showPic(whichPic) {

2     alert("showPic");
3     var source = whichPic.getAttribute("href");
4     var placeholder = document.getElementById("placeholder");
5     placeholder.setAttribute("src",source);
6     var text = whichPic.getAttribute("title");
7     var txtNode = document.getElementById("desp").firstChild;
8     txtNode.nodeValue = text;
9     return false;
10         /*
11         经验总结:
12         1.由于js是动态语言，所以存在一个很严重的问题，
13         那就是你自己取的变量名称时，尽可能的采用骆驼峰写法，
14         并且最后借助好的编辑器，有自动补全功能的编辑器，一面
15         拼写错误，这种错误低级，而且查找起来十分困难。
16
17         2.如果站点用到多个js文件，因该把它合并到一个文件中。以减少请求次数，提高性能。
18
19     */
20 }
21
22 function addLoadEvent(func) {
23     var oldLoad = window.onload;
24     if(typeof oldLoad == 'function') {
25         window.onload = function() {
26             oldLoad();
27             func();
28         }
29     }else {
30         window.onload = func;
31     }
32 }
33
34 function prepareGallery() {
35     //使用对象检查技术，检查所要用到的方法是否可以用。
36     //在js dom中，一切都可视为对象，包括方法，
37     //所以说这是对象检测技术，检测这个对象存不存在
38     //下面主要是检查浏览器是否支持这些DOM接口
39     //alert("jsss");
40
41     if(!document.getElementsByTagName) {alert("tag");return false};
42     if(!document.getElementById) return false;
43     if(!document.getElementById("imagegallery")) return false;
44     var gl = document.getElementById("imagegallery");
45     var links = gl.getElementsByTagName("a");
46     //alert(typeof links);
47     for(var i = 0; i < links.length; i++) {
48         links[i].onclick = function() {
49             return showPic(this);
50         }
51     }
52     //alert("end");
53 }
54 addLoadEvent(prepareGallery);
55 /*
56 这里介绍下HTML的声明周期，当HTML文档完成加载时，此时DOM节点树立即构建起来，此时会出发window对象的onload事件
57 所以我们在这个时候执行prepareGallery()函数进行，相应节点对象上的事件绑定是最合适的，因为此时我们能确保整颗节点
58 树已经构建完毕，我们绑定只要代码不出错，就肯定不会出错。要是不用这个事件来处理。而只是通过srcipt标签引入，不管是放在
59 head区域还是body结束之前，都无法保证此时DOM节点树已经构建完成，所以要实现js分离我们一定要用到HTML的声明周期中的加载完成
60 ，构建完成DOM节点树而触发的window.onload事件，有人会问此时document对象是否存在，在BOM中，window对象含有一个成员变量，
61 就是document，所以有window对象，就有document对象。
62 */
63

g
代码中的注释已经详细说明了代码是要来干什么的。其实今天改进版本的图片库，本来是想学习下HTML生命周期和DOM节点树的关系，以及和window.onload的关联。还有学习怎么平稳退化。结果卡壳，卡了半天，差错，差了半天，起初是其中一个字符编码有问题，运行结果不对。找了半天才找到。
这里总结写js的快速调试办法，当然有点麻烦。
我们在写js时，如果在定位元素时，我们应该分步定位，步步缩进，在定位时，利用对象检查技术，我们可以很轻易找到我们出错的地方。本来这项技术是用来保证兼容性的，但是我们还可以用它来定位错误！，在没有该对象的时候使用alert进行提示。在调试时，我们就可以快速定位错误的位置，因为大多数时候我们写的代码在我们理解的逻辑上是不会有错的，但是我们有时可能为定位某个元素，给其加了给id，但是定位时却拼错了，这时我们通过对象检查技术，就可以很快找到错误的地方。
2014.07.11
02：44
于福州

swp 2014-07-11 02:41 发表评论

JS(03) Node节点属性和事件之图片库

swp — Wed, 09 Jul 2014 18:53:00 GMT

1 DOCTYPE html>
2 <html>
3
7
15     <head>
16         <meta charset="utf-8" />
17         <title>Image Gallerytitle>
18     head>
19     <body>
20         <h1>Snapshotsh1>
21         <ul>
22             <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="return showPic(this);">Fireworksa>li>
23             <li><a href="images/coffee.jpg" title="A cup of black coffee"  onclick="return showPic(this);">Coffeea>li>
24             <li><a href="images/rose.jpg" title="A red. red rose" onclick="return showPic(this);">Rosea>li>
25             <li><a href="images/bigben.jpg" title="The famous clock" onclick="return showPic(this);">Big Bena>li>
26         ul>
27         <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
28         <p id="desp">Choose an Imagep>
29         <script type="text/javascript" src="scripts/showPic.js">script>
30     body>
31 html>

showPic.js

function showPic(whichPic) {
    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text = whichPic.getAttribute("title");
    var txtNode = document.getElementById("desp").firstChild;
    txtNode.nodeValue = text;
    return false;
    /*
        经验总结:
        1.由于js是动态语言，所以存在一个很严重的问题，
        那就是你自己取的变量名称时，尽可能的采用骆驼峰写法，
        并且最后借助好的编辑器，有自动补全功能的编辑器，一面
        拼写错误，这种错误低级，而且查找起来十分困难。

        2.如果站点用到多个js文件，因该把它合并到一个文件中。以减少请求次数，提高性能。

    */
}

swp 2014-07-10 02:53 发表评论

JS(02)-DOM介绍

swp — Tue, 08 Jul 2014 19:33:00 GMT

摘要: 阅读全文

swp 2014-07-09 03:33 发表评论

JS(01)-JavaScript语法

swp — Tue, 08 Jul 2014 16:42:00 GMT

准备工作：
编写javascript并不需要复杂的工具，其编写的代码必须通过HTML/XHTML文档执行。有两种方式可以做到，第一种是在head标签中的script标签中写生javascript代码。
另外一种方式使我们推荐的使用的方式，把js代码放在外部，在引用进去，引用的位置最好是在HTML文档最后，之前，这样可以加快浏览器加载页面的速度。引
用的方式就是在script标签中的src属性上赋值，所写js代码的路径。
1 DOCTYPE HTML>

3
4

5
6
7
8      ..
9
10
11

语法：
一.语句：js的语句可以不加分号而把他们放在不同行上，但这不是好的编程习惯，为了培养好的编程习惯，我们每条语句都给它加上分号，不管是不同行的还是同一行的。
二.注释：（1）行注释// (2)段注释/**/ (3)HTML风格行注释

C++博客-f(sixleaves) = sixleaves-随笔分类-Web

JS(04)图片库改进之书写优秀的JS-DOM

JS(03) Node节点属性和事件之图片库

JS(02)-DOM介绍

JS(01)-JavaScript语法