幼学笔记 http://www.oncoding.cn 追寻简单生活 Sun, 29 May 2011 14:03:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 小记JavaScript享元模式 http://www.oncoding.cn/2011/javascript-flyweight/ http://www.oncoding.cn/2011/javascript-flyweight/#comments Sun, 29 May 2011 12:18:19 +0000 j5726 http://www.oncoding.cn/?p=875 最下面是周五懒懒分享的PPT，不得不承认，强大如斯的keynote，也能让我做出这么丑的PPT。。

09年就买了《JavaScript设计模式》，前后看了几次（是“次”，不是“遍”），刚开始看没什么收获，后来随着编码经验、遇到的问题越来越多，看这本书也越来越觉得好。现在都快当成了工具书，遇到难题就去翻翻，常看常新。

设计模式是编码的最佳实践，它应用在两个层次：解决特定编码问题、设计程序架构。

简单记录一下“享元模式”及其在解决特定问题上的应用。

应用场景

1. 页面存在大量资源密集型对象；

2. 这些对象具备一定的共性，可以抽离出公用的操作和数据。

场景举例

例1. 倒计时

具备校准功能的倒计时组件，校准、定时操作耗费大量的系统资源。如果页面中存在多个倒计时对象，显然要考虑把校准、定时抽离出来，统一控制所有的实例对象。

例2. 弹层交互

页面中多处的按钮、链接、Ajax操作可能触发相同的弹层，虽然触发方式各异，但同时只存在一个弹层且样式相近。这时可以考虑把创造、弹出弹层的操作从各处抽离出来统一管理。

例3. 数据交互

页面存在多种类似的数据交互，每个交互作为独立的对象，可以把数据发送、接收、处理、显示等相同的操作抽离出来形成“享元”。

组成部分

“享元”：抽离出来的外部操作和数据；

“工厂”：创造对象的工厂；

“存储器”：存储实例对象的对象或数组，供“享元”来统一控制和管理。

关键

1. 合理划分内部和外部数据。

既要保持每个对象的模块性、保证享元的独立、可维护，又要尽可能多的抽离外部数据。

如何权衡？极限编程中有个YAGNI原则 —— you ain’t gonna need it，放在这里即是说，设计系统时，把精力放在最需要的地方，而忽略一些无关紧要的细节。一个优美的系统，完全可以遮盖其中一些小hack带来的瑕疵。不多说了，重在权衡。

2. 管理所有实例

既然抽离出了外部数据和操作，那享元就必须可以访问和控制实例对象。在JavaScript这种动态语言中，这个需求是很容易实现的：我们可以把工厂生产出的对象简单的扔在一个数组中。为每个对象设计暴露给外部的方法，便于享元优雅的控制。

3. 享元的职责开关

例如倒计时的享元，如果页面中所有的倒计时都跑完了，所有的对象都已停止工作，那显然享元不应继续做这些高能耗的工作。使用一个外部标记变量，每个对象起始时都来设置这个标记，享元则通过这个标记来决定是否继续进行例行工作。

优点

1. 将能耗大的操作抽离成一个，在资源密集型系统中，可大大减少资源和内存占用；

2. 职责封装，这些操作独立修改和维护；

缺点

1. 增加了实现复杂度。

将原本由一个工厂方法实现的功能，修改为了一个享元+一个工厂+一个存储器。

2. 对象数量少的情况，可能会增大系统开销。

原因同上，权衡参照优点1。

实现

下面是一个带校准功能的倒计时组件的基本代码结构，该学学画图了。。

Keynote

倒计时优化点滴

View more presentations from j5726.
]]> http://www.oncoding.cn/2011/javascript-flyweight/feed/ 12 HTML邮件编码禁忌 http://www.oncoding.cn/2010/email-coding/ http://www.oncoding.cn/2010/email-coding/#comments Mon, 08 Nov 2010 13:25:56 +0000 j5726 http://www.oncoding.cn/?p=860 今天做了两个HTML邮件模板，记录一下所得：

禁忌

1. 结构尽量简单，最好使用table布局

可以保证在CSS样式失效、或者html被禁用的情况下最大程度的还原布局和样式。

2. 不要使用<head>标签

一般会被过滤掉。

3. 不要使用JavaScript和Flash

正常情况下这个是绝对被过滤的。。

4. 使用内联CSS样式，不要引入外部CSS文件，不要使用<style>标签

Gmail等不支持style标签。

5. CSS禁忌：不要使用绝对定位，不要使用背景图片，不要使用半透明，不要使用IE滤镜和CSS表达式，不要使用CSS3属性……

6. 图片要添加alt属性，保证在禁用图片的情况下传递有效信息

7. 图片添加宽高属性

8. 不要试图使用iframe引入外部页面

9. 尽量精简代码，减少图片数量和体积

10. 一般使用UTF-8编码

邮件客户端/服务商对CSS支持情况

转自baidu，来源未知，未完全验证。（这么看好不方便，博客该改成宽版了。。）

参考

一篇不错的文章：http://www.docin.com/p-32193901.html

]]> http://www.oncoding.cn/2010/email-coding/feed/ 10 再探JavaScript单元测试 http://www.oncoding.cn/2010/javascript-unit-testing/ http://www.oncoding.cn/2010/javascript-unit-testing/#comments Fri, 22 Oct 2010 10:35:34 +0000 j5726 http://www.oncoding.cn/?p=854 javascript-unit-testing
View more presentations from j5726.

参考：

Understanding JavaScript Testing

Agile JavaScript Testing

JavaScript Unit Testing

]]> http://www.oncoding.cn/2010/javascript-unit-testing/feed/ 5 使用OpenCV开发iOS图像处理应用(To be continued..) http://www.oncoding.cn/2010/opencv-ios-programming/ http://www.oncoding.cn/2010/opencv-ios-programming/#comments Thu, 07 Oct 2010 14:25:59 +0000 j5726 http://www.oncoding.cn/?p=826 呃，OpenCV(中文)是Intel主导的开源图像处理函数库，基于C语言编写，是图像处理领域居家旅行必备、男女老少咸宜的开发库。

上学的时候用OpenCV做过图像处理方面的开发，现在刚接触iOS，了解了一下OpenCV在iOS平台的配置和开发方法，配置过程和遇到的问题简单做一下记录。

环境配置

OpenCV src

首先把最新版本的OpenCV代码下载或co到本地，比如我把OpenCV-2.1.0.tar.bz2解压到本地目录/work/src/OpenCV。

Xcode工程配置

拿来主义，国外有人制作了适用于iPhone和iPad的OpenCV的iOS接口，他们提供了两个工程，可以直接下载使用。打开iPhone工程OpenCV-iPhone.xcodeproj，首先要进行几步简单的设置：

1. SDK版本

作者提供的工程SDK版本可能和你开发环境的不同（我下载到的是基于4.0的），需要设置成你使用的SDK版本：在Groups&Files窗口的工程文件根目录右键-Get Info，在build栏的Base SDK一项中，改为你的SDK版本：

2. 链接标记 Other linker flags

本地的OpenCV库要链接进Xcode工程中，在Get Info的build项中，搜索 Other Linker Flags，添加相应的链接标记：

iPhone真机调试：
-lstdc++
-lz
“$(SRCROOT)/OpenCV/lib/iPhoneOS/lib/libcv.a”
“$(SRCROOT)/OpenCV/lib/iPhoneOS/lib/libcxcore.a”

模拟器调试：
-lstdc++
-lz
“$(SRCROOT)/OpenCV/lib/iPhoneSimulator/lib/libcv.a”
“$(SRCROOT)/OpenCV/lib/iPhoneSimulator/lib/libcxcore.a”

3. 头文件搜索路径 Header search paths

为方便的调用OpenCV头文件，要设置头文件搜索路径，同样在build项中搜索Header search paths，添加相应的内容：

iPhone真机调试：
“$(SRCROOT)/OpenCV/lib/iPhoneOS/include/opencv/”
“$(SRCROOT)/OpenCV/lib/iPhoneOS/include/”

模拟器调试：
“$(SRCROOT)/OpenCV/lib/iPhoneSimulator/include/opencv/”
“$(SRCROOT)/OpenCV/lib/iPhoneSimulator/include/”

4. Building OpenCV

有两种方式构建OpenCV，一种是转换到OpenCV target单独构建；一种是将OpenCV添加为主应用的依赖，构建主应用时一同构建。由于OpenCV的代码基本不需要修改，且构建进程很慢，所以建议对OpenCV进行单独构建。

在Groups & Files窗口中的Targets栏中，双击OpenCV，点击Build and Run进行编译。过程比较慢，一般会报几个error和warning，不过基本可以无视。

进行了这些设置之后，主应用基本就可以正常编译运行了：

编程范例

移植一个简单的OpenCV应用进Xcode中，对一张照片进行人脸识别，调用摄像头神马的，麻痹等买了授权能用真机调试再说吧。。

(To be continued..)

]]> http://www.oncoding.cn/2010/opencv-ios-programming/feed/ 4 “最被误解的语言”正焕发全新活力 http://www.oncoding.cn/2010/javascript-new-journey/ http://www.oncoding.cn/2010/javascript-new-journey/#comments Sat, 14 Aug 2010 15:10:00 +0000 j5726 http://www.oncoding.cn/?p=820

这些内容最早出自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存储数据。

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

]]> http://www.oncoding.cn/2010/javascript-new-journey/feed/ 8 IE6的position:fixed http://www.oncoding.cn/2010/ie6-position-fixed/ http://www.oncoding.cn/2010/ie6-position-fixed/#comments Wed, 30 Jun 2010 11:22:42 +0000 j5726 http://www.oncoding.cn/?p=813 手头一个项目中，要实现把一个浮层控制在浏览器窗口右下角，用”position:fixed”来控制最合适不过了。

但万恶的IE6不支持这个属性，之前采用过的方法有：将滚动条转移到body上，使用绝对定位控制浮层位置；使用JS实时判断滚动并设置浮层位置。

第一种方法局限性太大，页面中有其他绝对定位元素会受到影响；第二种方法需要在页面里加定时器，资源开销和时间成本都有点高。

后来在同事小卓的启发下，使用CSS表达式完成了IE6的兼容，代码如下：

_position:absolute;
_top:expression(document.documentElement.clientHeight - 213 + (e=document.documentElement.scrollTop) +'px');
/*
document.documentElement.clientHeight : 浏览器串口高度
200 : 浮层高度
(e=document.documentElement.scrollTop) : 滚动条高度
 */

CSS表达式虽然方便，但浏览器资源损耗仍然很大，要根据具体应用场合决定，“一切皆权衡”，哈～

]]> http://www.oncoding.cn/2010/ie6-position-fixed/feed/ 5 Google App Engine、Twitter API Proxy、Mixero搭建Twitter环境 http://www.oncoding.cn/2010/twitter-mixero/ http://www.oncoding.cn/2010/twitter-mixero/#comments Tue, 27 Apr 2010 06:37:03 +0000 j5726 http://www.oncoding.cn/?p=796 以前用Twitter都是通过代理访问网页或者使用第三方网站，今天安装了一个桌面客户端──Mixero，使用Google App Engine架设了一个Twitter API代理，就可以在桌面上随时看推发推了。网上一些假设教程不大准确或已过期，这里记录一下自己的操作过程。这些操作都是在MacOS下进行的，在Windows和Linux下也都类似。

Mixero

Mixero是一个优秀的Twitter客户端，基于Adobe Air，支持各种操作系统，并且有中文版本。

由于众所周知的原因，Mixero必须通过代理才能与Twitter连线，下面的繁琐的步骤都是拜GFW所赐，Let’s Fuck Them！

架设Twitter API Proxy服务

Twitter API Proxy即Twitter API代理，通过代理使用Twitter API，可以实现Twitter的绝大部分功能。我们使用一个基于Google App Engine的开源项目birdnest来假设代理服务。

1. 申请和创建Google App Engine项目

用Gmail帐号登录Google App Engine，通过手机验证后，点击“Create an Applacation”，根据提示创建一个应用。

2. 下载Google App Engine SDK

通过SDK，我们可以方便的修改、测试和上传GAE项目。下载地址为：http://code.google.com/p/googleappengine/downloads/list，选择适合你操作系统的SDK并安装。启动后应该是这个样子：

3. 下载和修改birdnest

birdnest的代码发布在Google code上，使用SVN检出代码，嫌麻烦的可以直接下载我打包的文件，解压到一个目录，可以跳到下一步了。

检出代码有两点需要注意：

  • 1. 需要检出branches/gae目录下的代码
  • 2. 目前最新的r102版本code.py有问题，需要检出r97版本

在终端下的操作代码为：

建立目录并检出代码：

# mkdir birdnest
# svn checkout http://birdnest.googlecode.com/svn/branches/gae birdnest/

# svn up -r 97 birdnest/code.py

4. 修改上传项目

打开birdnest目录，修改app.yaml文件，将第一行的nest改为你申请到的GAE项目ID。

打开刚才安装的GAE SDK，选择file-Add Existing Applacation，即导入存在的项目文件，选择刚才的birdnest目录。导入项目后，点击Deploy，填入Google帐号密码后，SDK就会将项目文件同步到GAE服务器。

5. 设置Mixero

现在需要做的工作就基本完成了，打开 http://你的ID.appspot.com/api/ 就应该看到了Twitter页面，如果不是，那就是有问题了。。

打开Mixero，填入帐号密码，点击右上角的齿轮，打开选项设置，在Twitter API一项中，填入上面的地址：

保存，刷新，就可以使用了。

最后，欢迎fo我：@j5726。

]]> http://www.oncoding.cn/2010/twitter-mixero/feed/ 21 我的淘宝花名 http://www.oncoding.cn/2010/my-new-name/ http://www.oncoding.cn/2010/my-new-name/#comments Sun, 25 Apr 2010 07:44:07 +0000 j5726 http://www.oncoding.cn/?p=786 很早就听说过淘宝的花名传统，阿里的一些牛人也顶着花名扬名立万。今天，我也在释然师兄的帮助下选取了自己的花名，过程有些遗憾，结果更多的是兴奋和期待。

一直以来都没有一个固定的网名，QQ上叫虫子，很多朋友叫我啊花，自己还常用j5726等。

接到淘宝的offer后，就开始考虑花名的事情。最先想到的是鱼同，《书剑恩仇录》中的余鱼同，是一个很纠结的人物，潇洒但专情、任性却正义。同《卧虎藏龙》中的玉娇龙一样，是一个有血有肉，让人又恨又爱的形象。很幸运，这个名字没有被占用，但又很不幸，系统中存在同音字，所以拼音ID冲突，不能使用。。

接下来，又让师兄帮忙试了我熟悉的几个人物，都被占用了。群里的朋友也帮着我出谋划策，结果一个个闪亮的名号都被无情的扼杀。

最后的最后，从系统推荐的名字中选了这个 ── 当当当当，“额台”！

速别额台，又称速不台，是成吉思汗时期蒙古的杰出军事家、战略家，曾攻陷莫斯科，占领匈牙利，戎马一生，直至老死在军营里。

八百年后的今天，在前端行业里也会出现这样一个“额台”，希望能像先人一样，矢志不渝，终生奋斗，在行业中留下自己的一笔。

以上自勉。

]]> http://www.oncoding.cn/2010/my-new-name/feed/ 16 豆瓣，可以成为值得我们尊敬的互联网公司吗？ http://www.oncoding.cn/2010/douban-respect/ http://www.oncoding.cn/2010/douban-respect/#comments Mon, 19 Apr 2010 04:59:37 +0000 j5726 http://www.oncoding.cn/?p=780 按照某种不成文的惯例，在开始之前，我不得不要再次论述一下 什么是豆瓣。当然，如果你自信足够了解，可以跳过下面的一小段引用文字。

豆瓣网成立于2005年3月26日，是一个典型的Web 2.0 网站。它提供社交服务和在线的音乐、书籍和电影数据库。在2008年，它拥有将近 1,200,000 名用户，并被  Alexa Internet 列入中国百家最受欢迎的网站之一（排名第74名）。  豆瓣允许用户为电影、图书和音乐评级。它的用户评选出的最受欢迎的图书常常被中国的一些顶尖媒体引用。

——引用自 kngine.com

一、写在前面

在众多的网络公司之中，大部分人都不得不提到其中一家最为著名、也是最为成功的公司—— Google 。没错，Google 作为最受欢迎的搜索引擎公司，它在其他领域的影响力也不可小视。当然，中国的互联网网站能够从它身上学到大量的东西。我个人认为， Google 成功的原因来自于以下三个方面：专注、开放、创新。

或许，各位会奇怪，这个被“腐女和 Gay 占领的网站”为什么更有可能变成一个让我们尊敬的公司，而不是那些家喻户晓的腾讯、新浪、搜狐等门户网站？下面，是我的理由。

二、理由

2.1 创新

或许，这个问题放在中国现在的互联网生态圈中是有些格格不入的。众所周知，国内的网站或多或少都“借鉴”（当然，也有抄袭，像××、×××、××××……）了国外网站的运营方式。然而，就豆瓣的创始人阿北所说，豆瓣网的整体创意是原创的，只是在界面、电子商务、SNS 三个方面借鉴了国外的网站。

说实话，我其实十分惊讶于阿北的坦诚。貌似现在已经很少有公司/网站愿意承认自己“借鉴”了其他的网站。

更难能可贵的是，从开始的创立豆瓣到后来的小组，乃至最近的豆瓣电台，豆瓣的创新的脚步似乎从来没有停止。

2.2 专注

或许，中国的互联网公司似乎都喜欢不断地向外延伸自己的服务范围。就像杀毒软件进军娱乐界，IM 服务供应商进军视频分享等等。我个人认为，大公司的扩张并不一定是盲目的，扩展服务范围的背后，一定代表着他已经有了成熟的运作模式或者很好的创意。但，如果一些小的公司也在不断扩张的话，结果就可能是被用户淘汰。毕竟，小公司的精力并不能和大公司相媲美，很多新兴的互联网公司似乎都有些缺乏必要的专注力——专注于用户体验和服务质量的提高上。

豆瓣服务的扩张则显得有些“缓慢”。因为，豆瓣的每一次扩张，都是建立在用户的意愿上。例如，豆瓣电影 的前身是一个名叫“我们都爱看电影”的小组。显然，这样的扩张看似缓慢，缺乏活力，但是，却能够充分保证用户能够得到始终如一的用户体验和服务质量。

2.3 开放

豆瓣的开放似乎来得有些晚（但也比那些有着将近10年历史，有着1亿用户的 IM 服务提供商死也不愿意第三方客户端登录它的服务好得多，不是吗？），但，豆瓣的开源的力度可能是最大的。

2007年，豆瓣正式开放 API

2009年，豆瓣正式以 New BSD 许可证开放了豆瓣的数据库—— BeansDB

豆瓣的这些动作，表现了作为一家互联网公司所具有的自信。（某 IM 公司会脸红吗） 我不知道互联网的未来是怎么样，但我知道，一项技术的开放，将推动该技术，甚至整个互联网，朝着更加完善、更加高效的方向发展。

三、结论

就像众多的互联网网站一样，豆瓣的成功也引来了诸多的模仿者，他们不断地仿照豆瓣的主页风格、排版布局，甚至，功能，但，这些网站就像众多的山寨网站一样，最终无法获得豆瓣用户的芳心。或许，豆瓣已经成为了许多人的一种生活方式，一种以更加轻松的方式和他人探讨自己感兴趣的话题的方式。

我想， 豆瓣完全有可能成为一家和 Google 一样被国人尊敬的公司。或许，它并没有和 Google 那样提倡言论的自由和信息的自由流动，但，它的创新，它的开放，它的专注，能够帮助它在中国这片神奇的土地上继续发展下去。

总有一天，我期待，看到豆瓣成长成为一家真正的值得我们敬重的互联网公司。

我期待，这一天的到来。

你呢？

* 此文系本人自己的观点，如果当中有任何措辞，甚至常识上的错误，请不吝赐教，万分感谢。

【参考的网站】

1. 草根创业者杨勃：玩出来的”豆瓣”网  www.douban.com/group/topic/1058164/

原文链接：http://www.techxav.cn/2010/04/18/can-douban-be-a-company-which-everyone-respects-for/
本文作者：@dunduncat

]]> http://www.oncoding.cn/2010/douban-respect/feed/ 6 小白磨合 － 求职这些天的所思所得 http://www.oncoding.cn/2010/hola-macbook/ http://www.oncoding.cn/2010/hola-macbook/#comments Mon, 12 Apr 2010 14:57:06 +0000 j5726 http://www.oncoding.cn/?p=770 终于娶回了梦寐以求的小白，用上了传说中程序员必用的MacOS。

好久没写东西了，打点字，顺带磨合一下新机器。

出来找工作好多天了，交流中、面试中遇到的很多问题都是自己从未考虑过的，从中想到了不少，学到了不少。

关于视野与极限

2月底，在Tinyfool的文章中看到一句话：

我研究自己发展的过程中的瓶颈的时候，发现一切瓶颈都不来自能力，都来自视野，来自于给自己设置的愚蠢的极限。

当时的我，正处在心理、生理状态接近崩溃的边缘，被工作和生活压抑的喘不过气来，看到这句话，突然觉得豁然开朗。但当时的我，过多的把原因归咎于公司、领导，认为是我所处的环境遮挡了我的视野，是我做的工作限制了我发挥出的极限。

不久之后便提交了辞职报告。从辞职那晚和Chaosconst的促膝长谈，到今天在异乡的漫漫求职，我逐渐意识到，自己之前做的太少，学的太少。视野，并不应该被地域，甚至一个公司所限制；极限，更不应是别人设定给你的，是需要自己去挑战。

无畏多源于无知，狂妄总伴随孤陋。

不过，还是庆幸我选择了这一步。否则，可能永远看不到差距，看不到自己的无知。出来的这些天，没怎么写代码，但是在终日的思索中，发现的我的错误，我的不足，和我的优势，我的资本，都是比任何专业技能都宝贵的收获。

关于博客

写博客的目的是什么？我觉得最重要的是总结回顾，其次才是分享交流。回头看看自己之前的博客文章，好像大多是为写博而写博，开发中遇到的困难、心得体会却很少去总结。后来再遇到，或者被问起同样的问题，就无法快速的找回答案。

实践中发现的问题、得到的经验，才是最宝贵、最值得记录的。

工作以来的收获和提高

经常有人问，参加工作到现在，同大学时期相比，你最大的收获和提高在哪里。

我认为最重要的一点，就是责任心。大学里，可能我们被设置的目标就是 ── 考试不挂科，平时不违纪。没人去逼你，没有指标去催你。而工作之后，我们被委派一个或大或小的任务，这个任务可能直接影响到一个项目、一个产品、甚至一个公司战略的结果，这时候，就必须具备独当一面的魄力，勇于承担责任的勇气。从学生到合格工程师的转变，关键应该就在这里。

其次，是分析、解决问题的能力。工作之后遇到很多没见过，或者找不到参照的新需求、新功能，如何去分析问题、解决问题，最终形成可用的产品，这应该是有经验的工程师与新手之间的最大差别所在。

然后，是对互联网、对互联网项目开发的了解和理解。工作之后加入到互联网开发团队里，参与大型互联网项目的开发。中间学到的技能，开拓的视野，自然和单兵作战、作坊开发大为不同。

现在想想2008年的我，在大学校园里，不知道自己会什么，该做什么，出路在哪里。而现在，虽然还有些焦虑和无奈，但已是踌躇满志，期待做出一份新的事业和成绩。

父母

面试中多次被问起，跑这么远来求职，有没有考虑过父母的担心和挂念。

是的，虽然爸妈一直说支持我的决定，支持我做自己喜欢的事。但是，从他们一遍遍的叮咛嘱咐和嘘寒问暖中，我总能感觉到他们的不舍。当他们同事朋友的孩子都回到父母身边接班，过起安闲适意的生活，我却辞去工作，跑到千里之外去追逐自己的梦想。

总觉得自己还年轻，青春可以肆意挥霍。那天却突然意识到，父母已经走过了一大半的人生，他们为我付出了大半生的心血，本该到了收获和享受的时间，我却仍无法给他们任何承诺。

我始终觉得，我走的路是没有错的，早晚我会成功，早晚父母会幸福。也许只有拾起斗志，加快步伐，早日做出成绩，才能尽早给他们回报和安慰吧。

To be continued…

]]> http://www.oncoding.cn/2010/hola-macbook/feed/ 9 可以在前端实现的几个地理位置小功能 http://www.oncoding.cn/2010/geo-location-frontend/ http://www.oncoding.cn/2010/geo-location-frontend/#comments Wed, 10 Mar 2010 16:09:55 +0000 j5726 http://www.oncoding.cn/?p=690 在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

用法：

<script type="text/javascript" charset="utf-8">
 function getPlaceFromFlickr(lat,lon,callback){
   // the YQL statement
   var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;

   // assembling the YQL webservice API
   var url = 'http://query.yahooapis.com/v1/public/yql?q='+
              encodeURIComponent(yql)+'&format=json&diagnostics='+
              'false&callback='+callback;

   // create a new script node and add it to the document
   var s = document.createElement('script');
   s.setAttribute('src',url);
   document.getElementsByTagName('head')[0].appendChild(s);
 };

 // callback in case there is a place found
 function output(o){
   if(typeof(o.query.results.places.place) != 'undefined'){
     alert(o.query.results.places.place.name);
   }
 }

 // call the function with my current lat/lon
 getPlaceFromFlickr(36.6692270,117.0198960,'output');
</script>

使用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=<em>你申请到的KEY</em>
&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

得到图片：

null

后记

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

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

]]> http://www.oncoding.cn/2010/geo-location-frontend/feed/ 12 TED2010：下一代的地图技术在微软而非Google http://www.oncoding.cn/2010/bing-map-niubility/ http://www.oncoding.cn/2010/bing-map-niubility/#comments Sun, 28 Feb 2010 14:16:25 +0000 j5726 http://www.oncoding.cn/?p=685

点击”View subtitles”可以显示中文字幕


TED2010上，来自微软的Blaise Aguera y Arcas展示了全新的结合虚拟现实体验的Bing地图技术，震撼了在场观众。如果你还在感慨Google街景，那么看看这个吧。看看他们怎么把流畅的街景技术和实时动态影像、天文景观结合在一起。让用户仿佛徜徉在异国他乡。街景也不再局限于街道，在一个小市场里，你可以看到你朋友拍得照片动态匹配到他曾经所看到的位置上。

看到他们的实时video，这种能够将影像和地图街景动态匹配的技术看起来非常炫，不知道多久会出现在Bing里面。

现在看来，整合了silverlight技术的Bing Map,将会对Google Maps最终形成非常大的挑战。

]]> http://www.oncoding.cn/2010/bing-map-niubility/feed/ 2 JavaScript单元测试工具 — QUnit http://www.oncoding.cn/2010/javascript-unit-testing-qunit/ http://www.oncoding.cn/2010/javascript-unit-testing-qunit/#comments Thu, 04 Feb 2010 04:32:47 +0000 j5726 http://www.oncoding.cn/?p=629 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命名必须依照如下形式，否则无法正常显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
  <h2 id="qunit-banner"></h2>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
</body>
</html>

测试示例

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

    //定义测试模块
    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"是一个数字');
//...

就可以看到爆红了。。

更多测试判断

除了ok()之外，QUnit还有如下几个判断函数：

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

示例：

  //定义一个简单的函数，返回数字和2的乘积
    function simpleTest1(para) {
      return para * 2;
    }
    //开始单元测试
    test('simpleTest1()', function() {
      //列举各种可能的情况
      equals(simpleTest1(2), 4, '2 * 2 等于 4');
      equals(simpleTest(2), 3, '2 * 2 等于 3');
    });

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

示例：

  //定义一个简单的函数，返回一个数组
    function simpleTest2() {
      return [1, 2];
    }
    //开始单元测试
    test('simpleTest2()', function() {
      //列举各种可能的情况
      equals(simpleTest2(), [1, 2], '函数返回数组[1, 2]');
      equals(simpleTest2(), [1, 1], '函数返回数组[1, 1]');
    });

same()和意思和equals()差不多，但same()可以判断数组、对象等的相同，而equals不能。

异步与Ajax

对于异步程序的测试，如setTimeout、setInterval、Ajax等情况，按照上面的方法，在异步调用执行之前，测试就已完成并输出了结果。这时，配合使用QUnit提供的两个函数：stop( [timeout] ) 和 start()，也可以轻松搞定。

直接看例子：

    //异步测试
    module( "异步测试示例" );
    //setTimeout
    test('asynchronous test', function() {
      // 暂停测试
      stop();

      setTimeout(function() {
        ok(true, '完成运行');
        //待测试完成后，恢复
        start();
      }, 100)
    })
    //另一种形式
    asyncTest('asynchronous test', function() {
      setTimeout(function() {
        ok(true);
        //待测试完成后，恢复
        start();
      }, 100)
    })

Ajax也是类似的道理：

    //Ajax测试
    function ajax(successCallback) {
      $.ajax({
        url: 'server.php',
        success: successCallback
      });
    }

    test('asynchronous test', function() {
      // 暂停测试
      stop();

      ajax(function() {
        // 异步调用判断
      })

      setTimeout(function() {
        //异步测试完成后，恢复
        start();
      }, 2000);
    })

了解更多

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

]]> http://www.oncoding.cn/2010/javascript-unit-testing-qunit/feed/ 12 中国工会网改版670万？国家队威武！ http://www.oncoding.cn/2010/670wcnm/ http://www.oncoding.cn/2010/670wcnm/#comments Wed, 20 Jan 2010 09:25:47 +0000 j5726 http://www.oncoding.cn/?p=617 一则消息

中华人民共和国财政部新发布了一条竞标公告：中国工会网扩建项目一期工程（网站改版、内容管理、站内检索、统计分析）成交结果公告TC099R72 ：

采购人名称：中国工会网络中心
采购项目名称：中国工会网扩建项目一期工程（网站改版、内容管理、站内检索、 统计分析）
招标编号：TC099R72
成交结果确定日期：2009年12月25日
成交金额：670万元
成交供应商名称：北京中软宏大信息技术有限公司
成交供应商地址：北京市海淀区学院南路55号中软大厦A座2层，10081

招标采购代理机构：中招国际招标有限公司
项目联系人：陆欣
电话：010-62108160

中招国际招标有限公司
2009年12月30日

那个数字一下子就揪住了我这IT民工的神经，网站改版、内容管理、站内检索、 统计分析。。这几个熟悉到白烂的字眼，第一次在我心中显得那么高大威猛。国家财务公开了，公开得我热泪盈眶。

我们来看看“中国工会网”

现在线上运行的中华全国总工会网站，备案号：京ICP备020034，使用jsp技术构建，技术服务支持：中科朗思、中软宏大。主要功能为新闻、公告发布，集成工作平台功能，集成邮件功能(使用Coremail邮件系统)。

网站功能确实比较简单，在firefox下还无法使用，这么烂的网站，确实需要改版，充分体现了党与时俱进的作风。改版招标情况进行全国公示，顺应民心，体现了我党公开公正的优秀品质。

但是，670万元的资金，要改成什么样子呢？公告里说的清楚：网站改版、内容管理、站内检索、 统计分析，这四个功能，不是任何一个CMS系统都具备的基本功能吗，这么点功能，一个兼职大学生，花一个月时间，给2000块钱就完全可以做出来嘛，这个”北京中软宏大信息技术有限公司“，莫非可以把这个小网站做出花来？

关于”北京中软宏大信息技术有限公司“

那我们就看看”北京中软宏大信息技术有限公司“的来头，有能力做670万的“大项目”的公司，其信息化建设自然应该非常牛B，就从他们的官方网站入手吧。

用firefox打开他们的网站，Oh My god！这是什么东西，乱成一团，完全不可用。哦，原来是IE Only的。。

中标单位网站在chrome，FF下完全乱码！！

一下子就可以看出这公司的水平了——初中生水平嘛。

是不是很不可思议？不过一看这公司名字的“中”字头，一切就都明白了——

有什么想不开的，想想你是在中国，就都想开了。。

]]> http://www.oncoding.cn/2010/670wcnm/feed/ 3 jQuery1.4下载、性能及新特性详解 http://www.oncoding.cn/2010/jquery-14-released/ http://www.oncoding.cn/2010/jquery-14-released/#comments Wed, 20 Jan 2010 02:02:44 +0000 j5726 http://www.oncoding.cn/?p=608 jQuery1.4正式版发布了，官方同步推出了The 14 Days of jQuery 网站，来介绍jQuery1.4的新特性和教程，其中有一篇文章详细介绍了jQuery1.4的新增功能，现转载其中文翻译如下：

原文：jQuery 1.4 Released

翻译：coolnalu

jQuery 1.4 发布啦

为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。

我要以个人的名义感谢 Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Kati?, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint。谢谢他们在修复BUG和完成这次发布上所做的工作。

下载(Downloading)

按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。

jQuery压缩 (23kb Gzipped)

jQuery常规 (154kb)

另外，Google也在他们的服务器上放置了一份jQuery的拷贝。这份拷贝会自动的最小化然后压缩 – 并且放在Google最快的缓存服务器上。

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。

就jQuery1.4来说，我们努力的减少大规模升级中的麻烦 – 通过保持所有public函数的签名。即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。

功能(新特性)Features

下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在jQuery 1.4 的文档里记录了。

热门方法经过了性能上的大”检修”

不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)

常用jQuery方法调用频率
View the cropped chart.

在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。

更易用的设置函数 (Easy Setter Functions)

算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

这样代码就可以这样写:

// 找出所有A标签里的'&amp;'字符，然后用一个span标签包围
$('a').html(function(i,html){
  return html.replace(/&amp;/gi,'&amp;');
});

// 给一些链接的title属性加些信息
$('a[target]').attr("title", function(i,title){
  return title + " (新窗口打开)";
});

Ajax

嵌套参数的序列化 (jQuery.param() 文档, Commit 1, Commit 2)

jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。
举例来说，
{foo: ["bar", "baz"]} 会被序列化为 “foo[]=bar&foo[]=baz”.

在jQuery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化为 “foo=bar&foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。(使用jQuery.ajaxSettings.traditional进行全局切换，或者根据情况单独切换。

总共有3种方式可以切换到旧的序列化方式:

// 全局改变序列化方式 (使用旧的)
jQuery.ajaxSettings.traditional = true;

// 指定情况使用旧的序列化方式
jQuery.param( stuff, true );

// 针对一个单独的Ajax请求使用旧的序列化方式
$.ajax({ data: stuff, traditional: true });

更多信息参见: jQuery.param() 文档, jQuery.ajax() 文档, Commit, Code

JSON和脚本类型通过”content-type”自动识别。 (jQuery.ajax 文档, Commit 1, Commit 2)

如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。另外，如果回复的媒体类型是 Javascript(application/javascript), dataType默认设为”script”(同样，如果dataType没有明确指明), 这种情况下，脚本会自动运行。

加入了Etag的支持 (jQuery.ajax() 文档, Commit)

默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。这样做是为了忽略浏览器的缓存。设置ifModified:true就可以使 jQuery使用可用的缓存。jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。

严格JSON模式，本地的JSON.parse方法 (jQuery.ajax() 文档, Commit 1, Commit 2, Commit 3)

jQuery 1.3和以前的版本曾使用Javascript的eval对引入的JSON解析。1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。它也会对引入的JSON进行校验。所以在jQuery.getJSON方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery会拒绝不合标准的JSON(例如{foo: "bar"})。

序列化HTML5的元素 (jQuery.param() 文档, Commit)

新的HTML5输入方法 (比如’datetime’和’range’)在序列化.serialize()一个表单的时候会被包括在内。

Ajax请求的环境 (jQuery.ajax() 文档, Commit)

你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        jQuery(this).addClass("done");
    }
});

请求成功回调函数的第三个参数会被设为原始的XHR对象 (jQuery.ajax() 文档, Commit)

所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。之前这个XHR对象只能通过$.ajax一类方法的返回值来获取。

明确设置”Content-Type” (jQuery.ajax() 文档, Commit)

在1.3版，如果没有实际数据发送，jQuery.ajax的contentType会被忽略。1.4版里，contentType将总是和请求一同发送。这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。

明确设置JSONP回调函数的名字 (jQuery.ajax 文档, Commit)

你可以使用jQuery.ajax()方法的jsonpCallback选项，通过名字来指定JSONP的回调函数。

防止启动前跨域XHR (Commit)

跨域Ajax(针对提供支持的浏览器)将更易用，因为默认设置下，启动前XHR被阻止了。(TODO)

jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器 (Commit)

使用”onreadystatechange”替换了轮流探询，Ajax请求现在将使用更少的资源

元素属性 (Attributes)

.css()和.attr() 的性能被优化了。

<.css().attr()的性能提高

.attr()方法多了一个设置函数作为参数 (.attr() 文档)

你不但可以将一个函数用在.attr()里，还可以在这个函数里使用属性的当前值。

jQuery('<img src="enter.png" alt="enter your name" />')
.attr("alt", function(index, value) {
    return "Please, " + value;
});

.val( Function ) (.val() 文档)

<input class="food" type='text' data-index="0" />
<input class="food" type='text' data-index="1" />

jQuery("input:text.food").hide();

jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>"

)
  .sortable()
  .bind("endsort", function() {
    $(":text.food").val(function() {
      return $("ul.sortable li:eq(" + $(this).attr("data-index")  + ")").text();
    });
  });

text和CDATAHTML元素也支持.text()方法了 (.text() 文档, Commit)

核心 (Core)

快捷元素创建 (jQuery() 文档, Commit)

现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:

jQuery("", {
    id: "foo",
    css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" },
    click: function() {
            $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。

(译注:譬如$("<a>link</a>", {css:{background:"#ccc"}});相当于$("<a>link</a>")).css("background", "#ccc");

.eq(-N), .get(-N) (负指数) (.eq() 文档, .get() 文档, Commit)

你现在可以在.get()和.eq()方法里使用负数。譬如，你要选择倒数第2个div元素，或者是倒数第2个DOM对象:

$("div").eq(-2);
$("div").get(-2);

新的.first()和.last()方法 (.first() 文档, .last() 文档, Commit)

方便起见, 新增的.first()和.last()方法等同于.eq(0)和.eq(-1).

新的.toArray()方法 (.toArray() 文档, Commit)

.get()方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用.toArray()来达到一样的效果。(译注:这里应该是为了以后的版本留出空间，譬如以后可能会加入.toList()方法，到时候就会易于区分。) 不过，和.get()不一样的是，.toArray()不接受参数。

jQuery()返回一个空集 (jQuery() 文档, Commit)

在jQuery 1.3中,jQuery()方法返回仅包括document的jQuery集合。这个可以用来创建一个空集，然后动态加入一些元素。注: jQuery().ready()方式在1.4中依然有效，但是被指示陈旧了。请使用jQuery(document).ready()或者jQuery(function(){})。

jQuery(“TAG”) (Element Selector 文档, Commit)

当使用单个标签名字的时候jQuery会使用更快捷的路径。

jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (jQuery() 文档, Commit)

现在这三个方法都使用同一个代码路径了(document.createElement), 来优化jQuery("<div></div>")的性能。注意，如果你指定了属性，将会使用浏览器本身的语法分析(通过设置innerHTML)。

样式 (CSS)

.css()方法在性能是以前的2倍。

.css()的性能提高

.addClass(), .removeClass(), 和 .hasClass()这几个方法在性能上是以前的3倍

addClass, removeClass, 和 hasClass的性能提高

.toggleClass()可以切换多个css类了 (.toggleClass() 文档, Commit)

你可以通过.toggleClass()调用多个css类的名字来切换他们。

$("div").toggleClass("current active");

数据

.data()返回对象, .data(Object)设置对象 (.data() 文档, Commit 1, Commit 2)

有时候你可能需要在一个元素上附加一个复杂的对象。一个常见的例子是你需要从一个元素身上复制所有的数据到令一个元素上。在jQuery 1.4里, 不使用任何参数调用.data()时，.data会返回一个复杂对象。(译注: 包含所有键-值对的对象。) 调用.data(Object) 则会设置这个对象。注意这个对象还包括了元素上绑定的事件，所以用的时候要小心。

除非需要, 不然不会创建数据缓存。 (Commit 1, Commit 2, Commit 3)

jQuery使用一个独特的自定义属性来获取特定元素上附加的数据。当查找数据，但是没有新加的数据的时候，jQuery会尽量避免创建这个自定义属性。这样可能会提高性能，同时还会在这种情况下避免污染DOM。

效果 (Effects)

单个属性缓进缓出 (Per-property Easing 文档, Commit)

除了能够给一个动态效果指定缓进出函数外，你现在可以指定每个属性的缓进出函数了。James Padolsey的blog上有更进一步的信息和演示。

$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("&lt;div&gt;Animation complete.&lt;/div&gt;");
  });
});

事件 (Events)

新方法: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2)

如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用jQuery.proxy获得一个相同作用域的函数。

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

多个事件绑定 (.bind() 文档)

你可以通过递入一个对象来一次性绑定元素的多个事件。

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

‘change’和’submit’事件规范化 (Change 文档, Submit 文档)

普通的或是即时的change和submit事件可以在各种浏览器上稳定工作了。我们覆盖了IE里的change和submit, 替换为与其他浏览器相同的事件。

新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文档, .focusout() 文档, Commit)

focusin和focusout在一般情况下等同于focus和blur, 但是多了向父元素传递的作用。如果你自己编写你的事件代理模式(TODO), 这个功能将对你有很大帮助。请注意对focus和blur使用live()方法将不会起作用; 在设计的时候我们根据 DOM事件规范决定不使其向父元素传递事件。

$("form").focusout(function(event) {
    var tgt = event.target;
    if (tgt.nodeName == "INPUT" &amp;&amp; !tgt.value) {
        $(tgt).after("nothing here");
    }
});

所有的事件都可以成为即时事件 (.live() 文档)

除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用.bind()绑定的事件都可以成为即时事件。

在live()所支持的事件里，我们对能够支持下面这几个额外的事件感到尤其骄傲。通过.live()里的事件代理, 1.4版实现了对change, submit, focusin, focusout, mouseenter, 以及mouseleave事件的跨浏览器支持。

注: 如果你需要即时的focus事件，你应该用focusin和focusout, 而不要用focus和blur, 因为就像前面提到的, focus和blur不向上传递。

还有, live()也接受数据对象作为参数了, 同bind()方法一样 (Commit)

live/die也支持环境变量了 (Commit)

现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。

确定ready事件至少含有body元素 (Commit)

jQuery现在会检查body是不是存在，如果不存在，会对body进行轮流探询。

在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。 (Commit)

DOM操作 (Manipulation)

在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。

.append(), .prepend(), .before(), and .after()的性能提高了。

DOM嵌入的性能提高

.html()的性能提高到以前的3倍。

.html()的性能提高

.remove()和.empty()的速度则达到以前的4倍.

.remove() 和 .empty()的性能提高

新方法: .detach() (.detach() 文档, Commit)

detach()将一个元素从DOM里移除, 但是并不卸载关联的事件处理函数。这个方法可用于暂时性的将一个元素移除，执行相关操作，然后返回。

var foo = $("#foo").click(function() {
    // 相关操作
});
foo.detach();
// foo保留了相关处理函数
foo.appendTo("body");

新的unwrap()方法 (documentation, commit)

unwrap()方法拿到一个已知的父元素的子元素，然后将父元素用子元素替换。(译注: 将子元素从”包裹”里拿出来, 因名unwrap)。如此这般:

<body>
    <div>
        <p>annie</p> <p>davey</p> <p>stevie</p>
    </div>
</body>

$('div').unwrap();

<body>
   <p>annie</p> <p>davey</p> <p>stevie</p>
</body>

domManip方法里的缓存 (commit)

jQuery会将jQuery("<div>")和.after("<div>")一类方法创建的节点记入缓存。这样, 对于利用这些方法, 使用字符串进行DOM操作的页面，性能将有极大的提高。

无连接的节点间的before, after, replaceWith操作 (commit)

现在你可以对还没有放置到DOM Tree上的节点进行before, after, 和replaceWith的操作了。意味着你可以先对节点进行复杂的操作, 待完成后再放到合适的DOM位置上。这样也能尽量避免操作过程中造成重新排版。

jQuery("<div>").before("<p>Hello</p>").appendTo("body")

.clone(true) 也会复制关联数据 (clone 文档, commit)

1.3版中, .clone(true)虽然也是深度复制, 但是没有复制关联的数据。1.4版里，它则会复制数据, 同时还包括所有的事件。这点上和jQuery.extend在语义想同的, 所以普通对象和阵列会被复制, 但是自定义的对象则不会。

位移 (Offset)

.offset( coords | Function ) (.offset() 文档, commit)

现在可以设置元素的位移了! 和所有的设置函数一样, offset也可以接受一个函数作为第二个参数。

队列 (Queueing)

队列经历了一次大修, 使用队列会比使用默认的fx更易掌握。

新的 .delay() 方法 (.delay() 文档, commit)

.delay()方法会根据参数滞后若干毫秒执行队列里剩下的对象。默认的它会使用”fx”队列。但你可以选择性的通过delay方法的第二个参数选择其他队列。(译注:每个队列都以一个名字识别。)

$("div").fadeIn().delay(4000).fadeOut();

队列里的next (.queue() 文档, commit)

jQuery 1.4版里, 当队列里的一个函数被调用的时候，第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。

jQuery("div").queue("ajax", function(next) {
  var self = this;
  jQuery.getJSON("/update", function(json) {
    $(self).html(json.text);
    next();
  };
}).queue("ajax", function() {
  $(this).fadeIn();
});

.clearQueue() (clearQueue 文档, commit)

队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用.clearQueue()方法将会清空默认的”fx”队列。

选择符 (Selectors)

“#id p”效率更高 (commit)

所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。

页面遍访 (Traversing)

.index(), .index(String) (index 文档, commit)

.index() 方法经过重写, 变得更加直观和灵活。

你可以获得一个元素相对于同父元素的指数:

// 计算第一个 &lt;li&gt; 元素在它所有的同父元素中的指数:
$("li.current").index()

你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定:

// 计算这个 &lt;h3 id="more-info"&gt; 元素在页面上所有 &lt;h3&gt; 元素里的指数:
$("#more-info").index("h3")

新的.has()方法 (has 文档, commit)

这个方法相当于选择符里的:has()过滤法。它拿到一个jQuery集合,返回含有指定选择符的元素。

新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法 (.nextUntil() 文档, .prevUntil() 文档, .parentsUntil() 文档, commit)

新的”until”方法类似于.nextAll(), .prevAll(), 和.parents()。区别是可以用一个选择符来停止元素探索。

.add(String, Element) (.add() 文档, commit)

可以给.add()方法指定环境了。这个功能可以用于在一个调用链中加入和操作额外元素(比如Ajax请求里返回的新元素)。

.closest(filter, DOMElement) (.closest() 文档, commit)

可以通过closest方法的第2个参数设置一个DOMElement环境。给closest设置一个环境一般能够提高这个方法的运行速度。这个优化也适用live(), 因为这个方法内部调用了closest()。

常用工具 (Utilities)

jQuery.isEmptyObject() (jQuery.isEmptyObject() 文档, commit)

如果对象,em>没有任何属性, 该方法将返回true。jQuery.isEmptyObject()方法不对参数进行任何检查, 所以请保证参数是一个对象。

jQuery.isPlainObject() (jQuery.isPlainObject(), commit )

如果一个对象是通过字符创建的(译注:{}),jQuery.isPlainObject()返回true; 如果对象是其他类别的对象(译注:如new Object())或者是基本类型, 则返回false。

jQuery.contains() (jQuery.contains() 文档, commit)

如果两个参数都是DOM节点，并且第二个节点是嵌套在第一个节点内部的话, jQuery.contains()返回true。反之返回false。

jQuery.noop (jQuery.noop() 文档, commit)

是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。)

jQuery.unique() (jQuery.unique() 文档)

jQuery 1.4版中, jQuery.unique()方法返回结果里的元素是按照他们在页面里的顺序排序的。由于在创建jQuery集合的时候jQuery使用jQuery.unique()方法, 所以jQuery方法返回的集合也是按照他们在页面里的顺序排列的。

其他 (Miscellaneous)

jQuery.browser以浏览器引擎为中心 (jQuery.browser 文档, commit)

例如, 你可以通过jQuery.browser.webkit探测引擎是否是Webkit。

改进了对applets的处理 (commit 1, commit 2)

jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。

不再使用arguments.callee (commit)

为了顺应Caja的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到arguments.callee的代码都移除了。

用Closure Compiler替换了YUI Min (commit)

内部重组 (Internal Reorganization)

在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。

下面是一些主要的变化:

旧的’core.js’文件被分成了’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.

ready事件被移入了’core.js’ (因为它是jQuery的一个基本组成之一)。

大部分核心代码都符合新的代码规范.

css和属性的逻辑被划分开来, 不再如以往相互缠绕。

测试 (Testing)

jQuery 1.4版发布过程中我们修复了207个问题 (比较之下1.3版里有97个修复)。

jQuery 1.4.此外, 测试的数量从jQuery 1.3.2中的1504例升到了1.4中的3060例。

所有测试都在主要浏览器里完全通过了。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7,
IE 8, Opera 10.10, and Chrome)

jQuery 1.4 测试结果

我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 – 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。

.add()不再简单的将结果串联到一起, 结果将会被混合到一起, 然后根据他们在页面里的顺序排列。

.clone(true)将复制事件和数据, 而不仅是事件。

jQuery.data(elem) 不再返回id, 取而代之的是元素的对象缓存。

jQuery() (无参数) 不再自动转换成jQuery(document)了。

通过.val(“…”)获得一个option或一个checkbox的值不再有歧义(将总是根据value属性选择, 而不是根据text的值)。(Commit)

jQuery.browser.version现在将返回引擎的版本.

现在起将对引入的JSON更严格, 如果JSON的格式不符将会报错。如果你需要对不符合JSON严格格式的Javascript进行估值, 你必须设置请求的文件类型为纯文本, 然后用eval()来对内容估值。

参数序列化默认会按照PHP/Rails的风格进行。你可以通过jQuery.ajaxSettings.traditional = true;来切换到旧的序列化方式。你也可以针对个别请求进行切换, 在调用jQuery.ajax的时候递入{traditional: true}

内部的jQuery.className被移除了。

jQuery.extend(true, …)不再扩展复杂对象或是阵列。(TODO)

如果一个Ajax请求没有指定dataType, 而返回的数据类型是”text/javascript”, 那么回复将会被执行。之前, 必须明确的指定dataType。

设置Ajax 请求的”ifModified”属性会将ETags纳入考虑。

我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的插件。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。

如何使用这个插件:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery.compat-1.3.js"></script>

原始数据和测试页面

性能测试中我们使用了下列测试套包:

Attributes

Class

DOM Manipulation

Empty/Remove

Function Call Profiling: 1.3.2 1.4.

结果的原始数据 (所有的数据都是 1.3.2 vs. 1.4):

函数调用的次数
547 3
760 3
500 200
896 399
23909 299
307 118
28955 100
28648 201
1662 593

DOM嵌入
558 317
1079 624
1079 516
1155 829
436 332
196 194
243 169

HTML
116 46
281 78
313 78
234 63
134 43
43 42
91 27

CSS/属性
703 370
1780 1250
1765 1250
1157 749
629 498
346 184
333 161

CSS
114 52
203 93
118 93
109 47
116 54
58 24
54 22

CSS类
553 138
1578 546
1515 501
1033 327
769 298
229 80
173 41

移除/清空
3298 286
9030 2344
7921 1703
5282 1266
2898 303
1166 140
1034 122

]]> http://www.oncoding.cn/2010/jquery-14-released/feed/ 0 google的声明，谷歌百度解禁，白宫表态，接下来会发生什么？ http://www.oncoding.cn/2010/what-happend-to-china/ http://www.oncoding.cn/2010/what-happend-to-china/#comments Wed, 13 Jan 2010 11:45:59 +0000 j5726 http://www.oncoding.cn/?p=571 继1月12日百度被黑长达半天之后，今天互联网爆出了更重磅的新闻：google官方博客宣布有意关闭google.cn及谷歌中国办公室。

这一消息立即引起了轩然大波，互联网上弥漫着一股哀伤与低迷的氛围。

而接下来发生的一系列事情，让人不禁开始绷紧神经，不禁要问：百度和谷歌究竟发生了什么？中国政府到底想干什么？事态究竟将怎样发展？

本文只搜集看到的、听到的一些消息，不发布个人意见。

Google 官方博客声明

Google官方博客于美国时间12日进行了更新(需翻墙查看)：A new approach to China ，文章详细的描述了来自中国大陆的攻击行为，以及政府对信息的封锁。

查看附件声明译文

据说谷歌中国全体员工组织观看阿凡达，吃散伙饭，看来谷歌离开已成定局：

今天谷歌搜索开始部分解除内容过滤：

同时百度也几乎完全解除了过滤，搜索结果令人及其心神不宁：

不过截止发稿时，百度已经重新封锁了这类敏感词的搜索。

今天下午，twitter、youtube等短时解封

据网友称，1月13日下午18点左右，原先墙外的twitter、youtube等网站短时可以访问，但到了19：00，这几个网站已再次被墙。

更令人寻味的是，美国国务卿克林顿在白宫网站上发表了这样一条声明：

外交部发言人姜瑜：“如果没有中国政府的积极培育，中国的互联网不可能如此迅速地发展……任何国家都对互联网实行依法管理”

人民网北京1月14日电　据外交部网站消息，13日外交部发言人姜瑜举行例行记者会。

会上有记者问：“大赦国际”称，北京奥运会期间该组织的网站在中国境内曾被解封，但最近又被屏蔽。中方对此有何评论？

姜瑜回答说，中国政府对互联网实行积极开放和依法管理的政策，我们的互联网政策符合国际通行作法。目前，中国的互联网网站数量多达210万个，网民超过3亿，中国已成为网民数量最多的国家。如果没有中国政府的积极培育，中国的互联网不可能如此迅速地发展。

姜瑜强调，任何国家都对互联网实行依法管理。根据中国的法律，不能通过互联网传播违反法律的信息，如宣传邪教、鼓吹国家分裂等，“我想大家对这一点是清楚的。”

来源：外交部姜瑜：不能通过互联网传播违反法律的信息

百度首席产品设计师孙云丰表态：Google是市侩分子，对此感到恶心

孙云丰于13日下午1时20分，在CSDN博客上的博文(后被百度直接要求CSDN删帖)：

google宣称要退出中国，所证明的，恰恰不是市面上的那些g粉所宣称的那样，google是个人权斗士，而刚好反了过来，正好证明google是个市侩分子。
google 的首席法律顾问的调调让我感到恶心。因经济利益退出，就直白白的说好了，把自己涂脂抹粉一番，还煞有介事的提到google被中国人攻击，中国异议分子的 Gmail信箱被攻击，把这些事情作为退出中国的铺垫，这种论调是侮辱中国普通老百姓的智商，但还真有可能迎合那帮目空一切，但从未到过中国、对中国没有丝毫了解，却又喜欢对中国说三道四的西方人的假想。

只提一个假设，如果谷歌占据了中国80%的搜索市场份额，google的高管，还会这么高调的宣称要do no evil，从中国退出吗？

整个事情给我的唯一感受，就是恶心。
————–
以上是作为一个曾经的忠实google用户而说的，和百度无关。市面上沾沾自喜于了解一点google的产品技术细节将google奉为道德楷模而自封G粉的兄弟，请勿跟帖瞎喷，你们根本不懂什么叫搜索引擎，什么叫自由人权。

来源：http://blog.xiqiao.info/2010/01/13/624

1月19日最新消息：谷歌中国内部混入内奸？

昨天路透社发布新闻： Google probing possible inside help on attack，称谷歌中国内部人士将google代码泄露了出去，造成了google此次的大范围被攻击事件。

然而，公司中出现商业或技术间谍是很常见的事情，为什么google此次却要如此大动肝火呢？一位自称谷歌中国员工的豆瓣网友进行了解释：google事件真相。

谷歌宣布谷歌中国“恢复正常运转”，刘允、杨文洛发文“澄清不实的传言”

2010年1月19日下午，谷歌中国在其官方博客中澄清了有关谷歌中国关闭的传言。谷歌全球副总裁刘允和谷歌中国工程研究总经理杨文洛在日志中称，谷歌中国的员工同过去一样在办公室正常工作。

谷歌中国在博客中称，“过去几天，我们看到有很多关于谷歌中国以及谷歌员工的不真实的传言，一些报道称我们已经关闭了在中国的办公室，还有一些报道称我们在中国的员工已经接到通知将于近期离职。这些都是不真实的。目前，谷歌中国的员工同过去一样在办公室正常工作。”

一位接近谷歌的人士昨天向记者表示，谷歌中国的办公室已经恢复办公，从13日上午就无法登录的内部网站和全球数据库也开始恢复正常使用。

美国国务卿希拉里发表Internet Freedom(互联网自由)演讲

美国国务卿希拉里·克林顿于21日发表了一份互联网政策讲话——Internet Freedom，阐述了美国政府应对网络时代的战略方针，其中多次提及了中国的互联网封锁及google事件。

英文原文：

http://www.foreignpolicy.com/articles/2010/01/21/internet_freedom?page=0

演讲中文翻译见：

http://www.america.gov/st/democracyhr-chinese/2010/January/20100121212440eaifas0.9105341.html?CP.rss=true&utm_source=twitterfeed&utm_medium=twitter

事态会怎样发展，本博将继续关注..

附：Google官方博客的译文

来源：http://gb.hrichina.org/gate/gb?url=big5.hrichina.org/public/contents/18135

谷歌声明：重新考虑在中国的做法

中国人权的中文译本

象许多其它着名的组织一样，我们经常面临不同程度的网络攻击。12月中旬，我们监测到一起针对我们公司基础设施的非常复杂且具高度针对性的攻击。这一攻击来自中国，并导致谷歌知识产权被窃。尽管最初在表面上这只是一起单纯的安全事件，但很快就表明这显然是一起严重的事件。

首先，这次攻击不仅是针对谷歌。作为我们调查的一部分，我们发现，至少有其它20家涉及许多行业领域的大公司，包括互联网、金融、技术、媒体和化工等，也成为类似的攻击对象。我们目前正通知这些公司，并与美国有关当局合作。

第二，我们有证据表明，攻击者的主要目标是中国从事人权活动人士的Gmail帐户。根据我们最新的调查，我们相信他们的攻击目标并未实现。只有两个Gmail帐户被侵入，但仅限於帐户信息（如帐户创建日期）和邮件主题，并没有进入邮件内容。

第三，作为这项调查的一部分（并不仅限於对攻击谷歌的调查），我们发现几十个在中国从事人权活动的Gmail用户，其账户设在美国、中国和欧洲，显示出经常被第三方侵入。这些账户不是由於谷歌的安全漏洞而被侵入的，而最有可能的是通过网络诈骗或安装在用户电脑上的恶意软件所为。

我们已经使用从攻击得到的信息去改善谷歌的基础设施和架构，提高谷歌自身和用户的安全性。在个人用户方面，我们建议在电脑上安装可靠的反病毒和反间谍软件程序，为操作系统安装补丁，并更新网络浏览器。在点击即时信息和电子邮件中的链接时，或在网上被要求分享个人信息如密码时，一定要格外小心。你可以点击这里，阅读更多关於我们的网络安全的建议。有兴趣了解这类黑客攻击的人们可以阅读美国政府的报告（PDF格式），纳尔特·维伦纽夫的博客（Nart Villeneuve’s blog）和对GhostNet间谍事件的介绍。

对这些攻击，我们已采取了非常措施来与广大读者分享信息，这不只是因为我们发现其对安全和人权的影响，还因为这些信息与一个更大的关於言论自由的全球性辩论的核心相联系。在过去20年里，中国的经济改革计划和其公民的创业精神已经使亿万中国人脱离了贫困。事实上，这个伟大的国家，正处於当今世界许多经济进步和发展的中心。

2006年我们推出谷歌中国，就是基於这样的信念，让中国人民获得更多信息渠道的好处以及一个更为开放的互联网，这比我们当初并不愉快地同意过滤搜索结果更为重要。当时我们说得很清楚：“我们将仔细监督在中国运营的环境，包括新的法律和其它对我们提供服务的限制。如果确定我们不能达到预定的目标，我们将会毫不犹豫地重新考虑我们在中国的做法。”

这些攻击和监视—结合着去年进一步对网络言论自由的限制—已经使我们得出结论，我们应该审视我们在中国商业运作的可行性。我们已决定，我们将不会再继续过滤我们在谷歌中国上的搜索结果，未来几个星期我们将同中国政府讨论我们在法律范围内是否有可能进行不经过滤的搜索引擎运作的基础。我们知道这可能意味着必须（关系）关闭谷歌中国，以及我们在中国的机构。

做出审议我们在中国商业运作的决定是非常困难的，我们知道，这可能会产生深远的后果。我们希望明确一点，这一决定是我们在美国的主管做出的，我们在中国的雇员并不了解或介入其中，他们的极其努力的工作才（是）使谷歌中国有了今天的成功。我们保证通过负责任的工作来解决出现的非常困难的问题。

谷歌高级副总裁、公司发展和法律主管 大卫•德鲁蒙德
2010年1月12日

]]> http://www.oncoding.cn/2010/what-happend-to-china/feed/ 5 百度被黑深层分析 http://www.oncoding.cn/2010/baidu-cracked/ http://www.oncoding.cn/2010/baidu-cracked/#comments Tue, 12 Jan 2010 04:14:16 +0000 j5726 http://www.oncoding.cn/?p=561 扯淡分析

1. 百度被黑的真正原因是：伊朗圣战军的新任领袖阿卜杜.阿卜杜拉（abaidu.abaidula)看百度不爽，犯了名讳：） -_-!

2. abaidu.abaidula在GOOGLE上搜“SB”搜到自己的名字一下就怒了于是黑了百度 -_-!

3. 政治抗议只是表面原因，其实——由于米国的军事打击威胁，伊朗人准备大批量购买火箭筒，于是来百度搜索，但是遭遇百度的竞价排名，伊朗人选购了搜索结果排名第一位的火箭筒，到手之后发现上当。伊朗人气不过，遂黑了百度 -_-!

4. 国内互联网形势风起云涌，百度忙于公关打理，忘了域名续费 -_-!

5. 因为李彦宏不信春哥，百度未能满状态原地复活。。-_-!

阴谋论分析

6. 据称此次伊朗网军所用标志与之前不符，有可能是天朝欲出兵Irac，正在为师出有名制造舆论氛围。

7. “有关部门”发布紧急通知：为防止事态进一步扩大，决定切断中美、中欧通信光缆，开通时间另行通知。。

8. 伊朗网络部队搞毕业考试，把国内网站黑了给结业证，把外国网站黑了给毕业证，把百度黑了给毕业证+推荐工作（google赞助）。。。

天朝逻辑分析

9. CCAV报道：百度今晨被黑，山西一大学生火线举报伊朗网络军，声称此举令其心神不宁。

10. 百度称，由于www.baidu.com的域名在美国域名注册商处被非法篡改，导致www.baidu.com不能被正常访问，百度公司有关部门正在积极处理。这时工信部应该站出来，批判一下国外的域名注册商多么不靠谱——想稳定，还得用.cn！

11. 百度被黑，真理部出面宣称对此事不负责，云山同志火线电话李彦宏总：“你丫放心，这是伊朗人干的，不是我们”。外交部紧急召开发布会，秦刚严厉谴责伊朗网络军玩过界，挑战中国作为互联网封锁第一大国的权威。

]]> http://www.oncoding.cn/2010/baidu-cracked/feed/ 1 团队内分享：总结2009，展望2010 http://www.oncoding.cn/2010/hello2010/ http://www.oncoding.cn/2010/hello2010/#comments Mon, 11 Jan 2010 14:29:43 +0000 j5726 http://www.oncoding.cn/?p=763 有幸在2010年第一次团队会议上作了一次分享，总结了2009年前端界和普加前端发生的事情，对2010年的发展作了一些展望。

View more presentations from guestc94918.

slideshare处理后版面产生了些问题，不过不影响阅读，不再作调整了。

]]> http://www.oncoding.cn/2010/hello2010/feed/ 0 使用框架的最高境界是忘掉框架，而不是依赖甚至依附框架 http://www.oncoding.cn/2010/uselesswork-with-framework/ http://www.oncoding.cn/2010/uselesswork-with-framework/#comments Wed, 06 Jan 2010 15:27:20 +0000 j5726 http://www.oncoding.cn/?p=557 张三丰一路剑法使完，竟无一人喝彩，各人竟皆诧异：“这等慢吞吞、软绵绵的剑法，如何能用来对敌过招？”转念又想：“料来张真人有意放慢了招数，好让他瞧得明白。”

只听张三丰问道：“孩儿，你看清楚了没有？”张无忌道：“看清楚了。”张三丰道：“都记得了没有？”张无忌道：“已忘记了一小半。”张三丰道：“好，那也难为了你。你自己去想想罢。”张无忌低头默想。过了一会，张三丰问道：“现下怎样了？”张无忌道：“已忘记了一大半。”

周颠失声叫道：“糟糕！越来越忘记得多了。张真人，你这路剑法是很深奥，看一遍怎能记得？请你再使一遍给我们教主瞧瞧罢。”张三丰微笑道：“好，我再使一遍。”提剑出招，演将起来。众人只看了数招，心下大奇，原来第二次所使，和第一次使的竟然没一招相同。周颠叫道：“糟糕，糟糕！这可更加叫人胡涂啦。”张三丰画剑成圈，问道：“孩儿，怎样啦？”张无忌道：“还有三招没忘记。”张三丰点点头，放剑归座。张无忌在殿上缓缓踱了一个圈子，沉思半晌，又缓缓踱了半个圈子，抬起头来，满脸喜色，叫道：“这我可全忘了，忘得乾乾净净的了。”张三丰道：“不坏，不坏！忘得真快，你这就请八臂神剑指教罢！”

]]> http://www.oncoding.cn/2010/uselesswork-with-framework/feed/ 1 寻根究底：Ajax请求的GET与POST方式比较 http://www.oncoding.cn/2009/ajax-get-post/ http://www.oncoding.cn/2009/ajax-get-post/#comments Wed, 30 Dec 2009 13:38:05 +0000 j5726 http://www.oncoding.cn/?p=480 YSlow里有一条规则叫Use GET for AJAX requests，即“使用GET方式请求AJAX”，YSlow中的解释如下：

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

翻译：

当使用XMLHttpRequest对象时，浏览器通过两个步骤实现POST：(1)发送请求头；(2)发送数据。而GET的请求头和数据是一起发送的(除非包含很多cookie)，所以使用GET方式更好些。IE支持的最大URL长度是2KB，所以你的数据很长的话就不能用GET了。

这段话蜻蜓点水，只说了GET和POST的这两个差别，而实际使用中会是这么简单吗？

寻根：GET与POST的差别

RFC2616中详细定义和解释了GET和POST，简单来说，GET和POST的根本区别如下：

GET通过URL传递参数(以本文的动态地址 http://www.oncoding.cn/?p=480 为例)，同时发送请求头，从服务器取得数据：

GET /?p=480 HTTP/1.1

Host: www.oncoding.cn

Mozilla/5.0

….

POST也需要URL和请求头，同时需要额外发送数据到服务器，然后取得服务器响应，其数据格式如下：

POST /wp-login.php HTTP/1.1

Host: www.oncoding.cn

User-Agent: Mozilla/5.0

….

userid=admin&password=asdfg

GET和POST为什么有速度的差异？

如YSlow所说，POST比GET多出了一个发送数据的步骤，我们可以通过MIDP实现GET和POST的程序代码来理解这一个过程：

// MIDP实现GET的过程(变量定义省略)：
conn = (HttpConnection) Connector.open( url ); //建立连接
conn.setRequestProperty( "User-Agent", agent ); //设置请求头

int rc = conn.getResponseCode(); //取得响应
// ....
// MIDP实现POST的过程(encodedData为post数据)：
conn = (HttpConnection) Connector.open( url ); //建立连接
conn.setRequestMethod( HttpConnection.POST ); //设置请求头
conn.setRequestProperty( "User-Agent", agent );
conn.setRequestProperty( "Content-Type", type );
conn.setRequestProperty( "Content-Length",
				encodedData.length() );

OutputStream os = conn.openOutputStream(); //发送数据
os.write( encodedData.getBytes() );

int rc = conn.getResponseCode(); //取得响应

以上程序摘自HTTP POST Basics。

分析可见，速度的差别确实出在这一个发送数据的环节上，这一环节究竟耗时多少，我们一会儿来测一下。

何时用GET，何时用POST

这个问题不该在我们话题的讨论之列。关于使用场合的差别，无非有两个因素：

1. POST比GET更安全。因为GET数据可以缓存，url可以被人轻松的得到，而Ajax中不存在这个问题；

2. IE支持url最长为2KB，所以参数过长不能用GET，这条是Ajax需要考虑的地方。

究底：Ajax的GET与POST在速度上有多少差别

刚刚有老外写的一篇GET and POST Requests in AJAX，比较GET和POST在Ajax中的速度问题，写的洋洋洒洒，但通篇没有一点数据和理论，各浏览器的测试结果居然只有”Very slow”和”Fast”。。。

我们干脆自己写程序来测试一下，通过发送Ajax请求前和接收到Ajax数据后的时间差，来测试其速度的差异。使用了纯Javascript和jquery两种方式作比较。

测试DEMO在这里 | 下载测试程序包(请根据网速，酌情修改请求时间间隔，否则会引起混乱)

手头的几个浏览器测试了一下，PHP程序放在美国Dreamhost服务器上，通过山东电信网络测试结果如下：

Firefox 3.5

Chrome 4.0.266 Beta

IE8

虚拟机中的IE6：

虚拟机中的Firefox 2.0：

通过对这几个流行的浏览器的测试，发现POST确实比GET要慢，而慢的这个时间基本等于服务器的响应时间(Ping值)。浏览器之间的差距不大，Firefox3.5和Chrome4速度比IE要快一点。通过jQuery进行Ajax调用比纯JavaScript稍快(是jQuery做了优化还是我JS程序写的不好？)。

其他浏览器有时间再测试一下，也欢迎有条件的朋友帮忙测试。

后记

为什么要寻根究底研究这个东西呢？

源于同事开发中遇到的一个问题——使用beforeunload事件，在用户关闭浏览器时通过Ajax向服务器发送数据，使用的POST方式。

在分析数据时，发现有一种情况，得到了请求头信息，却没有得到Ajax数据。虽然这部分数据很少，但引起了我的兴趣，同时把心里一直不明白的这个问题搞清楚了。通过这通分析知，这种情况的原因可能是浏览器在得到服务器响应之前，就关闭了连接，而Ajax的异步调用方式，致使beforeunload不会等待Ajax返回，导致POST数据未能发送。解决方法，可以将数据发送改为同步方式。(这个设想不成立，因为发送请求不是异步的，所以原因可能在别的地方。)

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

]]> http://www.oncoding.cn/2009/ajax-get-post/feed/ 4