基于Canvas的热力图绘制方法
发布日期：2010年8月31日
一. 介绍
最近参与的一个项目Marmot中需要根据点坐标绘制热力图。
热力图
以特殊高亮的形式显示访客热衷的页面区域或访客所在的地理区域
特点为：
1. 可以显示不可点击区域发生的事情。你将发现用户经常会点击那些不是链接的地方，也许你应该在那个地方放置一个资源链接。比如：如果你发现人们总是在点击某个产品图片，你能想到的是，他们也许想看大图，或者是想了解该产品的更多信息。 同样，他们可能会错误地认为特别的图片就是导航链接。
2. 热力图同时还能告诉你，页面的哪些部分吸引了大多数用户的注意。这对那些对web分析数据没有很多经验的产品人员非常有用。
3. 如果你在一个页面上有多个链接指向同一个URL，例如：如果有不同位置的3个链接指到同一个特定的产品页面 ，那么热力图将会显示你的访客最喜欢点击哪一个链接，这将帮助你提升网页的设计并让它对用户更加友好，不过实现这个功能需要一些设置。
…………
实例如下：
认知维度与API的可用性评估
发布日期：2010年8月20日
类别：JavaScript, 前端技术, 未分类 | 评论(3)
什么是认知维度
认知维度（也称作符号认知维度，Cognitive Dimensions or Cognitive Dimensions of Notations，简称CD）是一套关于符号标记、用户界面和编程语言的设计原则。
认知维度提供一种轻量级的方法来帮助分析设计，它包含了14条不同的维度来指导设计。 more »
js selector设计及实现（一） 实现思路
发布日期：2010年7月21日
类别：JavaScript, 前端技术 | 评论(10)前言
前阵子和伟大的JK同学学习了一下目前我们框架里新版本的selector，这里列的是第一版selector的代码思路。
后一版本调优性能，多了些函数，从性能上与各大框架比还是有竞争力的。
说句实在话，虽然各大框架和库都实现了selector。但看他们的selector实现其他的人看上去无疑都是难看懂。
而google,baidu上query出的结果基本都是说使用方式的文章，基本没有类似针对selector设计和具体实现上的文章。
所以，决定将整个思路和实现写出来，一来是增加印象，二来是给目前想写的人以参考。
我是以我学习及写selector的角度及把我向JK学习思路和我自己的设计，代码写的思路写出来。
这篇文章我也想不到写了这么长。建议这么看比较好：
- 不熟悉selector用户先去熟悉了休息会，再看此文；文中没有写详细的selector的具体内容，只是为了描述，大略的提了下；
- selector了解了之后再看看思路；顺序解析还是比较容易看懂的；
- 后文中的js代码里，我做了详细的注释，结构也和文中提的代码结构一样，有兴趣的同学可以读下，这个selector代码暂名为：Fox，接口为Fox.query(selector, context)。
代码可以点这里下载和测试。
此份代码已经注释，比较简单，我没去写优化的代码，之所以代码里面不写，是因为写了解释起来很绕，熟悉思路先吧，以后详细优化的文章及代码可以抽空再写。
OK，开始吧。
初探 jQuery 的 Sizzle 选择器
发布日期：2010年7月15日
类别：JavaScript, 前端技术, 未分类 | 评论(5)这是一篇关于介绍jQuery Sizzle选择器的文章，由我和obility共同完成。在文中，我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理，以及末了以少许文字给你展示出如何借用Sizzle之手实现自定义选择器（也许更标准的叫法叫做过滤符）和它与YUI 选择器的大致比较。
前序
jQuery相比1.2的版本，在内部代码的构造上已经出现了巨大的变化，其之一便是模块的分发.我记得09年在jquery 9月开的一次大会上 john放出的一张ppt上 也指出了当前的jquery下一步目标，不仅仅是除了sizzle选择器的分离，届时core，attribute，css以及manipulation，包括event也都会独立成单独的js文件.（1.4的文件结构，其实已经分成单独的16个模块的组成）
随着jQuery被用来构建web app的场合愈来愈多，它的性能自然受到了大部分开发者的高度关注，它的内部实现机理又是如何，比如选择器的实现。
Sizzle，作为一个独立全新的选择器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool, Dojo，YUI等。
好了，现在来看为什么Sizzle选择器如此受欢迎，使它能够在常用dom匹配上都快于其他选择器而让这些框架们都垂青于它。
如何安全地嵌入第三方js – FBML/caja/sandbox/ADsafe简介
发布日期：2010年7月07日
类别：JavaScript, 前端技术 | 评论(11)xss是前端经常会遇到的问题，由于页面中的js都执行在同一个上下文中，意味着一旦出现xss漏洞，攻击者就能享有和页面其它部分js同样的权利，能做任何事情
所以一般情况下我们都会对用户输入进行过滤，禁止任何js的执行。但有时由不得不嵌入第三方js，如Google Adsense，这时就只能完全信任它，而没有机制来避免它的恶意行为，另外还有一种方法是通过iframe嵌入，但这样又会遇到不少问题，如高度调整等，而且同样不能避免第三方的恶意行为，如使用ActiveX
是否还有其它方法呢? 文整理了facebook、google、microsoft、yahoo对于这个问题的解决方案，希望能给大家带来一些启发
Web Storage全解析
发布日期：2010年6月21日
类别：HTML/CSS, JavaScript, 前端技术 | 评论(6)Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL（不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。
动画效果在地图产品中的运用
发布日期：2010年1月06日类别：JavaScript, 前端技术 | 评论(6)百度地图产品运用了大量的动画效果，比如：操作鱼骨或快捷键使地图移动、鹰眼控件的展开和收缩、滚动鼠标滚轮使地图进行缩放。PM对动画效果提出了平滑，流畅的要求，那么如何才能做到呢？
1 什么是动画
先来看看wiki上对动画一词的解释：动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。在网页中，可以将每一时刻的页面看做是一帧静止的画面，当每个时刻的画面产生差异时，就会产生动画效果了。网页中的动画形式很多，比如一副gif图像，一个flash或者是用脚本控制的页面元素的移动。这里，我们只关注js脚本控制的动画。这种动画的本质就是在每一时刻改变页面元素的属性。由此我们得到动画的两个关键组成部分： more »
