博客园_Answer to Life, the Universe, and Everything

常用网络图像格式的比较和选择

2011-03-11T06:55:00Z

在前端开发中，你常常会发现某些图像以A格式储存效果较好，而另一些以B格式储存效果较好。（注：这里的“效果”，指对图像文件大小和图像质量的综合考量。）

因为压缩算法的不同，格式的效果会因内容而异。因为这种相关性，我们把图像按其内容特点分为几类，并分析各类图像用哪种格式储存的效果最好。

图像按其内容特点分类如下：

文字和图形
照片
渐变
- 简单渐变（横向、纵向线性渐变）
- 复杂渐变

文字和图形

文字和图形的特点是颜色简单，有清晰的边缘。

GIF：2.306K，PNG-8：1.963K，PNG-24：3.715K

放大4倍

GIF、PNG-8、PNG-24 都是无损格式，图像质量一样，所以用同一张图显示。

0品质 JPG：2.345K

放大4倍

60品质 JPG：5.214K

放大4倍

可以看出，GIF、PNG-8、PNG-24 是图像质量最好的，其中 PNG-8 文件最小。即使最低品质的 JPG 也比 PNG-8大，把 JPG 的品质提高到 60，图像质量仍与 PNG-8 有差距，大小却达到了 PNG-8 的2.7倍，由此可见 JPG 格式储存这类图像的局限性。

综合来看，对于文字和图形，无论从图像质量来说还是文件大小来说， PNG-8 都是最佳选择。

照片

照片的特点是颜色丰富且颜色分布无规律。

GIF：28.24K，PNG-8：23.74K

放大4倍

GIF、PNG-8的图像质量一样，所以用同一张图显示。

PNG-24：67.58K

放大4倍

品质60 JPG：12.59K

放大4倍

观察 GIF 和 PNG-8 的放大图，可以看到细节有明显损失，原有的平滑颜色过渡变成生硬的单一颜色。这是因为 GIF 和 PNG-8 都是8位图像格式，只能存储256种颜色，当图像颜色超过256色时，相近的几个颜色会被合并成一个，直到颜色总数不超过256色为止。

PNG-24 是无损真彩色格式，所以 PNG-24 压缩后能保持和原图质量一样，完全不失真，但付出的代价是极低的压缩比，这张 200 × 200 的图像竟有 67.58k，这是在前端开发中无法接受的。

最后是 JPG，放大图可以看出其相较 PNG-24 有轻微的失真，但比 PNG-8 好很多，在原大小下完全看不出和 PNG-24 有区别。而 JPG 的大小不到 PNG-24 的 1/5，所以说 JPG 是存储照片最理想的格式。

PNG-8 是 GIF 的改进格式，它们的图像质量都是一样的，在几乎所有情况下，PNG-8 的压缩率都比 GIF 略胜一筹，PNG-8 完全可以替代 GIF，所以后文将不再比较 GIF 格式。

简单渐变（横向、纵向线性渐变）

PNG-8：1.503K

PNG-24：0.619K

60品质 JPG：1.97K

PNG-8 放大8倍

PNG-24 放大8倍

60 品质 JPG 放大8倍

在原图下看不出 3 种格式有何区别。但是比较放大图，可以看出 PNG-8 有比较明显的带状颜色条，这是由于储存的颜色不足引起的。JPG 相对较好，虽然有些不自然过渡，但是不太明显。质量最好的依然是 PNG-24，但奇怪的是，它的文件大小也比前两个格式小很多。我猜测是 PNG-24 使用的算法特别适合用于这种线性重复的图像。

不论如何，PNG-24在图像质量和文件大小两方面都有优势，是储存横向、纵向渐变的最佳格式。

复杂渐变

这里说的复杂渐变包括非水平垂直的线性渐变、径向渐变、角度渐变等。

PNG-8：3.762K

PNG-24：10.14K

60 品质 JPG：2.701K

PNG-8 放大8倍

PNG-24 放大8倍

60 品质 JPG 放大8倍

这幅图是把上幅图的线性渐变改为径向渐变得来的。

观察放大图，图像质量和简单渐变的一样，PNG-8 在左上角圆心处颜色已经失去过渡，连成一块。PNG-24 图像质量依然是最好的。理论上 JPG 的图像质量会比 PNG-24 差些，但是即使是在8倍放大图上，差异也非常不明显。

从文件大小上看，PNG-24 变化非常大，从之前的 0.619K 上升到 10.14K，而 JPG 变化很小，从 1.97K 上升到 2.701K。

实际上复杂渐变的颜色分布类似于照片，对图像压缩算法来说，都是无规则的，所以 JPG 得以在这类图像上得到最好的效果。

总结

PNG-8，即 8位（256色） PNG 格式。 PNG-8 擅长存储颜色简单、边缘明确的文字和图形，由于 PNG-8 只能储存256种颜色，所以在存储颜色丰富的照片时，会丢失颜色，导致图像失真。

GIF，GIF 和 PNG-8 非常相似，主要区别在 PNG-8 算法比 GIF 好，所以压缩比较高，除了动画，所有可以用 GIF 的场合都应该用 PNG-8 代替。

PNG-24，即 24位 PNG 格式，这是真正的无损压缩格式，不会像8位格式一样丢失颜色，也不会像 JPG 一样模糊边缘，可以完全保持原图质量。只是在多数情况下，这种格式产生的文件比其他格式大很多。在储存简单渐变时，PNG-24 产生的图像质量、大小都非常完美。

JPG，有损压缩格式。储存照片有较好的效果，对有清晰边缘的文字和图形的储存则不尽理想。可以通过降低图像质量来提高压缩比，压缩比较高时，会产生明显的不自然痕迹。

图像	适用格式
文字和图形	PNG-8
照片	JPG
简单渐变	PNG-24
复杂渐变	JPG

本文链接

IT出路（转帖）

2010-05-21T13:27:00Z

恭喜，你选择开发工程师做为自已的职业
　　悲哀，你选择开发工程师做为自已的职业

本文所指的开发工程师，仅指程序开发人员和以数字电路开发为主的电子工程师。
　　当你选择计算机或者电子、自控等专业进入大学时，你本来还是有机会从事其它行
业的，可你毕业时执迷不悟，仍然选择了开发做为你的职业，真是自做孽不可活。不过
，欢迎你和我一样加入这个被其它人认为是风光无限的“白领”吧。

如果你不是特别的与人世隔绝，我想你一定看过金老先生的名著《笑傲江湖》吧，
里面有一门十分奇特的武功叫做"辟邪剑法"，你看这个小说第一次看到这种功夫的练法
时，我想你当时一定笑歪了牙“呵呵，真好玩！”，可是现在我很痛心的告诉你：你选
择的开发工作就是你人生路上的"辟邪剑法"，而你现在已经练了，并且无法再回头。
　　相对同时刚出校门同学从事其它行业而言优厚的薪水，以及不断学习更新的专业知
识不仅仅让你感到生活的充实，更满足了你那不让外人知的虚荣心。在刚出校门的几年
中，你经常回头看看被你落在后面的同学们，在内心怜悯他们的同时，你也会对自已天
天加班的努力工作感到
心里平衡：“有付出才会有回报”这句话在那几年中你说的最多，不管是对自已的朋友
们还是自已的爱人。第二句最常说的话是对公司的领导：“不行我就走人！”，实际上
你也真的走过几回。对了，在这几年中，因为你的经济条件不错，你开始买房、开始谈
恋爱、结婚、开始有了自已的小孩。有时候你会对自已说再过两年就去买车。当然其中
可能有许多大件是需要分期付款的，但你对前途充满了信心，你确信认为这种日子会永
远的持续下去，即使不是变得更好的话。

日子总是在这种平淡中一天天的过去，就在那么不经意间，你突然发现自已已经快3
0岁了，或者已经30了，莫名的，你心里会漫延着一种说不清楚的不安情绪，你好像觉得
前途并非像前几年那样变得越来越好，你也忽然发现你以前所瞧不起的同学里好像已经
有不少开着车的了，也有几个人住着比你还大的房子，好像房款还是一次付清的，你突
然明白你现在的生活比起你的同学来最多是中游偏上了。工作中最让你感到心里不舒服
的是，你越来越不敢对你的领导说不了，即使比你来的晚的同事升职或提薪，你也只是
在私下与朋友们一起喝酒时才敢发发牢骚，在头的面前你的声间越来越小、笑脸是越来
越温柔。

你终于开始迷茫“再过几年我会是在干什么呢？”，这句话常常出现在你的心里。
　　计算机开发工作，是一种以年轻为资本的工作，说句通俗点的话是“吃青春饭的”
，嗯，这句话好像在一种特别的行业也听到过。

其标志就是一：工作的时间性非常强，一个开发项目被定的时限通常是很紧张的，更有
甚者，有些号称开发管理的书里面还非常卑鄙的号召将一个项目切成多个小片，每个小
片都定一个叫“里程碑”的东东来严格跟踪开发进度，加班加点在其它行业是需要加班
工资的，而在开发行业，加班工资好像还没见到几个公司发过，是啊，反正有时间限制
着，你干不完我再找你算账.所以开发工作通常有着其它工作所没有的精神上的压力。

一旦一个人步入而立之年，因为家庭和孩子的负担，加上精力上面的衰退，加班工作时
间变得越来越少，这点让很多老板们感到：这些人已经老了，不好用了。指示人事部门
：“以后招开发人员限制在30岁以下！”，相对而言硬件开发会年龄方面限制会稍好一
点点，但也是五十步笑百步。还有一个很重要的一点就是：计算机这个烂东东实在是进
步的太快了，前两年买的顶级配置电脑，现在怎么看怎么像废品，这还是小事，更可气
的是好像每天都需要学习新的知识，刚毕业时只会书本上的PASCAL，学会了用腐蚀的办
法来做电路板，一上班就开始学习TURBOC和TANGER2.0，刚刚学会，还没来得及高兴，马
上开始学Borland C＋＋和Protel3.0，好不容易学会了，却发现需要学习VC和Protel98
了。单片机也是啊：Z80的指令背的很熟，工作中没来得及用就要学8031，好好学吧，本
来想着这辈子就吃它了，又发现又出来什么PIC、DSP、CPLD、FPGA、ARM等等....这还不
包括中间要学一大堆74系列、4000系列、XX系列...IC卡居然里面还有CPU卡..如果学习
的知识里每个字都能变成一分钱，我想所有的开发工程师都是腰缠万贯的富翁。

一眼看去，这种日子好像见不到头，年轻时乐此不彼，但现在你一定对自已能坚持
到什么时候感到怀疑了。我们都玩过像仙剑奇侠传这样的RPG游戏，刚开始时你只是一个
一名不文的少年，随着你去打怪物、捡宝贝、学秘芨，最后终于有一天你会变成一个大
英雄！那么你在实际生活中过得比那些小侠们还辛苦，为什么成不了一个生活中的大侠
呢？呵呵，原因在这里：因为开发工作是邪门功夫，它虽然可以让你速成的变成小资，
但它最大的特点是经验不积累！日新月异的知识更新，让你总是感到自已在退步，你就
像在RPG中的主人公，开始时就给了你一把好剑和好盔甲，而且让你的级别很高，但让你
的经验不累积，虽然刚开始打小怪物时你觉得自已很爽，但越到后来，你会发现你会死
的很惨！比较一下你与其它非开发行业的同学你就可以知道了，例如和你学医的同学比
起来。套用岳不群他老人家说华山剑宗和气宗的区别那段话：前十年你比你那些学医的
同学收入和地位要好的多，但十年以后你和他基本上各方面都会持平，而二十年以后你
的各方面远远不能与你学医的同学相提并论！嗯，你已经开始不笑辟邪剑法了吧。

“敢问路在何方？路在脚下...”，不过猴兄和八戒兄这么认为是可以的，你呢？
总结了许多开发朋友在30岁以后的生活之路，让我们一起看看开发人员“路在何方？”
那么开发人员在30岁以后都干些什么呢？

其路一：继续做你这个很有“前途”的职业吧！
　　偶掰着脚指头仔细数了数，发现还真的有很多朋友在30岁以后还在从事开发工作，
我这里说的从事，是指你还需要天天在电脑边上编程序和画电路板，与你手下是否有几
个小兵无关，也与你是否头上顶着什么项目经理、主任工程师的帽子无关，只要你还需
要亲自开发，你就属于这一类。其中有个年龄最大的朋友是63年的，从事医疗仪器的开
发工作，35岁左右还在从事软硬件开发工作的仍有一大堆，分析这些仍然从事开发的朋
友，基本上都有以下特点：
1　痴迷工作或者痴迷电脑，晚上八点到十二点的这段时间，基本上是在电脑桌或工作台
前渡过的。
2　不喜欢与人交住，朋友很少，常联系的人不超过五个。
3　与朋友交往时谈工作多，但一般不主动谈钱。
4　体型偏胖或偏廋，不在正常区间。
5　无未来计划，对五年后自已生活怎么样、从事什么工作说不清楚。
6　俭省，从不乱花钱。
即使你是还不到30岁的开发人员，你也可以看看自己对以上几条是否符合，是否会在30
岁后还从事开发职业，四条疑似，五条以上基本确诊你也是这类型的人。
　这些朋友们通常报着过一天是一天的态度生活，到了这个年龄，也不敢再轻易的换工
作了，年轻时的锐气慢慢的也消退了。唯一不变的希望是有一天从天上掉下来一大堆钱
把自己砸伤。说实在话因为他们的性格所限，基本上可以确定他们以后不可能在职场上
获得更好的发展，当个小头头，带几个人开发已经是他们发展的顶点。至于以后的人生
之路，不仅他们自己迷茫，可能上帝也正在头痛。
不过像这类朋友，偶很奇怪的发现：他们的小孩都是儿子！不知是偶然还是有什么其
它说法。
简单建议：要改变命运，先改变性格：坚持半年晚上不从事工作、游戏及电视，用此时
间与人交往，你的人生会有改变。

其路二：转行从事技术支持、行政或生产等工作还有一些朋友，从事了几年的开发工作
，因为自已并非特别的爱好，或者领导上面的强制工作安排，他们转到了技术支持、服
务或行政等工作，至少当时从表面上看起来，他们的薪水较开发要少一些，但真正的统
计这些人，发现他们之中有半数的人获得了更好的发展，升职为服务部经理或行政经理
等职，最历害的一个朋友已升职为总经理助理，进入高层。
　　这类朋友当时转行通常并非自已志愿，属被逼无奈或者其它原因，但显然，拥有专
业知识技术的他们显然在非技术部门中鹤立鸡群，遇到什么事情他们均可从专业的角度
提出建言，久而久之，他们获得更多的升职和加薪机会也就不足为奇。
　　因为不从事开发，所以经验开始积累，这类的职业通常会给你一个很安定的感觉，
你到30多岁后会发现这类职业反而比开发工作更容易获得新的工作机会。

简单建议：你如果确定在开发部无法获得很好的发展机会，不妨转到其它几个部门
试试，换个活法，钱少点就少点吧，机会多。

其路三：开发管理
　　如果你现在已经是总工或开发部经理，或者你眼看就有机会被提升为这类职务，那
么恭喜你，你走的是从“弼马温”到“斗战胜佛”这条金光大路，你不仅拥有很高的专
业技能，而且很显然，你也有着很强的人际交往能力，你这类人根本不需要对未来有着
任何的担心，你在即使一无所有的时候也很容易白手起家。
　　你这种人算是练辟邪剑法练成了仙，嗯，我无话可说。
　　你是不是这类人也很容易区别，就像围棋二十岁不称国手终身无望一样，你应该在
工作三、四年以后，也就是说二十七岁左右就会发现自已工作中指手划脚的时间比亲自
开发的时间要多了，而且大多数这类人在这个年龄手下应该有“兵”了，相反的，如果
你快30岁了还天天埋头于电脑前编程序和画板子，或者30多岁了你还没升到部门经理（
虽然你总是觉得自已很有希望），基本上可以确定你不是这类人。好了，如果你确定你
是这类人，那么你唯一的想法就是尽快爬上中层和高层，因为有时候人生偶然性太大，
不占住坑的萝卜很有可能被人拔出来！

简单建议：天天去你的老板家里面拖地和擦桌子！

其路四：出国或考研
　　有两个搞开发后出国的朋友，其中一个甚至打工打到了一个小公司总工的位置，数
据库和软件方面水平巨牛，但仍感觉心里不踏实，于是将自己工作多年的钱忍痛掏出来
，出国费加上机票大概将自已辛苦所攒的银子花完，然后又借了一些钱，在02年身上揣
着一万美元跑去了加拿大，在加拿大不停的重复找工作，换工作，然后再找工作的循环
，找的工作基本上与计算机无关，不过工资总是在1500加元左右，呵呵，折成人民币与
他在国内打工拿的基本上差不多，不过租个地下室就花了300加元，然后吃吃喝喝，再买
个电脑上上网这类的，基本每月平均还要倒贴一点。前段时间给我的邮件里说，现在身
上花的差不多只有5、6000美元了，准备开个小公司，看看能不能往国内倒腾点东东，做
最后一搏。另外一个朋友去澳州，时间稍早一些，先是大概摘了一年多的葡萄，后来总
算找了个技术工作，每天的工作是画机械图纸，收入还算不错

将近3000澳元，买了个旧车，也算是过上了资本主义生活。不过前年回来一趟，唯一的
感叹就是：在国外拿2000美元的生活，绝对不如在国内拿5000人民币的生活舒服。
　　也有两个考研的朋友，不过其中一个严格的说不是做开发的出身，偏重于市场方面
的工作性质，不过我的朋友里面考研的不多，只好凑两个人说说，一个考研后在北京找
了个工作，每个月5、6000元钱，但还是做开发，生活仍然与没考研之前没有任何的改变
，前途仍然没见到什么大亮的光，还是搞不清楚以后再干些什么，标准的过一天算一天
了。另外一个考研后在大学里面找了个工作，工资虽然比他原来打工少了不少，但毕竟
终身有靠，稳定了下来，也算修成了正果，这位哥们心情一放松下来，也开始有时间琢
磨着业余时间自已做点什么，好像现在慢慢的也开始有了点眉目。
　　简单建议：这两条路，对开发人员来说都不算是很好，出国十年前是好事，现在难
说，考研能成功转行的概率恐怕也不是很大，多半仍然去搞开发，只不过研究生可以多
干几年罢了。

其路五：转行到市场
　　绞尽脑汁的想想，我所知道的人之中只有两个开发人员去了市场，这两个人都不能
说是朋友，认识而已。他们都是主动要求去了市场，结果是这两个人均在市场都是干到
一年左右，然后都自已开公司了。呵呵，很奇怪，极高的转行成功率！不过仔细想想，
我对这两个人的思路佩服的五体投地。能下决心仍掉每月5、6000元的开发职位，从事一
个自已并不熟悉的岗位，每月拿个2000多元＋提成，但提成那是说不清楚的事情，这个
决定，只能让人感觉到他们对自已前途清晰的把握和老谋深算的心机。而且他们不去服
务不去生产，挖空心思说服领导去市场（市场部门与开发部门通常是一个公司的核心部
门，进入其实并不容易），可以说是有着长远的考虑的。有技术了，再与客户交成朋友
，马上就会产生很大的机遇应该是正常的事情。
　　有实力，有心机，也有着很强的决心力，这种人恐怕早在大学毕业时或更早的时候
就已经决定了自已的人生之路，他们的每一步路在若干年前早就计划周全，现在看起来
：学会技术－＞进入市场－＞寻找商机－＞开公司，一条多么清楚的人生之路。但就像
我们上小学中学时，所有人都知道上大学是我们最清楚的人生路一样，最后只有少数人
才能真正达到目标（当然，现在扩招的历害是另外一回事，我是说我们那个时候，也就
是：“很久很久以前，当我像你那么大的时候”）。

简单建议：你若是这类人，我的建议是：...嗯?....那个你.你，你别走啊，我还有
个事想请你赞助一下啊.....

其路六：开公司自已干

呵呵，看到这一条，发现你的眼睛已经圆了，你肯定千百次的想过这个事情吧，咳
咳，其实我从事开发的时候也是天天梦想着这种事情。总想着过两年找个机会就自已干
，这个梦想一年又一年的折磨着你也给着你希望。看看吧，开发后来开公司的还真的不
少，里面有成功的也有很多失败的，通常开公司都是几个人合伙开始的，有做技术的，
有做市场的，几个人一拍即合、狼狈为奸，共同策划了这一个大活动。一般说来能让这
几个人下决心走出这一步，产品肯定是先进的，甚至是国内独一无二的，市场也是很大
的，负责市场的那个哥们通常会拍着胸保证可以卖出去，并悄悄地告诉你他在某主管领
导是他小舅子的同学的二叔，肯定没问题。于是你们几个人找地点、注册执照、买了几
个破桌子，再攒了两台电脑，每个人又凑了几万银子，公司开张了！
　　产品很快出来了，市场的哥们也不负重望，有几个客户表示要试用了，一切看起来
都是如此的正常，“.......你坐在老板桌前，不停的有人来汇报工作或者找你签字...
人进人出中...你又想起公司再穷也不能只有一把椅子的故事.....”你在梦中笑出声来
。
是如此的顺利，你们很快就有单子了，很快的单子让你们凑的那点钱不够了，你们
很高兴的每个人又增加了投入，拿出钱时你眼泪汪汪的数着钱说：“这就是我那生蛋的
母鸡啊”。你们的产品确实不错，市场也经营的很好，客户慢慢的多了起来，单子来的
时候一笔接着一笔，你每天都处于兴奋之中，唯一美中不足的是好像客户回款总是会拖
一些日子，不过客户给你保证说：过几天，过几天就付给你们，因为回款总是在计划外
，所以你们为了资金的流畅运行又凑了一些钱，这个时候你有一些心事了，因为你的存
款折上面的数字已经快趋向于零了。“没事，过两个月等回款了一切都OK了，谁干事业
不吃点苦呢？”你这么安慰着自已又投入到工作中去，资金总是在回款和生产经营费用
之间走着一个窄窄的小木桥，你的账上总是没有太多的钱，扩大了的公司规模和许多意
外情况，使你又一次、二次、三次的与合作者们再次投入了自已的资金，当然，后来的
钱你可能已经是借的了.....
　　终于有一天，你的会计再一次告诉你，老板啊，账上又没现金了，吃过多次苦头的
你终于下决心开始重视资金的运行了，你裁掉了一些不必要的人手，减少了开发的投入
，要求市场人员签单的时候必须予付XX%的款，回扣也必须等收过款后再付，同时也开始
对产品的生产成本开始进行控制。
　　时间一天一天的过去，因为竟争对手的产品也对你的产品进行了仿造，你的产品慢
慢变得不再先进，市场人员开始埋怨公司的合同资金方面规定太严格，不好签单，生产
成本的下降通常也导至产品毛病的增多，客户也开始埋怨你的服务人员不能及时进行服
务。
　　终于有一天，你重新走进了人才交流中心，以前你是来招人的，现在你拿着自已的
简历开始寻找一个工作
......
公司的成功与否，与产品有关，与市场有关，但更重要的是与资金有关，产品与市
场都可以通过资金来弥补，而却没有任何东西可以代替

资金，凡是倒下的公司，99%与资金链的断裂有关。在你决定要开公司以前，先估计一下
你公司支持一年所需要的资金数额，包括人工费，生产，场地，广告宣传、市场费用、
甚至电、水费等等等等，把你所想到的一切加在一起，得出的值就是..慢..如果你没有
实际的开过公司的经验，你需要将此数字乘3，然后就是你开公司一年最少需要的费用，
呵呵，公司的实际运营所需要的钱是你想像的3倍以上，你要是不信我也没办法。

简单建议：开公司前最重要的是先确立你后续的资金来源！也就是说钱不够了怎么
办？－－－因为你投入的钱肯定会不够的。

其路七:第二职业
这类的朋友有不少,他们没有脱离开发工作,但是在业余时间又不停的接项目或者在
卖产品,在单位里面他们显得并不出众,比起其它人来说他们属于最不愿意加班的一类.为
此他们白天通常工作很勤奋.这类人也许不一定可以挣很多钱,但平均下来他们一年之中
通常都可以比同事们多挣个几万元.有时候比上班拿得还多.但令人疑惑的是,这类人在生
活中更加注重稳定,基本上没见到他们跳过蹧,即使私下里面已经开了个小公司,他们通常
也不会辞职.
你的旁边有没有这类人呢?分辨他们很容易:
--电话很多,而且更愿意来电话时离开办公室找个没人的旮旯通话.神秘兮兮给人一种"这
家伙是不是有二奶啊?"的感觉的人，通常是这类人。这类人是女性最佳的选择对象：很
顾家，不象那些富人容易花心，而比起一般人来说，他们收入相对要高得多。但总结了
一下几位这类的开发朋友：也得出了一个令人沮丧的结论：这种人通常个子不高，体形
类似桶状.....

简单建议：这好像是开发人员最佳的出路了，但比较丰厚的收入通常让这类人不愿意
去冒风险....到现在为止我所认识的这类人还没有一个真正算是成功的。

好了，虽然偶的经历远远说不上丰富，也没有什么成功之处可以自满的，但或许因为
比其它朋友痴长了几岁，见过的人可能会稍多一些，所

以斗胆写出了以上的一些文字，让您掉牙了。
   下面是偶走过开发这条路上总结出来的一点心得，你可以不看，但看了就千万别把嘴
咧的太大：
   一、不管是给别人打工还是自已干，都要全心全意的工作，因为你所做的任何一点工
作都会让自已的人生多一点筹码，这一点最最重要!这样的例子我至少可以举出两起，优
秀的开发人员被其它新公司挖走，并给一定的股份，成为新公司的股东的例子。当时与
这样的开发人员一个部门同时工作或更早工作的有许多人，他们平时经常偷点懒，能少
干点工作就少干点，有时候还笑话那个平时努力工作的人傻，几年过去了，究竟谁比谁
傻？
   二、多与市场人员交朋友，你接触他们时可能总会觉得他们知识比你少，甚至素质比
你低，可能比你还有点黄。但实际上他们比你更懂这个社会！参加到他们这个圈子中去
，和他们一起赌赌钱、一起聊聊天、一起洗洗桑拿、一起.....你会通过他们接触到另外
一个世界。
在网上或其它地方，如果有机会参与到除本职工作外的一些项目或产品的开发中（包括
你的朋友拉你去做点小生意之类的非开发性质的工作），那怕是帮忙的性质，也要积极
介入，至少你会交到很多的朋友，这样你的人生会多出很多的机会。

本文链接

Javascript动画基础

2010-05-17T07:26:00Z

在当前的web应用中，我们可以看到Javascript动画效果得到了越来越多的应用。由于AJAX技术的流行，通过简单的动画效果提示用户当前正在执行的操作变得必要，例如最常见的效果就是颜色的渐变和元素大小的调整。

当前许多主流的Javascript类库或框架中都包含了一些基本动画效果的接口，让我们使用这些效果变得更加容易，本文并不是针对这些接口的使用教程，而是尝试探讨一下使用Javascript实现动画效果的基本原理和结构，希望能对需要自己实现一些自定义程度比较高的动画效果有一些帮助。

基于Javascript的动画其背后的基本原理是非常简单的。我们需要做的只是通过定义好的一组运动规则来操作DOM元素（例如>img<,<div>）在页面的区域上移动或是改变其相关的属性。

动画的基本原理是连续播放一组静态的图片从而产生动态的效果，其最基本的元素在于帧率。在其它一些语言里，例如C#或是Visual Basic，我们可以通过让相应进程sleep的方式来达到在一组动画的循环中控制帧率的效果。因此，实现动画效果的一组基本结构是执行如下的一组循环。

while(condition)
{
   doSomething();
   delay(sometime);
   doOther();
}

但是在Javascript中我们并没有现成的函数接口来实现delay的效果，所以我们必须得借助于Javascript中window.setInterval来实现动画效果。在我们实现一个简单的动画效果的模式中，有这样几个原则是应该注意的：

1.避免使用全局变量，因为我们所提供的动画函数应该是可以同时应用于多个元素的。
2.将元素对象作为参数传递，而不是传递元素的ID。
3.注意线程安全的问题。我们通过setInterval和clearInterval的方式来实现当动画结束的时候，这个时钟将自动清除。并且需要保证同一类型的动画不会同时在多个实例上运行。

假设以一个简单的改变元素width属性的动画效果为示例，我们实现的函数应该是下面这个样子的：

function doWidthChangeAnimate(obj, startW, endW, frames, delay, power)
{
   if(obj.widthChangeAnimate) window.clearInterval(obj.widthChangeAnimate);

   var cFrame = 0; // current frame
   obj.widthChangeAnimate = window.setInterval(
   function(){
   obj.currentWidth = easeInOut(startW, endW, frames, cFrame, power);
   obj.style.width = obj.currentWidth +　"px";
   cFrame++;
   if(cFrame > frames) window.clearInterval(obj.widthChangeAnimate);
   }
   , delay
   );
}

在这个函数的接口当中，前三个参数的含义很好理解，第三个参数frames代表了这个动画效果将被划分为几帧来执行，第四个参数delay表示了两帧之间的时间间隔，通过这两个参数我们便可以有效的控制动画的帧率了。

obj的currentWidth是对元素本身的一个扩展，这是为了让元素能有记忆当前的状态。并且，当我们需要重复触发某个动画效果时，能够快速的恢复到元素的初始状态。例如我们对某个元素调用doWidthChangeAnimate的时候应该是这样的：

elem.onmouseover = doWidthChange;
elem.onmouseout = doWidthRecover;

function doWidthChange()
{
   if(!this.currentWidth) this.currentWidth = 100;
   doWidthChangeAnimate(this, this.currentWidth, 200, 24, 10, 0.5);
}

function doWidthRecover()
{
   if(!this.currentWidth) return;
   doWidthChangeAnimate(this, this.currentWidth, 150, 24, 10, 0.5);
}

注意到上面的示例中doWidthChangeAnimate函数中调用了一个easeInOut函数来获取当前应该将元素的宽度设置为多少，这是因为在通常状况下，尽管我们可以按帧率计算出没一步应该增加的宽度平均值，但使用这个渐变平均值不一定能产生比较好的动画的效果，从动画理论的角度来说，其变化不应该是匀速的。所以我们通过一个函数来计算每一帧中所需要产生的变化，你可以自己选择合适的方式计算这个这个数值，一个可以参考的方式如下：

function easeInOut(min, max, frames, cFrame, power)
{
   var delta = max - min;
   var p = min + Math.pow((1/frames)*cFrame, power)*delta;
   return Math.ceil(p);
}

实际应用中，例如大众点评网的单张图片页面里右上角的图片浏览模块就使用了本文所述的技术。利用Javascript实现这样的动画效果其实方式很多，本文只是提供了其中一种可以参考的模式。最后让我们看一下jQuery中动画效果实现的基本模式，jQuery中所有动画的基础其实都源于jQuery.fx.prototype中的方法custom。其源代码片段如下：

jQuery.fx.prototype({
 ......
custom: function(from, to, unit){
 this.startTime = now();
 this.start = from;
 this.end = to;
 this.unit = unit || this.unit || "px";
 this.now = this.start;
 this.pos = this.state = 0;
 this.update();

 var self = this;
 function t(gotoEnd){
 return self.step(gotoEnd);
 }

 t.elem = this.elem;

 jQuery.timers.push(t);

 if ( jQuery.timerId == null ) {
 jQuery.timerId = setInterval(function(){
 var timers = jQuery.timers;

 for ( var i = 0; i < timers.length; i++ )
 if ( !timers[i]() )
 timers.splice(i--, 1);

 if ( !timers.length ) {
 clearInterval( jQuery.timerId );
 jQuery.timerId = null;
 }
 }, 13);
 },
 ......
});

从这段代码可以看到，其实jQuery中动画的基础模式和本文中所提到的其基本思路是一致的，不过jQuery中使用了一个timers的数组来管理诸多的动画时钟，并且所有接口封装的更加完善和通用，耦合性也更低，其它一些关键函数例如update, step都在jQuery.fx.prototype的扩展中。而easing的函数在jQuery.extend中，jQuery提供了两种渐变效果，分别为linear和swing，其计算的公式的代码片段如下：

jQuery.extend({
   ......
   easing: {
   linear: function( p, n, firstNum, diff ) {
   return firstNum + diff * p;
   },
   swing: function( p, n, firstNum, diff ) {
   return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
   }
   },
   ......
});

有兴趣的朋友可以继续深入研究一下其源代码，本文中就不再赘述了。

本文链接

善用 cloneNode 存储 DOM 对象

2010-03-29T03:44:00Z

获取DOM节点的方法有很多，如常用的getElementById()、getElementsByTagName()，前者返回一个节点元素，后者返回的是节点的集合。看似相同，实际上其中大有文章：
1、getElementById()
返回的节点可以保存到变量中，即便使用removeChild()方法移除，也能再通过保存的变量使用该节点。
测试下面的代码：

<div id="test">hello world</div> 
<script type="text/javascript"> 
    (function(){ 
        var oDiv = document.getElementById('test'); 
        document.body.removeChild(oDiv); 
        alert(oDiv.innerHTML);//hello world 
    })() 
</script>

2、getElementsByTagName()
返回的值仅仅是对DOM节点地址的引用，如果使用removeChild()删除节点，返回值是会变化的。可能用图示更清晰吧

测试下面的代码加深印象：

<ul id="test">    <li>hello world</li>    <li>hello world2</li></ul><script type="text/javascript"> 
    (function(){ 
        var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'); 
        oDiv.removeChild(oLi[0]); 
        alert(oLi[0].innerHTML);//期望的是hello world,实际上输出的是hello world2 
    })() 
</script>

这种引用问题时有发生，解决的方法可用数组结合去存储返回值，类似于getElementById:

<ul id="test">    <li>hello world</li>    <li>hello world2</li></ul><script type="text/javascript"> 
    (function(){ 
        var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = []; 
        arr[0] = oLi[0]; 
        arr[1] = oLi[1];//数量多了可用循环遍历 
        oDiv.removeChild(oLi[0]); 
        alert(arr[0].innerHTML);//hello world 
    })() 
</script>

不过问题又来了，如果我们用innerHTML=”"代替removeChild，你会发现在IE浏览器下最后的输出会是空的。

<ul id="test">    <li>hello world</li>    <li>hello world2</li></ul><script type="text/javascript"> 
    (function(){ 
        var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = []; 
        arr[0] = oLi[0]; 
        arr[1] = oLi[1];//数量多了可用循环遍历 
        oDiv.innerHTML=''; 
        alert(arr[0].innerHTML);//IE下为空 
    })() 
</script>

再次改进存储方法，使用强大的cloneNode()

<ul id="test">    <li>hello world</li>    <li>hello world2</li></ul><script type="text/javascript"> 
    (function(){ 
        var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = []; 
        arr[0] = oLi[0].cloneNode(true); 
        arr[1] = oLi[1].cloneNode(true); 
        oDiv.innerHTML=''; 
        alert(arr[0].innerHTML);//hello world 
    })() 
</script>

本文链接

Advanced Javascript: Objects, Arrays, and Array-Like objects

2010-03-05T02:12:00Z

Javascript objects and arrays are both incredibly useful. They’re also incredibly easy to confuse with each other. Mix in a few objects that look like arrays and you’ve got a recipe for confusion!

We’re going to see what the differences between objects and arrays are, how to work with some of the common array-like objects, and how to get the most performance out of each.

What Objects Are

A javascript object is a basic data structure:

1
2 var basicObj = {}; // an empty object
3 // {} is a shortcut for "new Object()"
4
5 basicObj.suprise= "cake!";
6
7 basicObj['suprise']; // returns "cake!"

Using {} instead of new Object(); is know as “Object Literal” syntax.

1 var fancyObj = {
2
3     favoriteFood: "pizza",
4
5     add: function(a, b){
6
7         return a + b;
8     }
9 };
10
11 fancyObj.add(2,3); // returns 5
12
13 fancyObj['add'](2,3); // ditto.

As you can see, and probably already knew, properties can be accessed a couple of different ways. However, it’s an important point that we’ll come back to in a minute.

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things, such as modifying the prototypes of Objects, Arrays, etc.

1
2 // an example of something you probably shouldn't do. Ever. Seriously.
3
4 Number.prototype.addto = function(x){
5
6 return this + x;
7
8 }
9
10 (8).addto(9); // returns 17
11
12 // other variations:
13
14 8.addto(9); 
15 // gives a syntax error, because the dot is assumed to be a decimal point
16
17 8['addto'](9); 
18 // works but is kind of ugly compared to the first method
19
20 var eight = 8;
21 eight.addto(9);  // works

What Arrays Are

Javascript arrays are a type of object used for storing multiple values in a single variable. Each value gets numeric index and may be any data type.

1 var arr = []; // this is a shortcut for new Array();
2
3 arr[0] = "cat";
4 arr[1] = "mouse";

See how that syntax is so similar to the syntax used for setting object properties? In fact, the only difference is that objects use a string while arrays use a number. This is why arrays get confused with objects so often.

Length

Arrays have a length property that tells how many items are in the array and is automatically updated when you add or remove items to the array.

1 var arr = [];
2
3 arr[0] = "cat"; // this adds to the array
4 arr[1] = "mouse"; // this adds to the array
5 arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array
6 // setting a string parameter adds to the underlying object
7
8 arr.length; // returns 2, not 3

The length property is only modified when you add an item to the array, not the underlying object.

The length is always 1 higher than the highest index, even if there are actually fewer items in the array.

1
2 var arr = [];
3
4 arr.length; // returns 0;
5
6 arr[100] = "this is the only item in the array";
7
8 arr.length;
9 // returns 101, even though there is only 1 object in the array

This is somewhat counter-intuitive. PHP does more what you would expect:

1 <?php
2
3 arr = array();
4
5 arr[100] = "php behaves differently";
6
7 sizeof(arr); // returns 1 in PHP
8
9 ?>

You can manually set the length also. Setting it to 0 is a simple way to empty an array.

In addition to this length property, arrays have lots of nifty built in functions such as push(), pop(), sort(), slice(), splice(), and more. This is what sets them apart from Array-Like Objects.

Array-like Objects

Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops. Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms, and basically every other DOM method and property that gives a list of items.

1
2 document.forms.length; // returns 1;
3
4 document.forms[0]; // returns a form element.
5
6 document.forms.join(", "); // throws a type error. this is not an array.
7
8 typeof document.forms; // returns "object"

Did you know you can send any number of parameters you want to a javascript function? They’re all stored in an array-like object named arguments.

1
2 function takesTwoParams(a, b){
3
4 // arguments is an  array-like variable inside of all functions
5 // arguments.length works great
6
7 alert ("you gave me "+arguments.length+" parameters"); 
8
9 for(i=0; i< arguments.length; i++){
10
11 alert("parameter " + i + " = " + arguments[i]);
12
13 }
14 }
15
16 takesTwoParams("one","two","three");
17 // alerts "you gave me 3 parameter",
18 // then "parameter 0 = one"
19 // etc.

This works great. But that’s about as far as you can go with array-like objects. The flowing example does not work:

1
2 function takesTwoParams(a, b){
3
4 alert(" your parameters were " + arguments.join(", "));
5 // throws a type error because arguments.join doesn't exist
6 }

So what can you do?

Well you could make your own join() function, but that adds a lot of unnecessary overhead to your code because it has to loop over everything. If only there were a quick way to get an array out of an array like object…

It turns out there is.

The array functions can be called on non-array objects as long as you know where to find the function (usually they’re attached to the array, but this isn’t an array remember

Prototype to the win:

1 function takesTwoParams(a, b){
2
3     var args = Array.prototype.slice.call(arguments);
4
5     alert(" your parameters were " + args.join(", "));
6     // yay, this works!
7
8 }

Let’s take a look at that a bit more in-depth:

Array: This object is the original array that all other arrays inherit their properties from.

Array.prototype:This gives us access to all the methods properties that each array inherits

Array.prototype.slice: The original slice method that is given to all arrays via the prototype chain. We can’t call it directly though, because when it runs internally, it looks at the this keyword, and calling it here would make this point to Array, not our arguments variable.

Array.prototype.slice.call(): call() and apply() are prototype methods of the Function object, meaning that they can be called on every function in javascript. These allow you to change what the this variable points to inside a given function.

And finally, you get a regular array back! This works because javascript returns a new object of type Array rather than whatever you gave it. This causes a lot of headaches for a few people who are trying to make subclasses of Array, but it’s very handy in our case!

Gotchas

First, in Internet Explorer, DOM NodeLists are not considered to be javascript objects, so you cannot call Array.prototype.slice on them. If you want an array, you’ll have to loop through it the old fashioned way. Or use a hybrid function that tries it the fast way first, then the slow way if that doesn’t work.

1 function hybridToArray(nodes){
2 try{
3 // works in every browser except IE
4 var arr = Array.prototype.slice.call(nodes);
5 return arr;
6 } catch(err){
7 // slower, but works in IE
8 var arr = [],
9 length = nodes.length;
10 for(var i=0; i < length; i++){
11 arr.push(nodes[i]);
12 }
13 return arr;
14 }
15 }

See an example here: http://nfriedly.com/demos/ie-nodelist-to-array.

Second, arrays are objects, so you can do this, but it can get you some serious inconsistencies:

1
2 arr = [];
3
4 arr[0] = "first element"; // adds item to the array
5
6 arr.length; // returns 1
7
8 arr.two = "second element"; // adds an item to the underlying object that array is built on top of.
9
10 arr.length; // still returns 1 !
11
12 // BUT...
13 for(i in arr){
14
15 // this will hit both 0 and "two"
16
17 }

A better solution: wrap arrays in an object if you need both worlds

This is basically a less efficient method of the array subclassing links I mentioned above. While less efficient, it has the advantage of being simple and reliable.

That said, I wouldn’t recommend that you use this in most cases due to issues with speed and extra code requirements. It’s provided here as an example.

1 // an example of a wrapper for an array.
2 // not recommended for most situations.
3
4 var ArrayContainer = function(arr){
5
6     this.arr = arr || [];
7
8     this.length = this.arr.length;
9
10 };
11
12 ArrayContainer.prototype.add=  function(item){
13
14     index = this.arr.length;
15
16     this.arr[index] = item;
17
18     this.length = this.arr.length;
19
20     return index;
21
22 };
23
24 ArrayContainer.prototype.get=  function(index){
25
26     return this.arr[index];
27
28 };
29
30 ArrayContainer.prototype.forEach=  function(fn){
31
32     if(this.arr.forEach) this.arr.forEach(fn);// use native code if it's there
33
34     else {
35
36         for(i in this.arr){
37
38             fn( i, this.arr[i], this.arr );
39
40         }
41     }
42 };
43
44 var mySuperDooperArray = new ArrayContainer();

Now that your array is (somewhat) protected on the inside, you can loop through it’s items with forEach() and know that they will match it’s length. You can also add arbitrary properties to ArrayContainer or mySuperDooperArray and they won’t get pulled into your forEach() loop.

This example could be extended to completely protect the array if the need arose.

An Even Better Solution: Hire a javascript expert.

nFriedly Web Development is a top ranked Javascript and AJAX ninja with an extensive portfolio of proven results. I can bring your project to life and make it run faster than you ever imagined. Get in touch with me or get a free instant estimate for new projects.

本文链接

YUI 3 中的 Event Delegation

2010-02-24T08:05:00Z

今天在 YUIBlog 上看到了一篇文章：Event Delegation With YUI 3，发现 YUI 3 中内置的这个功能确实很好用。文中举了一个例子，假设有一个 Twitter 类的应用，显示固定条数的 tweets ，它每2分钟刷新一次，这个时候可能会出现新的 tweet ，而旧的 tweet 会被挤出去。假如我们想为每一个 tweet 中的头像添加点击事件的话，应该怎么办呢？

如果我们直接为每个 tweet 添加事件的话，你就要在每次更新的时候把旧的事件处理函数移除然后再为当前所有的 tweets 添加一次，不小心还会遭遇到 IE 的内存泄露问题。

还好我们可以从DOM事件冒泡机制中获益（关于DOM 事件机制可以看这里），假设我们有下面一段代码：

1 <ul id="container">
2 <li><a href="#">Item 1</a></li>
3 <li><a href="#">Item 2</a></li>
4 <li><a href="#">Item 3</a></li>
5 <li><a href="#">Item 4</a></li>
6 <li><a href="#">Item 5</a></li>
7 <li><a href="#">Item 6</a></li>
8 </ul>

根据事件冒泡机制，我们可以在列表中链接的父节点 ul 上来捕获所有链接的点击事件，并且可以在事件处理函数中定位到所点击的链接对象。YUI 3 中的 delegate() 函数就是来做这种事情的。在 YUI 中，假设我们要为上面示例代码中的每一个链接添加事件，可以这么写：

1 Y.on("click", handleClick,"#container li a");

而 Y.delegate() 和 Y.on() 的语法很相似：

1 Y.delegate('click', handleClick, '#container', 'li a');

其中第三个参数是父节点的ID ，用来捕获事件。另外你也可以在一个 YUI Node 对象上实现 delegation ：

1 Y.one('#container').delegate('click', handleClick, 'li a'); // 这行代码和上面的效果一样

下面解释一下怎么通过事件获取相应的节点：

1 var handleClick = function(e){
2   // e.target 点击的对象，在示例中是 a 标签里的 span 节点对象
3
4   // e.currentTarget 通过delegate 监听的对象，在示例中是 A 节点对象
5
6   // e.container 用来捕捉事件的父节点对象，在示例中是 ul 节点对象
7 }

综上可以看出，通过 delegate 来监听事件是一种很好的方式，它可以避免很多冗余代码并且简化操作，在某些场合尤其有用。

本文链接

如何做一个优秀的设计？

2009-11-12T13:29:00Z

做一个优秀的设计，要做到以下三点：找准问题提供多种解决方案发布后衡量效果，分析并总结具体如何来做呢？第一是找准问题。设计是解决问题，“Design= Problem Solving.” 这是我认为对设计最好的定义。根据这个定义，我可以说，找准了问题，优秀设计的就成功了一半。那么怎么样找准问题呢？首先要搞清楚什么样的用户，遇到了什么样的问题。很多时候设计师认为自己很清楚用...

JavaScript 闭包

2009-10-30T02:22:00Z

要成为高级 JavaScript 程序员，就必须理解闭包。本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。原文链接：JavaScript Closures 可打印...

jQuery Ajax 全解析

2009-10-30T02:20:00Z

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callba...

创建存储过程

2009-10-29T15:08:00Z

Create PROCEDURE创建存储过程，存储过程是保存起来的可以接受和返回用户提供的参数的 Transact-SQL 语句的集合。可以创建一个过程供永久使用，或在一个会话中临时使用（局部临时过程），或在所有会话中临时使用（全局临时过程）。也可以创建在 Microsoft® SQL Server™ 启动时自动运行的存储过程。语法Create PROC [ EDURE ] ...