幼学笔记 » JavaScript

“最被误解的语言”正焕发全新活力

j5726 — Sat, 14 Aug 2010 15:10:00 +0000

这些内容最早出自6月份的一次团队内分享，后来圆心推荐发表在了8月的《程序员》杂志上。遗憾的是编辑自行作了很多删改，原文发在这里。

Douglas Crockford曾称JavaScript是“世界上最被误解的语言”。确实，很长一段时间里，JavaScript都曾是泛滥的网页特效和弹窗广告的代名词。近些年来，随着Ajax应用的流行和前端框架的发展，JavaScript已经越来越严格和标准化。同时，在前端领域之外，JavaScript 也正被越来越广泛的使用。下面我们通过几个简单的JavaScript语句，一起来了解这些领域的应用。

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8080, "127.0.0.1");

这几句代码大体可以看出，它们的作用为：在本地的8080端口监听请求，返回浏览器响应──没错，这是基于JavaScript的服务器程序 node.js（ http://nodejs.org/）的一段控制语句。
node.js基于V8引擎（Chrome浏览器使用的JS解析器），它继承了 JavaScript的诸多特性，具备比Apache等传统服务端程序更好的性能和特性：I/O读写都经由V8引擎来处理，避免不良代码造成的死锁；更节省内存开支；处理并发请求效率更高；等等……

{"id": "036378",  "name": "etai", "job": "F2E" }

这是一句简单的JavaScript专用数据格式——JSON语句，但确切的说，它一种基于JSON的数据库存储格式——BSON，是最近流行的NOSQL(非关系型数据库)的一种存储形式，非关系数据库多采用kay-value形式，具备比关系型数据库更强的扩展性和可操作性，并且在海量存储、高并发读写方面有绝佳的表现。

var t = db.things.findOne( { name : “etai” } );

这句JavaScript语句的作用为：在以BSON存储的数据库中取得一条记录。它是著名的非关系数据库——MongoDB的一条查询语句。MongoDB基于C++开发，使用二进制格式存储BSON数据，可以对BSON中每个字段进行索引，具备极高的处理海量数据的能力。让人惊讶的是，它分别提供了基于十几种语言的查询语句和服务端、客户端，其中就包含对JavaScript的完美支持——MongoDB提供了基于Node.js的数据库服务器、基于SpiderMonkey的数据库客户端，以及JavaScript查询语句，并且提供了全功能的Web Shell。

JavaScript在这些领域的应用，已经不单单是停留在实验和玩票的性质，它们在国内外已经开始了大规模的使用。可以预见，在不久的将来，会出现这样的网站：它的前端使用JavaScript实现网页特效和交互，服务端运行的是基于JavaScript的Web服务器和数据库服务器，数据库使用JSON/BSON存储数据。

作为前端工作者，看到我们最熟悉的语言正在被这么多人、在这么多领域研究和使用，兴奋之余也倍感压力——越来越多的研究和关注，必然会促进这门语言更快的发展，同时也会变得更严格和严谨。这对前端工作者提出了更高的要求和挑战——与时俱进，不断超越！

可以在前端实现的几个地理位置小功能

j5726 — Wed, 10 Mar 2010 16:09:55 +0000

在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location，介绍了获取并处理用户地理位置的应用和方法，很有意思。结合原文的内容，加上之前的一些应用，整理了几个可以完全在前端实现的地理位置相关小功能。

1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置，通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端，或者有其他的特殊原因(比如，懒:)，也有一些其他办法来快速的获取用户位置。

maxmind.com提供了一个服务，通过引入一个js文件(http://j.maxmind.com/app/geoip.js)，可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容：

function geoip_country_code() { return 'CN'; }
function geoip_country_name() { return 'China'; }
function geoip_city() { return 'Qingdao'; }
function geoip_region() { return '25'; }
function geoip_region_name() { return 'Shandong'; }
function geoip_latitude() { return '36.0986'; }
function geoip_longitude() { return '120.3719'; }
function geoip_postal_code() { return ''; }

我们就可以利用这些信息做很多东西了：DEMO

另外，腾讯也有一个类似的接口，地址为 http://fw.qq.com/ipaddress，可以得到访问者的省、市信息，返回的格式如下：

var IPData = new Array("123.235.153.126","","山东省","青岛市");

具体的应用可以看这里：断桥残雪WordPress天气插件

2.W3C共享位置接口

HTML5加入了的贡献地理位置的浏览器API接口，目前firefox3.5等浏览器已经支持这一功能。

用法：

// if the browser supports the w3c geo api
if(navigator.geolocation){
  // get the current position
  navigator.geolocation.getCurrentPosition(

  // if this was successful, get the latitude and longitude
  function(position){
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
  },
  // if there was an error
  function(error){
    alert('ouch');
  });
}

看 DEMO

3. Google Gears 的 Geolocation API

Google Gears是主要提供本地存储功能的浏览器扩展，新版本的Gears中，加入了判断用户地理位置的API，通过IP、WIFI热点等判断位置。不过Gears的使用似乎并不太广泛(Chrome内置了Gears，其他浏览器需要安装)，国内的地理位置信息也不够丰富，所以这个应用目前只可作为参考。

使用Gears的基本方法看这里，引入gears_init.js，使用Geolocation API的程序为：

var geo = factory.create('beta.geolocation'); //创建geolocation对象
var okCallback = function(d){
  alert('当前位置(纬度，经度): ' + d.latitude + ',' + d.longitude);
};
var errorCallback = function(err){
  alert(err.message);
};
geo.getCurrentPosition(okCallback , errorCallback);

更多内容参考这篇文章：使用Gears获取当前地理位置，以及DEMO。

4.逆经纬度解析

通过浏览器API等方式得到经纬度后，有时需要得到对应的城市名，这就是逆经纬度解析。

google maps api提供了一些经纬度解析方法，如果我们不想引入庞大的api，可以直接使用他的请求地址，通过jsonp方式得到google的经纬度解析数据。jsonp请求地址形式为：

http://ditu.google.cn/maps/geo?
output=json&oe=utf-8&q=纬度%2C经度
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为经纬度，参数callback为回调函数名。

可以看下这个地址的返回结果，数据非常丰富，并且还是中文的：

myfunction && myfunction( {
  "name": "36.06023, 120.3024",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "中国山东省青岛市市南区台西三路6号-10号",
    "AddressDetails": {
   "Accuracy" : 8,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "台西三路6号-10号"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0633254,
        "south": 36.0570301,
        "east": 120.3054361,
        "west": 120.2991409
      }
    },
    "Point": {
      "coordinates": [ 120.3024027, 36.0602271, 0 ]
    }
  }, {
    "id": "p2",
    "address": "中国山东省青岛市市南区台西三路8号阿双美容美发厅",
    "AddressDetails": {
   "Accuracy" : 9,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "AddressLine" : [ "阿双美容美发厅" ],
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "台西三路8号"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0632366,
        "south": 36.0569414,
        "east": 120.3055696,
        "west": 120.2992744
      }
    },
    "Point": {
      "coordinates": [ 120.3024220, 36.0600890, 0 ]
    }
  }, {
    "id": "p3",
    "address": "中国青岛市市南区台西四路站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "台西四路站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0630636,
        "south": 36.0567684,
        "east": 120.3063986,
        "west": 120.3001034
      }
    },
    "Point": {
      "coordinates": [ 120.3032510, 36.0599160, 0 ]
    }
  }, {
    "id": "p4",
    "address": "中国青岛市市南区云南路(台西四路口)站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "云南路(台西四路口)站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0643586,
        "south": 36.0580634,
        "east": 120.3073456,
        "west": 120.3010504
      }
    },
    "Point": {
      "coordinates": [ 120.3041980, 36.0612110, 0 ]
    }
  }, {
    "id": "p5",
    "address": "中国青岛市市南区贵州路站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "贵州路站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0614856,
        "south": 36.0551904,
        "east": 120.3036956,
        "west": 120.2974004
      }
    },
    "Point": {
      "coordinates": [ 120.3005480, 36.0583380, 0 ]
    }
  }, {
    "id": "p6",
    "address": "中国青岛市市南区团岛站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "团岛站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0629146,
        "south": 36.0566194,
        "east": 120.3022496,
        "west": 120.2959544
      }
    },
    "Point": {
      "coordinates": [ 120.2991020, 36.0597670, 0 ]
    }
  }, {
    "id": "p7",
    "address": "中国山东省青岛市市南区团岛四路海湾花园",
    "AddressDetails": {
   "Accuracy" : 9,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "AddressLine" : [ "海湾花园" ],
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "团岛四路"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0642706,
        "south": 36.0579754,
        "east": 120.3006386,
        "west": 120.2943434
      }
    },
    "Point": {
      "coordinates": [ 120.2974910, 36.0611230, 0 ]
    }
  }, {
    "id": "p8",
    "address": "中国山东省青岛市市南区",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市南区"
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0954205,
        "south": 36.0413849,
        "east": 120.4266629,
        "west": 120.2858189
      }
    },
    "Point": {
      "coordinates": [ 120.3877350, 36.0667110, 0 ]
    }
  }, {
    "id": "p9",
    "address": "中国山东省青岛市",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.3313685,
        "south": 35.9407727,
        "east": 120.6326294,
        "west": 120.0970459
      }
    },
    "Point": {
      "coordinates": [ 120.3827710, 36.0663480, 0 ]
    }
  }, {
    "id": "p10",
    "address": "中国山东省",
    "AddressDetails": {
   "Accuracy" : 2,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省"
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 38.4055838,
        "south": 34.3851760,
        "east": 122.7159599,
        "west": 114.8033683
      }
    },
    "Point": {
      "coordinates": [ 117.0198960, 36.6692270, 0 ]
    }
  } ]
}
 )

Yahoo提供的接口

雅虎提供了一些经纬度查询接口，可以使用YQL查询。

查询语句为：

select * from flickr.places where lat=36.06023 and lon=120.3024

用法：

使用YQL进行更多地理信息查询，可以看这个PPT：YQL Geo Library and Introduction to Geo Hacking talk

5.经纬度解析

经纬度解析就是通过地名取得经纬度数据，同样利用google那个请求地址，可以实现这一功能，请求地址格式为：

http://ditu.google.cn/maps/geo?output=json&oe=utf-8
&q=地名的url encode编码
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为encodeURI(“中国山东省青岛市市北区”)，callback是jsonp回调函数名。

举个例子，返回结果：

myfunction && myfunction( {
  "name": "中国山东省青岛市市北区",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "中国山东省青岛市市北区",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市北区"
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.1237216,
        "south": 36.0515859,
        "east": 120.4388307,
        "west": 120.3107713
      }
    },
    "Point": {
      "coordinates": [ 120.3748010, 36.0876620, 0 ]
    }
  } ]
}
 )

6.google maps 图片接口

有时候我们只想展示简单的地图，不需要交互和拖动，可以通过google maps提供的静态地图API引入动态生成的地图图片，不过需要为你的域名申请一个key。

引入图片的url格式为：


http://maps.google.com/maps/api/staticmap?

sensor=false
&size=200x200
&maptype=roadmap
&key=你申请到的KEY
&markers=color:blue|label:1|37.4447,-122.161
&markers=color:red|label:2|37.3385,-121.886
&markers=color:green|label:3|37.3716,-122.038
&markers=color:yellow|label:4|37.7792,-122.42

得到图片：

后记

关于地图的更多操作，可以参见以前的这篇文章：Google Maps Api介绍与基础操作。

随着互联网的发展，越来越多的功能可以在前端实现，出现了越来越多的强大的第三方服务，我们可以很方便的在我们的网站上加入一些实用的功能。这也许就是web2.0的魅力吧。

JavaScript单元测试工具 — QUnit

j5726 — Thu, 04 Feb 2010 04:32:47 +0000

QUnit是jQuery团队开发的JavaScript单元测试工具，使用方便，界面美观。近期试用了一下并进一步了解了JavaScript单元测试，记录一下所思所得。

什么是单元测试

单元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。

通常来说，程式設計師每修改一次程式就會進行最少一次單元測試，在編寫程式的過程中前後很可能要進行多次單元測試，以證實程式達到軟件規格書(en:Specification)要求的工作目標，沒有臭蟲；雖然单元测试不是什么必须的，但也不坏，這牽涉到專案管理的政策決定。

—— 维基百科 (中文，英文)

为什么JavaScript需要单元测试

由于存在浏览器解析环境、用户操作习惯等差异，前端程序的许多问题是无法捕捉或重现的，现在前端程序的测试多是黑盒测试，即靠点击点击点击来寻找程序bug。这种方式既费时费力，又无法保证测试的覆盖面。

同时，前端逻辑和交互越来越复杂，和其他编程语言一样，一个函数，一个模块，在修改bug或添加新功能的过程中，很容易就产生新的bug，或使老的bug复活。这种情况下，反复进行黑盒测试，其工作量和测试质量是可想而知的。

此外，浏览器兼容性测试是前端程序测试的重要一环，在多个浏览器之间测试前端程序，上面说的工作量就会成n倍的增加。

为什么我们的前端程序如此脆弱？就是因为没用单元测试。。

假如使用了单元测试，上边的问题就变得很容易了，当然前提是你要花时间去研究和编写测试用例。

根据函数或模块的源代码，编写出包含各种情况的测试用例，每次解决bug或添加新功能，都随时更新这个用例然后进行测试，很容易就找出新bug和“复活”的老bug。

测试兼容性，只需要在不同的浏览器中分别运行这个测试，问题就一目了然了。

也许白盒比黑盒要多费几倍的脑子，但想想我们那脆弱的程序，想想那些随时冒出来的烦人的老bug，费点脑子，值了！

使用QUnit

注：下面的内容主要参考了 QUnit文档和 NetTuts+的这篇文章。

建立一个测试页面，引入 qunit.js 和 qunit.css 这两个必需的文件，这两个文件是存放在github上的，鉴于目前操蛋的互联网环境，最好下载到本地调用。

注：body中的元素id命名必须依照如下形式，否则无法正常显示。




  
  
  


  QUnit example

测试示例

下面是一个最简单的函数测试用例，解释请见程序注释。

    //定义测试模块
    module( "测试示例" );
    //定义一个简单的函数，判断参数是不是数字
    function simpleTest(para) {
      if(typeof para == "number") {
        return true;
      }
      else{
        return false;
      }
    }
    //开始单元测试
    test('simpleTest()', function() {
      //列举各种可能的情况，注意使用 ! 保证表达式符合应该的逻辑
      ok(simpleTest(2), '2是一个数字');
      ok(!simpleTest("2"), '"2"不是一个数字');
    });

module( name, [lifecycle] ) 函数指定测试模块和周期。

ok( state, [message] ) 是QUnit中最常用的一个判断函数，只能判断true和false。

DEMO在这里，看一下测试结果：

结果都是绿的，说明两条测试语句都符合设定的规则。可以尝试修改下规则

//...
ok(simpleTest("2"), '"2"是一个数字');
//...

就可以看到爆红了。。

了解更多

QUnit文档

How to Test your JavaScript Code with QUnit

Development with jQuery & Qunit

TestSwarm

幼学笔记原创内容，根据CC协议发布，欢迎具名转载。

哥写的不是程序，是寂寞

j5726 — Sat, 28 Nov 2009 08:46:58 +0000

当一群无限的牛人把一门有限的语言玩到一种山穷水尽又柳暗花明的地步，那个时候，他们写的不再是程序，是寂寞。

JavaScript就是这样一种语言，JavaScript背后就有这样一群牛人，这些人大抵分两种：

一种是Douglas Crockford这样的大牛，他们已经技术上登峰造极，生活上名利双收。剩下要做的就是到处演演讲，搞搞活动，偶尔扔出几篇小文章供人崇拜。他们温文尔雅谦卑和蔼的面孔后面，总是藏着那么一种悲天悯人、众人皆醉我独醒的让人忧伤而蛋疼的笑容。他们带着这样一种态度，去讲课，去布道，去度假。。闲云野鹤，悠哉游哉。

Douglas Crockford的寂寞笑容

他们是寂寞的，另一种就是在“找寂寞”的。

之前看到有日本人写的JS多线程框架，洋洋洒洒1万5千行代码，把个本来单线程的语言整的像多线程运行一般无二致。粗读代码，令人震精，把传进来个函数拆分组合，顺成一条新的程序去运行，程序严谨，条理清晰。世上函数何止亿万，程序亦分三六九等，他们居然有这个魄力去重建规则。

又见有人写的基于V8的服务器端js框架，V8之快有所耳闻目睹，却从没想过它可以放到服务器上使。asp的时代早已过去，服务端语言变得越来越复杂，让js这个为浏览器而存活的语言去提供网站服务，有魄力，够寂寞。

。。。

这几天看到了太多寂寞的牛人的寂寞程序，每每让我内牛满面欲火焚身。自己皮袍下藏着小顿时暴漏无遗。时时拷问自己，我有什么资格谈寂寞，每思及此，则心情振奋。

撰文以共勉。

Javascript 最佳实践

j5726 — Thu, 26 Nov 2009 14:59:37 +0000

原文：JavaScript Toolbos

翻译：幸福收藏夹

简介

这个文档是基于Javascript社区众多开发者的意见和经验，在开发Javascript代码上的最佳实践和首选的方案的明细表。因为这是一个推荐的表而非原则性的方案，经验丰富的开发者可能对下面的表达会有略有不同的见解。

文章目录：

1. 总是使用 ‘var’
2. 特性检测而非浏览器检测
 3. 使用方括号记法
 4. 避免 ‘eval’
5. 正确地引用表单和表单元素
 6. 避免 ‘with’ 声明
 7. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”
8. 使用一元 ‘+’ 号运算符使类型转向Number
9. 避免 document.all
10. 不要在脚本代码块中使用HTML注释
 11. 避免乱用全局命名空间
 12. 避免同步的 ‘Ajax’ 调用
 13. 使用 JSON
14. 使用正确的
在今天，没有任何一个常用的浏览器会忽略掉

JavaScript程序执行顺序问题总结

j5726 — Tue, 24 Nov 2009 14:47:48 +0000

好记星不如烂笔头，适时的总结梳理知识让人更轻松愉快。今天总结下学习和开发中遇到的JavaScript执行顺序的问题，今天挖个坑，以后会慢慢填，也希望抛砖引玉，能学到更多的东西。

顺序可能比较乱，写多了再整理，有些术语可能运用也不恰当，欢迎批评指正。以下使用的示例程序都经过了本人的实际验证，兼容各大浏览器。OK，步入正题。

1. 变量的声明和引用

变量必须先声明后引用，这个大家是都知道的，但还是要说说，因为后面要说到一个相关的问题。

alert(myStr); // 弹出"undefined";
var myStr = "Hello World!";
alert(myStr); // 弹出"Hello World";

2. 函数的声明和调用

JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。

//“定义式”函数定义
function Fn1(){
    alert("Hello World!");
}
//“赋值式”函数定义
var Fn2 = function(){
    alert("Hello wild!");
}

页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理(类似 1中变量必须先定义后引用的原则)，待调用到的时候才进行处理。下面举个简单的例子：

//“定义式”函数定义
Fn1();
function Fn1(){
    alert("Hello World!");
}

正常执行，弹出“Hello World!”，浏览器对Fn1进行了预处理，再从Fn1();开始执行。

//“赋值式”函数定义
Fn2();
var Fn2 = function(){
    alert("Hello wild!");
}

Firebug报错：Fn2 is not a function，浏览器未对Fn2进行预处理，依序执行，所以报错Fn2未定义。

关于Javascript的“编译”和执行过程，射雕在《JavaScript运行机制浅探》中有更深入的分析，推荐阅读。

3. 代码块及js文件的处理

“代码块”是指一对标签包裹着的js代码，文件就是指文件啦，废话:D

浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行(2中讲到了)。所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但在两个块中，定义函数所在的块必须在函数被调用的块之前。

很绕口，看例子好了：



// 报错：Fn is notdefined，两个块换过来就对了

4. 重复定义函数会覆盖前面的定义

这和变量的重复定义是一样的，代码：

function fn(){
    alert(1);
}
function fn(){
    alert(2);
}
fn();
// 弹出：“2”

如果是这样呢：

fn();
function fn(){
    alert(1);
}
function fn(){
    alert(2);
}
// 还是弹出：“2”

还是弹出“2”，为什么？2都讲了好吧…

5. body的onload函数与body内部函数的执行

body内部的函数会先于onload的函数执行，测试代码：

//html head...




//先弹出“I am inside the Wall..”;
//后弹出“I am outside the Wall!”

body的onload事件触发条件是body内容加载完成，而body中的js代码会在这一事件触发之前运行(为什么呢?6告诉你..)

6. JavaScript是多线程or单线程？

严格来说，JavaScript是没有多线程概念的，所有的程序都是“单线程”依次执行的。

举个不太恰当的例子：

function fn1(){
    var sum = 0;
    for(var ind=0; ind<1000; ind++) {
        sum += ind;
    }
    alert("答案是"+sum);
}
function fn2(){
    alert("早知道了，我就是不说");
}
fn1();
fn2();
//先弹出：“答案是499500”，
//后弹出：“早知道了，我就是不说”

那你肯定要问：那延时执行、Ajax异步加载，不是多线程的吗？没错，下面这样的程序确实看起来像“多线程”：

function fn1(){
    setTimeout(function(){
        alert("我先调用")
    },1000);
}
function fn2(){
    alert("我后调用");
}
fn1();
fn2();
// 先弹出：“我后调用”，
// 1秒后弹出：“我先调用”

看上去，fn2()和延时程序是分两个过程再走，但其实，这是JavaScript中的“回调”机制在起作用，类似于操作系统中的“中断和响应” —— 延时程序设置一个“中断”，然后执行fn2()，待1000毫秒时间到后，再回调执行fn1()。

同样，5中body的onload事件调用的函数，也是利用了回调机制——body加载完成之后，回调执行fnOnLoad()函数。

Ajax请求中的数据处理函数也是一样的道理。

关于JavaScript线程问题的更深入讨论，看这篇 javascript中的线程之我见，以及infoQ上的 JavaScript多线程编程简介。

困了，再说一下回调函数吧。

7. 回调函数

回调函数是干嘛用的？就是回调执行的函数嘛，又废话:D

如6所说，最常见的回调就是onclick、onmouseover、onmousedown、onload等等浏览器事件的调用函数；还有Ajax异步请求数据的处理函数；setTimeOut延时执行、setInterval循环执行的函数等。

干脆我们写一个纯粹的回调函数玩：

function onBack(num){
    alert("姗姗我来迟了");
    // 执行num个耳光
}
function dating(hours, callBack){
    var SP= 0; // SP,愤怒值
    //女猪脚在雪里站了hours个钟头
    //循环开始..
    SP ++;
    //循环结束...
    callBack(SP);
}

dating(1, onBack);

dating运行完之后再执行回调函数onBack —— 约会结束了，暴风骤雨开始了。

今天先写到这里，一些更深入的东西还有待整理，更多的东西还需要继续学习，欢迎批改补充，欢迎指点迷津。

幼学笔记原创内容，根据CC协议发布，欢迎具名转载。

JavaScript中使用JSON

j5726 — Wed, 21 Oct 2009 13:44:26 +0000

虽说JavaScript原生支持JSON，但真用到的时候，也遇到了一些麻烦。下面整理一些JSON相关的JS程序。

1. 将JSON字串解析为对象

最简单的方法是使用eval：

var jsonStr = '{ "name": "幼学笔记", "url": "oncoding.cn" }'; //定义一个json字符串
var jsonObj = eval( '(' + jsonStr + ')' ); //使用eval解析成对象
console.log(jsonObj);

但如果JSON字符串不严谨或被利用漏洞，eval会产生一些隐患，这是可以使用JSON解析器JSON.parse()进行解析。

需要引入这个 json2.js 文件（必须下载到本地目录，去掉第一行，Crockford太小气了：）。

var jsonObj = JSON.parse(jsonStr, function (key, value) {
    var type;
    if (value && typeof value === 'object') {
        type = value.type;
        if (typeof type === 'string' && typeof window[type] === 'function') {
            return new (window[type])(value);
        }
    }
    return value;
});

2. 将JS对象转换为JSON字串

这其实就是一个遍历对象，组装成字符串的过程。json2.js中也有对应的方法JSON.stringify，用法为：

var jsonStr= JSON.stringify(jsonObj , function (key, value) {
    return value;
});

3. jQuery

Fdream写的一个jQuery扩展可以实现以上两种操作。

/**
 * extension of JSON, type for jQuery
 * AUTHOR: xushengs@gmail.com
 * LICENSE: http://www.opensource.org/licenses/mit-license.php
 * WEBSITE: http://ooboy.net/
 */
(function($){
    // the code of this function is from
    // http://lucassmith.name/pub/typeof.html
    $.type = function(o){
        var _toS = Object.prototype.toString;
        var _types = {
            'undefined': 'undefined',
            'number': 'number',
            'boolean': 'boolean',
            'string': 'string',
            '[object Function]': 'function',
            '[object RegExp]': 'regexp',
            '[object Array]': 'array',
            '[object Date]': 'date',
            '[object Error]': 'error'
        };
        return _types[typeof o] || _types[_toS.call(o)] || (o ? 'object' : 'null');
    };
    // the code of these two functions is from mootools
    // http://mootools.net
    var $specialChars = {
        '\b': '\\b',
        '\t': '\\t',
        '\n': '\\n',
        '\f': '\\f',
        '\r': '\\r',
        '"': '\\"',
        '\\': '\\\\'
    };
    var $replaceChars = function(chr){
        return $specialChars[chr] || '\\u00' + Math.floor(chr.charCodeAt() / 16).toString(16) + (chr.charCodeAt() % 16).toString(16);
    };
    $.toJSON = function(o){
        var s = [];
        switch ($.type(o)) {
            case 'undefined':
                return 'undefined';
                break;
            case 'null':
                return 'null';
                break;
            case 'number':
            case 'boolean':
            case 'date':
            case 'function':
                return o.toString();
                break;
            case 'string':
                return '"' + o.replace(/[\x00-\x1f\\"]/g, $replaceChars) + '"';
                break;
            case 'array':
                for (var i = 0, l = o.length; i < l; i++) {
                    s.push($.toJSON(o[i]));
                }
                return '[' + s.join(',') + ']';
                break;
            case 'error':
            case 'object':
                for (var p in o) {
                    s.push('\"' + p + '\"' + ':' + $.toJSON(o[p]));
                }
                return '{' + s.join(',') + '}';
                break;
            default:
                return '';
                break;
        }
    };
    $.evalJSON = function(s){
        if ($.type(s) != 'string' || !s.length)
            return null;
        return eval('(' + s + ')');
    };
})(jQuery);

使用方法：

var jsonStr = $.toJSON(jsonData);

var jsonData= $.jsonStr(jsonStr);

4. JSON的汉字问题

以上方法生成的JSON字串中的汉字都是未经转义的。虽然一般不会影响正常使用，但因为涉及到不同语言之间的传输、存储，有时候还需要对汉字进行unicode编码。

JavaScriptunicode编码函数：

function unicode(str){
    var a = [], i = 0;
    for (; i < str.length;) {
        var strr = str[i];
        if(check(strr)){
            a[i] = "\\u"+("00" + str.charCodeAt(i).toString(16)).slice( - 4);
            //alert(a[i]);
        }
        else{
            a[i] = strr;
        }
        i++;
    }
    return (a.join(""));
}

用法：

jsonStr = unicode(jsonStr);

5. 参考资料

Google Maps Api介绍与基础操作

j5726 — Thu, 11 Jun 2009 14:52:59 +0000

一. 关于Google Maps Api

“API”，即“应用程序编程接口”，是指软件或网站为第三方开发人员提供的接口，利用这个接口，可以使用软件的一些功能而不必了解它的内部机理。

具体拿Google Maps Api来说，它提供了一个JavaScript库，具体就是我们上节课在页面头部引入的这个url：http://ditu.google.com/maps?file=api&v=2&key=KEY ，它会自动载入地图所需的js文件，Firefox肿的Firebug插件是前端开发必备工具，使用它我们可以方便的查看网页的内容，可以看到Google Maps Api引入的几个JS文件：

( Google Maps Api引入的文件 )

Google Maps Api的作用是，将Google Maps服务器上的地图图片和数据下载到客户端并正确显示，显示程序定义的地标点、折线和多边形，实现地址搜索、驾车导航等扩展功能。你可以在网页中直接调用它定义的类和方法，而不必了解它的运行机制，当然这些js文件是可见的，需要的话你可以重载它的函数，来实现你想要的功能。

二. 概览Google Maps Api

使用Google Maps Api必不可少的东西就是其开发手册：http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html

我们可以看到，Google Maps Api的地图的显示、标点、划线等操作包含59个类，空间、叠加层等包含18个类。
看到这个长达一百多屏的参考手册，是不是有点晕？不要着急，在本节及以后的讲解中，我们只会学习并使用其中一部分的类来实现我们的功能。

三. 在自己的项目中使用Google Maps Api

Google Maps Api采用申请密钥的方式授权使用，每个密钥只能对应一个网站，当然，任何一个密钥都可以在Localhost上使用：），申请地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html
我们为apus.net.cn申请了一个密钥：

申请密钥成功

Google Map调用方式

申请成功的页面上给出了三种API调用方式：“JavaScript Maps API”、“Maps API for Flash”、“HTTP Service”，我们使用第一种 — JavaScript Maps API。

OK，下面我们一起看下Google Maps API如何引入地图，和一些基本的操作。

四. Google Maps Api基本功能

1.加载并显示地图

我们首先要加载Google Maps Api并显示了地图，

这样，我们就很轻松的在网页上显示出了Google地图：

GMap2是Api中的中心类，作用为在给定的容器DIV中创建地图。可选参数opts.size可以设置地图大小，默认使用容器DIV的大小。

查看演示>>

2.添加控件

Google Maps的控件包括左侧的“鱼骨”控件和比例尺、右侧的地图类型按钮和小地图。

现在我们加载常用的四种控件：

          //加载大“鱼骨”，包含方向、缩放按钮和缩放级别控制滑块
          map.addControl(new GLargeMapControl());
          //加载地图类型按钮
          map.addControl(new GMapTypeControl());
          //加载小地图
          map.addControl(new GOverviewMapControl());
          //加载比例尺
          map.addControl(new GScaleControl());

此外，还有四种类型的控件，可以在小尺寸地图上选用：

GSmallMapControl() 小“鱼骨”，仅包含方向、缩放按钮
GSmallZoomControl() 更小“鱼骨”，仅包含缩放按钮
GMenuMapTypeControl() 下拉框式地图类型选择
GHierarchicalMapTypeControl() 按钮、下拉框组合式地图类型选择

具体见Api参考中的class GControl http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GControlImpl

查看演示>>

3. 在地图上添加标注

基本步骤为：定义一个经纬度点GLatLng，定义一个标注对象GMarker，在地图上加入标注GMap2.addOverlay()

          //定义一个经纬度点
          var point = new GLatLng(36.07868, 120.3599);
          //定义一个标注对象
          var marker = new GMarker(point);
          //在地图上加入标注
          map.addOverlay(marker);

我们还可以为这个标注添加气泡提示，这些要在addOverlay()之前定义：

          //定义字符串
          var info = "这是我的家
市北区宁夏路**号";
          //设置点击出现气泡，内容为预先定义的HTML字串
          marker.bindInfoWindowHtml(info);

查看演示>>

关于标注的其他操作、冒泡的方式内容等，还有几个其他的方法，具体可以阅读Api参考的class GMarker： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GMarker

4. 显示折线GPolyline、多边形GPolygon

在我们的Apus项目中，显示旅行路径、活动范围必不可少的地图要素就是折线和多边形，

在地图中添加折线的方法非常简单，下面这段程序显示了直升机从我爷爷家飞到学校放下行李然后去金沙滩游玩的路线^_^：

          //定义一个折线对象
          polyline = new GPolyline([
            //定义这线上的三个折点、线条颜色、宽度、透明度
            new GLatLng(36.07868,120.3599),
            new GLatLng(36.00259,120.1227),
            new GLatLng(35.95482,120.2426)
            ], //折点对象数组
            "#ff6600", //线条颜色
            3, //线条宽度
            0.9 //线条透明度
            );
          //将折线加入地图
          map.addOverlay(polyline);

查看演示>>

其他操作参见GPolyline类参考： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GPolyline

GPolyline的构造函数：GPolyline(latlngs, color?, weight?, opacity?, opts?)

其中opts? 为可选参数，class GPolylineOptions定义的属性，包括折线是否可点击clickable、表现地球弧度geodesic。
添加多边形的原理和折线类似：

          //定义一个多边形对象
          polygon = new GPolygon(
            [
               new GLatLng(36.17477,120.37609),
               new GLatLng(36.09167,120.49577),
               new GLatLng(36.06035,120.30181),
               new GLatLng(36.17477,120.37609)
            ], //折点对象数组
            "#FF6600", //线条颜色
            4, //线条宽度
            0.8, //线条透明度
            "#66FF00", //填充颜色
            0.5 //填充透明度
            );
          //将多边形加入地图
          map.addOverlay(polygon);

查看演示>>

其他操作参见GPolygon类参考： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GPolygon

GPolyline的构造函数： GPolygon(latlngs, strokeColor?, strokeWeight?, strokeOpacity?, fillColor?, fillOpacity?, opts?)
其class GPolygonOptions只包含clickable，即是否可点。

5. 经纬度编码

阅读了上边的内容，你可能会产生这样的疑问：如果一条轨迹或区域包含了成百上千个拐点，那岂不是很麻烦。没错，这里我们可以使用一个办法把这些点信息放在一串编码后的简短的字符串里，交给客户端去解码并显示，而我们的网络仅需要传输这一串编码，这里我们要用到GPolyline和GPolygon的工厂方法fromEncoded，

它的原型为：fromEncoded(color?, weight?, opacity?, latlngs, zoomFactor, levels, numLevels)
我们以一个例子来演示它，下面的代码展示了这样的路线：我们乘坐上面那架直升机，从轮渡码头飞往栈桥观光，但栈桥没有停机坪，我们只好转道飞往江苏路教堂游览，稍作停留后回到了宁夏路家中。

          //编码
          polyline  = new GPolyline.fromEncoded({
            color: "#FF6600",
            weight: 3,
            opacity: 0.9,
            /*
            未编码的折点数据：
            new GLatLng(36.066570000000006,120.30366000000001),
            new GLatLng(36.05875,120.32037000000001),
            new GLatLng(36.072480000000006,120.32842000000001),
            new GLatLng(36.079930000000004,120.35917)
            */
            points: agc{E{xg}Uzo@mgBytAiq@qm@e_E,  //折点编码
            zoomFactor: 32,  //levels字符串中邻近缩放级别集合之间的放大倍率
            levels: "BBBB",  //缩放级别编码
            numLevels: 4  //levels字符串中包含的缩放级别数
          });
         map.addOverlay(polyline);

查看演示>>

可以看到，编码后的数据变得非常轻巧，但是这一串字符是怎样编出来的呢？Google给出了一个在线编码工具，

中文版地址(目前有错误无法使用)：http://code.google.com/intl/zh-CN/apis/maps/documentation/polylineutility.html

英文版地址(目前可用)：http://code.google.com/apis/maps/documentation/polylineutility.html

这可以作为练习时的快速编码工具，但在实际的项目开发中，我们不可能把用户的每个点都手工去编码，由于编码的算法是公开的，我们可以自己编写程序来进行编码，这里有Javascript版和PHP版的编码程序：http://oncoding.cn/2009/gmaps-encode.html

五. Google Maps Api高级功能介绍

1.地址解析与逆地址解析

所谓“地址解析”，是指根据地点名称得到经纬度坐标；“逆地址解析”则是根据经纬度坐标得出其地点名称。这一功能在实际的地图开发中尤为有用。

Google Maps Api中的GClientGeocoder类提供了这一系列的功能，类参考见： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GClientGeocoder

举一个小例子来试一下，下面程序返回“栈桥”的坐标

          //地址解析
          geocoder = new GClientGeocoder();
          geocoder.getLatLng('栈桥', function(response) {
            alert (response);
          });

运行结果：

栈桥的坐标：(36.0647287, 120.3184891)

getLatLng方法的作用是返回查询地点的经纬度坐标；

另外一个方法getLocations，则同时具备了地址解析和逆地址解析的功能，它可以传入地点名称或坐标值，返回包括坐标、城市等更详细的数据。

     //initMap()函数，将地图程序加入页面
      function initMap() {
        //GBrowserIsCompatible()确定Api能否兼容当前浏览器
        if (GBrowserIsCompatible()) {
          //在ID为"Gmap"的层内显示地图
          var map = new GMap2(document.getElementById("Gmap"));
          //设置地图中心点和缩放级别
          map.setCenter(new GLatLng(36.09778, 120.37236), 12);
          //地址解析getLocations
          var geocoder = new GClientGeocoder();
          geocoder.getLocations('栈桥', function(response) {
            place = response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
            marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(getGeocodeHtml(response));
          });
       }
     }
     //组装冒泡内的HTML数据
     function getGeocodeHtml(response){
       pname = response.name;
       paddress = response.Placemark[0].address;
       plat = response.Placemark[0].Point.coordinates[1];
       plon = response.Placemark[0].Point.coordinates[0];
       return("地点："+pname+"
位置："+paddress+"
坐标："+plat+","+plon);
     }

查看演示>>

getLocations以JSON格式返回如下数据，其Placemark可能有许多个，在实际使用时需要考虑多个返回值的情况。JSON格式是一种在JavaScript中使用非常简单方便的数据格式：

{
  "name": "栈桥",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "栈桥, 青岛市",
    "AddressDetails": {"AddressLine":["栈桥"],"Accuracy": 9},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0678763,
        "south": 36.0615811,
        "east": 120.3216367,
        "west": 120.3153415
      }
    },
    "Point": {
      "coordinates": [ 120.3184891, 36.0647287, 0 ]
    }
  } ]
}

2. 本地搜索

我们可以在地图上加入一个位置搜索框，只需要短短几行代码：

          //在ID为"Gmap"的层内显示地图，设置加载搜索框
          var map = new GMap2(document.getElementById("Gmap"),
                                                    {googleBarOptions: {showOnLoad : true}} );
          ....

          //加入搜索框
          map.enableGoogleBar();

查看演示>>

如果要使用更多可定制性的搜索，可以使用Google Ajax Search Api： http://code.google.com/intl/zh-CN/apis/ajaxsearch/ ，以后我们需要的话会进一步学习。

3. 驾车路线：

使用GDirections类可以获取驾车路线：

          //驾车导航
          driveLine = new GDirections(map);
          driveLine.load("from: 青岛 to: 烟台", { "locale": "zh-CN" });

查看演示>>

4. 静态地图

上一节课说过，Google Maps提供三种形式的API，其中一种是“静态地图API”，所谓静态，就是只生成一张图片，不会有任何交互功能。这种方式特别适用于手机的地图应用。

例如：http://www.oncoding.cn/wp-content/uploads/09img/2010/03/203309iz4.jpg

得到图片：

参数：center=地图中心点&zoom=缩放级别&size=宽x高&markers=第一个标点经度,纬度,颜色字母|第二个标点经度,纬度,颜色字母…&key=你的KEY

5. KML

KML是用于描述和保存地理信息（如点、线、图像、多边形和模型等）的一种数据语言，它以被Google Earth和Google Maps方便的识别并显示。现在很多便携式GPS设备和手机软件可以生成KML格式的路径文件，事实上已经成为了GPS设备的标准路径文件格式。
以下是一个KML文件的格式：




 zhanqiao.kml
 
 
 
  
   normal
   #sn_ylw-pushpin
  
  
   highlight
   #sh_ylw-pushpin
  
 
 
  zhanqiao
  
   120.3157798974425
   36.05886498176855
   0
   739.971375569545
   4.084272649574626e-011
   -0.1127864185136748
  
  #msn_ylw-pushpin
  
   120.3152418576393,36.05858830488904,0

其中包含主要的标签：Document，Document包含kml的文件信息和显示样式以及所有的地标点信息，每个地标信息对应一个Placemark标签。

KML中Placemark中主要标签的定义：
name 该地标名称
description 地标描述，支持HTML代码
LookAt 试图相关信息
styleUrl 样式
Point 地标点

查看演示>>

更具体的信息：http://www.step1.cn/googleapi/map/kml.htm

编程处理KML文件：

          //GGeoXml对象，处理KML文件
          var gXml = new GGeoXml("http://oncoding.net/demos/zhanqiao.kml");
          //将KML内容在地图上显示
          map.addOverlay(gXml);

后记

本节所有示例程序的压缩包可以在这里下载：http://code.google.com/p/apus/downloads/list 。注意要改成你自己的KEY，才能正常运行。

这篇文章其实是自己以前计划写的Google Maps API网站开发教程中的一节，后来因为种种原因，没能坚持吧教程写完。现在把这一节单独整理出来，作为一个Google Maps API的入门教程吧。

Javascript判断浏览器和操作系统类型：Ext中的最全面简洁方法

j5726 — Sun, 26 Apr 2009 13:37:04 +0000

前端开发中，经常需要判断浏览器或系统类型，以解决兼容性问题。

使用Javascript判断浏览器和操作系统类型是一件很容易的事情，但如何最全面、最简单的做出判断，是不容易的，Ext中的浏览器判断非常全面且简洁，包含了最新的IE8、Chrome浏览器、Air浏览的判断，下面是从Ext 2.2.1众摘录的代码，并添加了注释：

var ua = navigator.userAgent.toLowerCase();
var isStrict = document.compatMode == "CSS1Compat", // 是否定义DOCUMENT类型
    isOpera = ua.indexOf("opera")>-1, // 是Opera
    isChrome = ua.indexOf("chrome")>-1, //是Chrome
    isSafari = !isChrome&&(/webkit|khtml/).test(ua), //是Safari
    isSafari3 = isSafari&&ua.indexOf("webkit/5")! = -1, // Safari3
    isIE = !isOpera&&ua.indexOf("msie")>-1, //IE6
    isIE7 = !isOpera&&ua.indexOf("msie 7")>-1, // IE7
    isIE8 = !isOpera&&ua.indexOf("msie 8")>-1, //IE8
    isGecko = !isSafari&&!isChrome&&ua.indexOf("gecko")>-1, // Gecko内核
    isGecko3 = isGecko&&ua.indexOf("rv:1.9")>-1, // Gecko3内核
    isBorderBox = isIE&&!isStrict, // 使用盒模型
    isWindows = (ua.indexOf("windows")! = -1||ua.indexOf("win32")! = -1), // 是Windows系统
    isMac = (ua.indexOf("macintosh")! = -1||ua.indexOf("mac os x")! = -1), // 是MacOS系统
    isAir = (ua.indexOf("adobeair")! = -1), // 是用Adobe Air浏览
    isLinux = (ua.indexOf("linux")! = -1), // 是Linux系统
    isSecure = window.location.href.toLowerCase().indexOf("https") === 0;  // 是SSL浏览

使用JavaScript+CSS制作伸缩菜单

j5726 — Fri, 20 Mar 2009 12:12:16 +0000

演示地址：http://www.oncoding.cn/demos/jsmenu/index.html

前段时间项目里用到的，项目已经发布，今天整理一下发出来。

不用框架，纯JavaScript+CSS制作的二级伸缩菜单，简单易懂，具有很强的定制性和重复开发性。

页面调用方法：




  
  JavaScript可伸缩菜单 - Oncoding编码营原创
  
  

    .....
  

  
  
    
    
      业界资讯
      
        
        业界新闻
        技术动态
        八卦评论
      
     
     
     

       ....

     
     
     酷站

    ....

程序说明：

//在ID为“js_menu”的div内开始程序
function initMenu(){
      var pm_menu = new JSMenu("js_menu");
        pm_menu.init();
    }
//定义主函数
function JSMenu(id) {
    if (!document.getElementById || !document.getElementsByTagName)
        return false;
    this.menu = document.getElementById(id);
    this.submenus = this.menu.getElementsByTagName("div");
}
//引入函数，取得所有span
JSMenu.prototype.init = function() {
    var mainInstance = this;
    for (var i = 0; i < this.submenus.length; i++)
        this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
            mainInstance.toggleMenu(this.parentNode);
        };
    this.expandOne();
};
//展开含"current"的菜单
JSMenu.prototype.expandOne = function() {
    for (var i = 0; i < this.submenus.length; i++) {
        var links = this.submenus[i].getElementsByTagName("a");
        for (var j = 0; j < links.length; j++){
            if (links[j].className == "current")
            this.expandMenu(this.submenus[i]);
            }
        }
};
//变换菜单状态函数
JSMenu.prototype.toggleMenu = function(submenu) {
    if (submenu.className == "collapsed")
        this.expandMenu(submenu);
    else
        this.collapseMenu(submenu);
};
//展开所有菜单函数
JSMenu.prototype.expandMenu = function(submenu) {
    var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    var links = submenu.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++)
        fullHeight += links[i].offsetHeight;
    var moveBy = Math.round(5 * links.length);

    var mainInstance = this;
    var intId = setInterval(function() {
        var curHeight = submenu.offsetHeight;
        var newHeight = curHeight + moveBy;
        if (newHeight < fullHeight)
            submenu.style.height = newHeight + "px";
        else {
            clearInterval(intId);
            submenu.style.height = "";
            submenu.className = "";
        }
    }, 30);
    this.collapseOthers(submenu);
};
//折叠菜单函数
JSMenu.prototype.collapseMenu = function(submenu) {
    var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    var moveBy = Math.round(5 * submenu.getElementsByTagName("a").length);
    var mainInstance = this;
    var intId = setInterval(function() {
        var curHeight = submenu.offsetHeight;
        var newHeight = curHeight - moveBy;
        if (newHeight > minHeight)
            submenu.style.height = newHeight + "px";
        else {
            clearInterval(intId);
            submenu.style.height = "";
            submenu.className = "collapsed";
        }
    }, 30);
};
//折叠其他菜单函数
JSMenu.prototype.collapseOthers = function(submenu) {
        for (var i = 0; i < this.submenus.length; i++)
            if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
                this.collapseMenu(this.submenus[i]);
};

应该解释的比较清楚了，还有不明白的可以在下边问。

打包下载

幼学笔记原创内容，根据CC协议发布，欢迎具名转载。

幼学笔记 » JavaScript

“最被误解的语言”正焕发全新活力

可以在前端实现的几个地理位置小功能

1.通过IP获取用户位置

2.W3C共享位置接口

3. Google Gears 的 Geolocation API

4.逆经纬度解析

5.经纬度解析

6.google maps 图片接口

后记

JavaScript单元测试工具 — QUnit

什么是单元测试

为什么JavaScript需要单元测试

使用QUnit

QUnit example

测试示例

更多测试判断

相等判断equals( actual, expected, [message] )

相同判断(包含数组、对象等)same( actual, expected, [message] )

异步与Ajax

了解更多

哥写的不是程序，是寂寞

Javascript 最佳实践

简介

文章目录：

JavaScript程序执行顺序问题总结

1. 变量的声明和引用

2. 函数的声明和调用

3. 代码块及js文件的处理

4. 重复定义函数会覆盖前面的定义

5. body的onload函数与body内部函数的执行

6. JavaScript是多线程or单线程？

7. 回调函数

JavaScript中使用JSON

1. 将JSON字串解析为对象

2. 将JS对象转换为JSON字串

3. jQuery

4. JSON的汉字问题

5. 参考资料

Google Maps Api介绍与基础操作

一. 关于Google Maps Api

四. Google Maps Api基本功能

1.加载并显示地图

2.添加控件

3. 在地图上添加标注

4. 显示折线GPolyline、多边形GPolygon

5. 经纬度编码

五. Google Maps Api高级功能介绍

1.地址解析与逆地址解析

2. 本地搜索

3. 驾车路线：

4. 静态地图

5. KML

后记

Javascript判断浏览器和操作系统类型：Ext中的最全面简洁方法

使用JavaScript+CSS制作伸缩菜单