博客园_问道者博客

Flash合照成员信息提示组件

2010-12-07T02:25:00Z

一、组件简介

这是一个简单的FLASH组件，用于快速给合照的每个成员添加个人信息，然后把合照生成一个SWF文件在合照成员间分享。它的功能类似bing.com搜索的图片局部提示，也与QQ相册的圈圈评论功能类似。

这个组件效果以"2010年11月广州Web标准化交流会（新浪）"提供的JavaScript版合照作为原型。

【查看演示】

二、组件功能

1、利用FLASH IDE，添加相片提示效果支持拖动编辑，编辑所见即所得；

2、单张相片支持可变大小的头像响应区域，适用于合照中有人脸部被遮挡的场合

3、提供额外辅助功能以提高编辑的效率，如编辑时可见的头像响应区域，区分完成信息录入与否的不同颜色线框提示

4、生成单个文件易于分享和网络发布，而且文件体积更小

4、不必考虑浏览器兼容问题

5、提供简单的配置，用于生成是否隐藏真实姓名及联系方式的版本，可用于发布网络或内部分享版本

三、环境需求

1、Adobe Flash CS5

2、Flash Player 10

四、使用方法

1、用Flash CS5软件打开项目文件夹中的PhotoTip.fla文件，然后转到库面板，双击MyPhoto.jpg图片，在打开的面板中选择"更新"按钮，设置你的相片文件。

2、设置文档大小，通过以下步骤设置文档刚好与图片大小等同。

3、拖动库中的FaceButton组件到场景中的相片上，注意先在场景下面的时间轴上选择Button层。可以在工具栏上选择"变形"工具改变线框的大小，也可以直接在右侧属性面板修改头像响应区域的大小。

4、在属性面板的组件参数中修改选择头像区域的相片成员信息，完成信息录入后请勾选"完成"复选框，这样默认蓝色的线框就会变成绿色，表明此人已完成信息寻入。重复上面的步骤完成所有人信息的录入。

5、用记事本等工具打开项目文件夹下photo文件夹中的Config.as文件，修改几个参数，主要是相片的标题、大图文件所在的路径，是否显示邮箱及真实姓名等参数。如果标题为空，将不会在左下角生成标题，如果大图路径为空，不会在右上角生成查看大图的链接。

6、回到Flash CS5软件中，按Ctrl+Enter测试影片，然后在项目文件夹生成PhotoTip.swf文件，这就是我们最终需要的文件。

五、源文件下载

PhotoTip.rar

本文链接

JavaScript学习历程和心得

2010-08-14T08:59:00Z

2010-7-31，Web标准化交流会（广州场）如期在网易会议室举行，本期的主题是《前端工程师应该如何学习JavaScript》。Web标准化交流会是一个很好的活动组织，与会人员都比较积极发表自己的看法和分享自己的工作经验，受这种氛围影响，回来后我也决定分享一下我的JavaScript学习历程和心得。

一、前言

在过去，JavaScript只是被用来做一些简单的网页效果，比如表单验证、浮动广告等，所以那时候JavaScript并没有受到重视。自从AJAX开始流行后，人们发现利用JavaScript可以给用户带来更好的体验，甚至利用这一优点开发了大型网页游戏，于是这门小语言被重视了起来。现在，很多公司会招专门的JavaScript工程师，通常JavaScript是WEB前端开发的必备技能。简单介绍了JavaScriptr的好处，并不代表大家就会去学习甚至把它学好，兴趣是很关键的，我认为兴趣是最好的老师，它是你专心做一件事并把它做好的动力。另外，大家要相信小语言有大作为，我就曾用Greasemonkey写过一些非常实用的工具，比如你可以用JavaScript+Greasemonkey写在线网页游戏的外挂程序。下面说说本人学习JavaScript的历程和心得吧。

二、入门

1、学会DIV+CSS布局

使用DIV+CSS布局标准网页，可以使前端XHTML代码更少、结构更清晰，这有利于轻松用JavaScript操作DOM，比如，要展示一个3行3列的列表，如果用传统的表格布局，现在要你用JavaScript动态生成这个列表，那么就需要一个循环嵌套，如果采用li结构加CSS浮动布局，一次循环就好了。当然，WEB标准化不是一定不能使用表格，我的意思是结构清晰的XHTML更易于把JavaScript效果或功能整合到项目中。

2、掌握几种开发测试工具

做为一个开发人员，熟悉测试工具是必须的，这有助于提高你发现问题和解决问题的效率，对于特别大的项目更是如此。JavaScript和XHTML开发测试利器我就先推荐两个最常用的，它们是：Web Developer和Firebug。

3、熟悉JavaScript每一个方法的作用

这一要求听起来似乎有点不太实际，我想这个要求对于像C#、JAVA这些大型语言来说确实是，因为这些语言类库实在太庞大了，相信没有人可以全面记住它，而且也是没有必要全部记住，比如用JAVA做网页与手机开发所关注的类库是不一样的。而JavaScript则不是，它的内置方法函数真的不多，先全面熟悉一下，开发起来也将得心应手，比如，你一开始可能认为JavaScript有trim()这个很多语言都有的去行头行尾空格的方法，当你了解JavaScript内置函数库后你会发现原来在JavaScript中这些方法是要自己去实现。再比如，如果你是从其它比较强大的语言转过来玩JavaScript，你又可能认为JavaScript应该有MD5加密的方法，当然这也是没有的，但有人用JavaScript实现了这样的方法，即JavaScript MD5。说到底JavaScript内置方法少的可怜，但很多牛人写了一些新方法增加JavaScript功能，比如prototype框架主要是对JavaScript基础函数进行原型扩展的。

4、了解DOM编程

了解DOM编程算是学习JavaScript过程比较重要的课程，因为JavaScript除了编写一些纯数据处理的逻辑外，更多的是在动态更改XHTML的结构和内容，以达到界面动态更新的目的，而这些工作都要依赖DOM编程。jQuery框架在这方面封装的相当好，提供了丰富的DOM操作方法，可以让你轻松找到页面任何地方的一个DOM节点（XHTML标签），然后进行相关操作（增、删、改、查）。对于有过用其它语言操作XML文档经验的朋友，相信这一块很快上手。

5、接触并使用AJAX

在今天，学习了JavaScript而不使用AJAX，那是埋没JavaScript优势了（AJAX本身并不能算是JavaScript内容）。AJAX对于用户以及服务器来说都是有好处的，对于用户，提供更好的用户体验，最典型的一个应用场景：注册页面的用户名可用性预检测，传统的可能会遇到这样的问题：用户填写了一堆资料后提交表单，结果被服务器告知这个用户被注册了，要用户重新填写资料注册，这对于大型多用户网站那是很致命的，因为用户输10个用户名可能有一半已被使用了。对于服务器来说，减少网页流量，因为AJAX后，一般是按需加载数据的，不会因为局部更新而重新加载整个页面。比如一个网页占三屏高，我们可以默认只加载第一屏的内容，当用户拉动滚动条往下的时候，再加载二三屏的内容。另外像WEB在线地图应用也是AJAX使用的典范。

三、提高

1、深入理解JavaScript this关键字

JavaScript this的作用与指向跟很多真正面向对象的开发语言是有很大差别的，它不始终指向当前对象，是会变化的。如果不注意这个问题，就有可能遇到看似没错的代码报错或不执行等问题。

2、学习JavaScript OOP编程

OOP是个好东西，它使程序员思考问题更有组织性，代码的组织也更清晰。JavaScript 也可以OOP，但与一些传统的OOP语言同样存在较大差别，所以要真正用熟JavaScript OOP也是需要下点功夫的。

3、了解闭包

JavaScript闭包也是被谈得比较多的一个话题，闭包使JavaScript变量作用域变得复杂起来，但这一特性又使这门语言变的更灵活了。

4、学习规范开发

团队精神相信大家是听过不少了，就职一个公司做开发，当然离不开团队，团队要想合作愉快，每个成员的编码必需符合一定规范，这也是每个公司对程序员的基本要求。关于规范通常指变量命名、文件组织、注释规范等，这方面知识与其它语言的规范是有相通性的。

5、找本算法的书读一读

我认为学会并使用一门语言并不是什么难事，难的应该是用语言这基本的语法与语句去解决一些复杂的问题。要解决一些复杂的问题，可能会用上一些算法，有些算法实现可能是一个团队在做的，比如中科院中文分词的具体实现，另外像游戏常用自动寻径A*算法等。也许你认为你不可能在JavaScript开发上遇到这么复杂的问题，其实这还要看你在做什么项目，如果你是在开发大型网页游戏，通常面临更多具有挑战性的难题，如果你有读过一些算法书籍，了解一些常见问题的解决方法，在开发过程中自然会如虎添翼。另外，熟悉算法显然对于你日后接触其它开发语言也是有帮助的。

四、习惯

1、兼容、BUG问题做好笔记

CSS与JavaScript浏览器兼容问题最好做好笔记，因为这些问题，或者说BUG是比较诡异的，这些问题浏览器不会提示你错在哪里，IDE也不会提示你，特别是CSS兼容问题，这就会导致你在开发过程碰到这样的问题会卡老半天得不到解决。即使之前解决过同类问题，以后可能又会碰上，结果之前没有做好笔记加强记忆，注定你要再受罪一次，因为这些兼容问题不是一两个，临时记忆效果是不明显的。以我经验，很多问题是在IE6下发生的，现在IE6连微软自己都希望加速它灭亡，这对于前端开发的我们来说当然是一个好消息。

2、阅读优秀的代码，比如jQuery

阅读优秀代码绝对也是自我提高的好方法，这不仅可以了解优秀代码的组织规范，更可以了解一些功能的实现思路。比如jQuery就是一个非常值的学习的JavaScript框架。当然了，要阅读这样专业的JavaScript框架，JavaScript基础要扎实，不然看的过程中会遇到太多疑问，甚至对自己的信心也是一种打击。

四、注意

1、在JavaScript入门之前避免直接使用JavaScript框架做开发

如果你没有任何JavaScript基础，请不要直接使用JavaScript框架做开发，我认为这可能会误导你对一门语言的认识，比如你直接使用了jQuery用点连起来的语句写法，你是否会认为这是JavaScript语法的一种呢？再比如你使了prototype你不要把框架扩展后的基类方法认为是JavaScript内置的。我认为JavaScript框架是用来提高效率的，它绝对不是JavaScript入门应该学习的。

2、网上找的很多例子可能不是跨浏览器兼容的

有很多JavaScript效果源码是N年前某网友写的，N年前是IE的天下，于是一些前端懒得解决脚本跨浏览器兼容问题，使写出来的脚本只适用于IE。当你得到这样的一段代码，请不要说垃圾，也不要为此发牢骚，因为这些代码并不是没有一点价值的，如果你了解JavaScript跨浏览器兼容问题，相信你可以很轻松通过少需修改使代码有更好的兼容性。

五、相关阅读

《JavaScript开发规范要求》

本文链接

JavaScript开发规范要求

2010-06-11T04:00:00Z

作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。

1、保证代码压缩后不出错

对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。

2、保证代码能通过特定IDE的自动格式化功能

一般较为完善的开发工具（比如Aptana Studio）都有代码“自动格式”化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。

3、使用标准的文档注释

这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。

4、使用规范有意义的变量名

使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。

当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等：

var li = document.getElementsByTagName('li')
var lis = document.getElementsByTagName('li')

5、不使用生偏语法

JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。

比如这语句：typeof(b) == 'string' && alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到&&前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。

又比如：+function(a){var p = a;}( 'a')应该改为：(function(a){var p = a;})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。

再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。

6、不在语句非赋值地方出生中文

语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用“易语言”做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：

this.user['名字'] = '张三'　或者　this.user.名字 = '张三'

7、明确定义函数固定数量的参数

固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面：
var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}

8、不必热衷动态事件绑定

虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。

9、降低代码与XHTML的耦合性

不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题：

function myBtnClick(obj)
{
　if (/确定/.test(obj.innerHTML))
　　alert('OK');
　else if (/取消/.test(obj.innerHTML))
　　alert('Cancel');
　else
　　alert('Other');
}

上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：<input type="button" onclick="myBtnClick(this)" value="确定" />，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。

10、一个函数应该返回统一的数据类型

因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return false;
}

应该改为：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return "";
}

这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作“非”，即与false一样，除非我们使用全等于“===”或typeof进行判断。

11、规范定义JSON对象，补全双引号

使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。

12、不在文件中留下未来确定不再使用的代码片段

当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。

13、不重复定义其他团队成员已经实现的方法

对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢“单干”，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。

比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。

14、调用合适的方法

当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。

温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。

15、使用合适的控件存储合适的数据

曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：<div id="json">{ "name":"Tom"}</div>，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：<input type="hidden" value=" { "name":"Tom"}" />。

其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：<script>window.userData = { "name":"Tom"};</script>，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。

16、永远不要忽略代码优化工作

代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。

举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。

当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。

17、会分析策划文档，能用面向对象方法进行接口定义和代码组织

这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。

本文链接

HTML5不可能是FLASH的杀手

2010-04-24T09:22:00Z

一、写在前面

近来HTML 5被炒得很热，一来因为它是功能强大、实用的下一代开放式WEB标准技术，引起关注是顺理成章的，二来很多人说HTML 5会成为Flash和Silverlight杀手，这在富应用开发界引起不小骚动。我作为一名普普通通的WEB前端开发工程师，HTML、FLASH也算接触不少，而且非常喜爱FLASH，下面是我阅读了大量专题及论坛帖子总结出几点FLASH不亡的理由，希望增加做FLASH开发网友的信心。另外欢迎大家继续就HTML 5与FLASH相关话题展开讨论。

二、FLASH相对HTML5的优势

1、HTML5到目前为止都还没有实现全部功能，走向成熟更是还有一段很长的路要走，在这段时间内，像FLASH这个很早就上路的产品当然也会不断完善以巩固自己的地位。

2、Adobe的开发工具副总裁Dave Story表示“浏览器市场仍然很零散，浏览器之间的兼容问题非常严重”，这点是显而易见的，要不同浏览器厂商短期内完成对HTML5的支持也是不现实的，人家也要核算成本与市场风险的，另外要完全实现HTML5的标准也有一定的困难，比如在视频编码方面就难以统一，因为有些技术是申请了专利的，要在自己浏览器使用这一技术是要交专利费的。

3、HTML5新加的视频与画布标签，其实功能是比较简陋的，试想一下单纯（不借助JavaScript）利用HTML5能实现像“QQ农场”或“开心餐厅”这样的应用吗？更不用说实现一些FLASH大型在线网络游戏了。而且现在的FLASH不再仅仅用来开发WEB应用，AIR桌面应用开发也是轻而易举的。

4、FLASH技术不仅仅是用于界面描述，利于强大的ActionScript语言控制逻辑相当灵活，虽然HTML5增加了一些创新、实用的标签，但是相对今天要求越来越高的网络环境，HTML5的功能还是不够用的，最终还得请JavaScript这个帮手。

5、有且仅有一个运行时绝对是开发者的福音，如果你做过WEB前端开发，相信你也曾经被CSS及JavaScript在不同浏览器下的兼容问题搞得晕头转向，不过现在随着浏览器版本的升级与完善，各大浏览器都向标准靠拢，这一情况算是有点好转。像早期的IE6，一个拥有用户群最广确又是最多问题的浏览器，作为前端开发人员还是得解决各种兼容问题，以使作品在最多访客电脑上呈现正确。

三、最后总结

HTML5出发点及其架结绝对是优秀的，但它的成熟以及得到各大浏览器的完美支持不仅需要时间，也许还要处理各种利益关系。FLASH相对HTML5，虽然在搜索引擎友好方面一直存在缺陷，但ADOBE公司会努力完善或解决这个问题，同时FLASH还能做很多HTML5做不了的事情，比如与服务器建立Socket连接实现即时聊天等功能，另外FLASH家族产品也不少，这也是让FLASH锦上添花的，要知道这个出于全球知名图像多媒体与网络开发工具公司的作品我们有理由相信它的实力，就像做C#的人常说，跟微软走不怕没饭吃。其实我觉得HTML5与FLASH应该是一种互补关系，HTML5的出现可以解决部分早期只有FLASH才能实现的功能，而FLASH则可以分身做它最擅长的事情。

四、参考资料

链接：HTML 5下一代Web开发标准详解

本文链接

利用Flashbug插件查看AMF数据

2010-04-22T01:10:00Z

一、什么是AMF

AMF是Flash与服务器进行通信的一种编码格式（为了方便理解，你可以暂时把它理解为与XML相似的技术），但它是以二进制数据进行传输的，客户端采用POST形式进行数据提交，它的最大特色是可以直接传输复杂的数据类型，比如数组、普通对象、日期对象等，而且可以对传输的数据进行压缩以提高传输速率，另外结合Flash Remoting网关（FluorineFx、amfphp、OpenAMF），通过远程过程调用（RPC）可以在客户端方便调用服务器定义的公开方法并得到返回的数据。所以它的设计是为了提高数据传输速率，提高开发效率的，目前在一些基于Flash开发的大型网页游戏中都能找到它的踪影。本文讲解一个有关AMF插件工具的使用，一方面是为了方便开发测试，另一方面也是希望通过此工具了解基于AMF开发的成功网站的通讯数据。

二、什么是Flashbug

Flashbug是Firefox（火狐）浏览器的一个插件，而且它是架构于Firefox另外一个知名插件Firebug之上的。这个插件用于查看网页中的Flash trace输出的信息以及与服务器之间的通信情况，另外支持查看基于AMF通信方式架构程序与服务器通信的数据（因为AMF是二进制传输的，所以不借助工具只能看到一堆乱码）。

三、Flashbug安装环境与安装方法

Flashbug作为Firefox的一种插件，它的安装文件是标准xpi后缀的，如果已下载这个文件，可以直接拖动到打开的Firefox浏览器窗口开始安装，也可以直接访问Firefox插件网站，直接找到这个插件详情页，然后点击旁边的“添加到Firefox”按钮开始下载安装。

因为Flashbug是基于Firebug的，所以要先安装Firebug插件，而且为了能使用上AMF检视功能，还要安装较高版本的Firebug，要安装高版本的Firebug通常也意味着要使用较高版本的Firefox浏览器，为了方便起见，建议一次把所有配置升级到最新版本。

Firebug插件下载地址：https://addons.mozilla.org/zh-CN/firefox/addons/versions/1843
Flashbug插件下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/14465

另外要想利用Flashbug看到Flash中trace输出的信息，还得给Firefox安装Debug版本的Flash播放器。

最新Debug版本Flash播放器（for Netscape-compatible browsers适用于Firefox浏览器）下载地址：http://download.macromedia.com/pub/Flashplayer/updaters/10/Flashplayer_10_plugin_debug.exe

上面这些信息可以通过“开发者注释”原文了解到，一定要注意插件版本：

1、This add-on requires Firebug to work properly.
2、For traces to work properly you must use Flash Player Debug version.
3、For AMF inspecting on the Net Panel you must use Firebug 1.4+

四、Flashbug使用方法

Flashbug使用方法非常简单，通过Firefox“工具”栏，或者点击“状态栏”右侧甲壳虫图标打开Firebug窗口，点击切换到“Flash Console”标签，就可以看到网页Flash的trace输出信息，还有Flash请求策略文件（crossdomain.xml）的过程，以及Flash使用Shared Objects（在Flash上使用的一种类似Cookie的对象）数据。如下图：

要查看AMF数据，切换到“网络”标签，然后再找到有关Remoting网关请求的地址（一般请求地址包含Gateway字符串，我的例子是使用了FluorineFx开源.NET网关的一个现成例子），点击展开，如下图：

通过Response → data → body → source即可查看到服务器返回的信息，如下图，请注意我划框与连线的地方。

本文链接

jQuery AJAX回调函数this指向问题

2010-02-07T14:32:00Z

了解JavaScript的人都知道JavaScript的this不总是指向当前对象，函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的。如在全局作用域调用一个含this的对象，此时当前对象的this指向的是window。为了让this的指向符合自己的意愿，JavaScript提供了两个方法用以改变this的指向，它们是call和apply，当然也有利用闭包来实现的方法。本文通过一个例子来说明这些问题。

toString()，一个会自动调用的方法

2010-02-07T04:39:00Z

toString方法的作用是不用多说的了，这个JavaScript内置方法还有一个特性是：在执行一些特殊方法的时候，比如alert或innerHTML等方法，它将由脚本解析器自动调用。这一特性显然有助于你偷懒，当然也有利于实现一些特定的功能。为了说明这一特性，下面从一个实际开发案例说起。

对数组Array进行原型prototype扩展后带来的for in遍历问题

2010-02-04T16:07:00Z

不同的程序语言都有多种循环语句，而且功能是差不多的，当然使用场合还是有些区别的，比如for与for in，for in比较好用，它不需要预先知道对象属性的长度。通常在JavaScript中用for与for in遍历数组结果是没有什么区别的，它的循环变量i都是从0开始的数组索引（for in如果遍历的是非数组对象的属性集合，则这个i就是属性名，或称之为key）。另外要注意一点是：用for in遍历数组，循环变量i是字符串类型的。如果对Array进行原型扩展后，再用for in来对数组进行遍历时就要注意些问题了。

JavaScript事件冒泡应用实例

2010-01-10T09:00:00Z

在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。然而，在今天一些大型的WEB交互项目中，比如大型的WebGame项目，JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。

jQuery1.2后已删除XPath选择器支持

2010-01-07T04:20:00Z

jQuery的DOM选择器或者说查找技术绝对是行业最强大的，它支持CSS1~CSS3选择器，而且在1.2之前版本还支持XPath选择器。根据jQuery1.2更新日志得知，要想在jQuery1.2之后继续使用XPath，可以使用一个独立的兼容插件。关于这点变动，不经常使用或者不习惯使用XPath的网友可能还没有发现，因为目前网上提供的有关jQuery+XPath开发教程几乎都未提供版本变化影响信息，这很容易让人迷惑，所以我在此作简要说明。另外，根据我测试还发现，那个所谓的XPath兼容插件，似乎在jQuery1.3后不起作用，但在1.2~1.3之间的版本中继续有效。