HTML5技术而今已不再陌生，不管是趋之若鹜，热情拥抱，还是远远张望，保持距离，HTML5都是技术论坛热门的话题，给人的感觉就是酷、新、看上去很美
任何技术都有他的适用范围，HTML5技术是一种被夸大了的万金油，在目前浏览器支持不一，开发工具，第三方类库缺乏的情况下，HTML5无法解决一切问题，但如果限定它的使用范围，HTML5确实可以优雅的解决很多问题
文章分类： JavaScript
Safari Mobile中的事件处理 – touch, gesture, mouse events
Safari for Mobile中使用触控操作，传统的鼠标事件无法完全支持，比如没有mousemove, dblclick事件，要想灵活处理交互，可以通过监听TouchEvent和GestureEvent，下面是各个事件调用顺序的介绍：
JavaScript中的等价操作符
JavaScript中存在两种等价操作符：相等”==”和全等”===”，前者对不同类型（比如String与Object）也可作等价判断，后者则必须要求类型相同，此外JavaScript中的任何对象都可以判断是非，也就是转换成boolean基本类型，这些都是ECMAScript语言（包括JavaScript）的基础 JavaScript中的四种基本类型 number, string, boolean, object 等价判断首先会判断对象类型，对于全等操作符，类型不一时，直接返回false，而对于相等”==”操作符则会按特定的规则，转换成number, string, boolean这三种基本类型，而后做判断 相同类型间比较 全等操作符（strict equality operator） “===” 如果类型不一致，返回false number，如果相同值，返回true，NaN不等于任何值，包括他自己，NaN可通过全局方法，isNaN(…)判断 string，相同字符序列的返回true，有一种情况，相同的字符串使用Unicode标准可能有不同的编码方式，但遗憾的是，javascript只通过基本的字符比较，所有的字符串在比较之前，会先转换成“正常格式”。参考”String.localeCompare()”提供另一种比较字符串的方式 boolean，同为true或false，返回true 相同引用表示是同一个对象 如果两者都是null或者undefined，表示他们相同 这里需要注意一点，NaN是个怪物，它不等于任何对象，甚至不等于自己： [javascript]NaN !== 0; NaN !== NaN; NaN != 0; NaN != NaN;[/javascript] 相等操作符（Equality operator）”==” 相同类型之间的比较，有的人说等同于”===”，准确的说要除去null 和 undefined外，因为null == undefined ，但 null !== undefined ，余下的按全等的规则 [javascript]null == undefined[/javascript] 不同类型间比较 相等操作符（Equality operator）”==” javascript有四种类型对象，number, string, boolean, object，除去相同类型的比较外，不同类型之间会先通过类型转换，然后对二者比较，按排列组合存在六种情况：… Read more »
JavaScript类继承与属性定义
Extjs的类继承——$.extend Extjs是比较早期的web企业组件，代表了面向对象编程思想在js中的实践，其中最基本的就是类的继承，通过对prototype和constructor的复制和设置实现，但实现代码并不是那么容易，看过extjs的extend代码就会明白其难度，没有相当js经验很难看懂，当年看这块儿费了不少精力，后来考虑到版权问题，以及代码简化的需要，自己实现相关功能，经历几番修改才得以稳定 下面是最简化的实现，以及测试例子，当然这个实现存在些问题，比如对于javascript 1.8中的get set不支持，需要自行改造 function extend(sb, sp) { var sbp = sb.prototype; var F = function() { }; F.prototype = sp.prototype; sb.prototype = new F(); sp.prototype.constructor = sp; for (var name in sbp) { sb.prototype[name] = sbp[name]; } } //test function A() { } A.prototype.name = "A"; function B() { } extend(B, A); var… Read more »
famo.us是什么？
初次访问famo.us，被他的动画和交互效果所震撼，研究过其代码后，发现用到三种技术：matrix3d变换，requestAnimationFrame实现动画，以及物理运动引擎，单从技术上看三者都不难实现，但事物表面背后往往隐藏深意，famo.us的由来和目标却是野心勃勃。
JavaScript模板
原文：https://developer.mozilla.org/en-US/docs/JavaScript_templates 补充说明：原文列举了不少模板方案，但很多都已经不再维护或者久未更新，此外他所说的标准可能是mozilla自己的标准，而非w3c的标准，我简单试用了一些，感觉 PURE 方案还不错，此外大家还可以参阅这里的推荐：http://stackoverflow.com/questions/7788611/what-javascript-template-engines-you-recommend 除（Firefox）自带的XUL模板系统外，还可以使用JavaScript模板，这种方法也可以实现内容格式与结构的分离，但依赖于JavaScript模板引擎通过JavaScript业务逻辑将内容注入到模板中，不需要使用RDF/XML这样的技术 按语法风格 100%基于标准（没有自定义语法） 纯JavaScript（JavaScript函数调用生成HTML） JsonML (没有“浏览器端模板”)，也可以使用JavaScript的JSON子集 domMaster 和 nodejs master_texthtml Mootools Template Engine (null-tech.com) 纯HTML（使用JavaScript选择器找出正常的HTML，按业务逻辑填充） PURE mustache (有一些设计逻辑，但语法简单) Chain.js (死链接); 这里有说明 LightningDOM Mootools Template Engine (zealdev.wordpress.com) XSL XSLTJS (实现跨浏览器支持的XSL模板) E4X E4X for templating (注意E4X已被废弃) 标准友好的（自定义属性或者语法，但大部分采用标准兼容的用法） X/HTML/E4X/XUL 自定义属性和元素 Adobe Spry processing instruction attributes ASP.NET client templates Seethrough (使用具有名称空间的E4X属性和元素，注意虽然E4X已被废弃) XUL Templates (只支持XUL) 纯JavaScript嵌入在HTML/XML设计逻辑（ASP/JSP/PHP或者大括号{}风格） EJS (嵌入式JS)… Read more »
通过JavaScript访问和修改CSS3动画
原文：Accessing & Modifying CSS3 Animations with Javascript By Joe 昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章，文中用了我的一个小例子，详细的说明了代码访问css动画的相关技术 Chris最后写道： 我希望用一个CSSAnimations集合类，通过json或者string存放不同的动画，并使用他们的名字作为key，这样，可以动态的创建一个新的css rule，并添加到document或者rule集合中（以保证跨浏览器），思考中 听起来是个好主意，所以我写了一段JavaScript代码来实现这样的接口 CSS Animation Store 这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来 从GitHub下载CSS Animation Store 下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画 比如，获取名称为”spin”的动画，你可以按下面的代码： var spin = CSSAnimations.spin; 参数spin是一个KeyframeAnimation实例，有下面的属性和函数： keyframes – KeyframeRule 集合 original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型 getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’] getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g…. Read more »