岁月如歌

这是 8 月 26 日在前端架构懒懒分会上的分享：slide@github（请用 Chrome 浏览）

掺杂了两个主要话题：一个是老生常谈的兼容性探测代码的写法，另一个是 JavaScript 比较语句中的隐性转换。

什么叫伪特性探测？看代码：

if(window.ActiveXObject) {
    // 一堆和 ActiveXObject 半毛钱关系都没有的代码
}

微探测的研究和探索精神都很值得推崇，但正式代码中尽量少用。质朴清晰更重要，能节省团队和自己未来的理解时间。

UA 不是恶魔，在大部分情况下，UA 是最可靠的。

探测代码的关键是尽量做到能自适应未来版本和自适应未知设备。针对特定版本的浏览器嗅探不会带来隐患：

if(ie < 7) {
    // 给 ie 增加 css 的 hover 支持
}

想想，上面的代码用特性探测如何写？可以把浏览器嗅探看成是打包了一堆特性的特性探测，只要这一堆特性是稳定的，不会给未来版本带来隐患，这时浏览器嗅探就是合理的，该用时就大胆用。（注意：大部分情况下，不带版本号的浏览器嗅探会给未来版本留下垃圾代码甚至隐患，要慎用。）

第二个话题是解释 a == b 的判断规律，详见 behind-a-gist.html#slide20. 弱类型动态语言，为了方便用户使用，一般都会自动进行类型的隐性转换。Douglas Crockford 认为 == 是糟粕，但实际上只要掌握了其中的转换规律，糟粕也可以成为精华。一个非常棒的应用是：

// 让 UA.ie 的默认值是 undefined, 在 ie 下，UA.ie = ie 的主版本号
// 这样，
if(UA.ie < 8) {
    // 针对 ie6 和 ie7 的代码
}

上面的 API 微设计，利用了 undefined < 8 为 false 的特性，有效避免了不少类库里的冗余写法 if(UA.ie && UA.ie < 8) { }.

探测代码 – 大道无形，道法自然。
a == b – 此中有真意，欲辩已忘言。

是否还记得，去年 10 月份的 美女与汽车 ?
眨眼近一年时光，KISSY 已经从一个开源编辑器的代号，演化成一个开源前端类库的名称。

愿景

KISSY 的愿景是：打造一个小巧灵活、简洁实用、使用起来让人感觉愉悦的前端 UI 类库。

源码

KISSY 基于 MIT 协议，完全开源。目前在 github 上管理：kissy@github
欢迎 fork! 欢迎 pull request!

我们相信，开源能让 KISSY 走向卓越。

文档

KISSY 的文档地址也在 github 上：docs
目前还不够丰富，但请相信我们，想要的，一定会有的。

下载与使用

github 的功能非常便捷：downloads
下载包里包含了所有源码和 build 好的文件。生产环境下使用时，建议引用 build/packages/ks-core-min.js 文件，然后再根据需要引用相关组件的 js 即可。

Version 1.1.0

1.1.0 版本，主要包括 core/css/utils 三大部分。widgets 部分，目前正式发布的仅有 switchable 组件。为了保证质量，接下来会逐步发布 suggest, imagezoom, combobox, overlay 等组件。你的耐心和反馈，能让 KISSY 更完美。

Version 1.2.0

1.2.0 版本已经在开发中，包含的组件：tasklist_v1.2.html
9 月份将发布包括 editor 新版在内的诸多组件，敬请期待。

致谢

看书最不喜欢看的就是啰啰嗦嗦的致谢。但 KISSY 能走到今天，首先得感谢家人的支持，芳芳和小雕，还有爸妈，没有你们的支持，一切皆无可能。其次不得不感谢业界各位朋友和淘宝各位同事的支持。具体名字不用多说，拔赤、沉鱼、龙藏、正淳、明城、云谦、承玉、乔花、龙笛等，github 的提交记录里，已经永久留下了你们的名字。我希望更多的名字，也能很快出现在 commit log 里。还有不留名的二当家、小马、三通等人的支持，就不多说了，你们知道的。

修改下梭罗的一句话：如果一个团队自信地朝着梦想的方向前进，以破釜沉舟的勇气追求想要的类库，那么成功，就不会那么遥远。

深夜发文，有点困，有点累，也有点兴奋。最后给张 KISSY 在三亚度假的图：

将 KISSY 刻在心底，坚持坚强的走下去，何惧浪打风吹。

酷壳上的这篇文章很诱人：检查素数的正则表达式
翻译成 JavaScript 代码如下：

function prime(MAX) {
    var re = /^(11+?)\1+$/,
        n, C = '1', s = C,
        r = [], j = 0;

    while ((n = (s += C).length) < MAX) {
        !re.test(s) && (r[j++] = n);
    }
    return r;
}
alert(prime(10000).length);

作为前端，为了让上面的脚本能在实际页面中应用，还得考虑 脚本在浏览器中的耐心 以及 分时优化处理。

最后，请猛击测试页面：prime-number.html

先看源码：innerhtml-and-script-tags.html

注释里已经写得很清楚，不赘述。
特别有趣的是 img onload 方案，很 nice 的 hack, 在写原生小代码时可以派上用场。

KISSY 的解决方案：dom-create.js 里的 setHTML 方法。
应用范例：

KISSY.DOM.html('#container',
               'some html with script tags<script>alert("Hello, KISSY!");</script>',
               true);

文档：dom-create.html

看代码：

alert(parseInt(0.000001));
alert(parseInt(0.0000001));

第一条语句输出 0, 第二条语句输出 1, 囧。

继续看代码：

alert(parseInt('0.000001'));
alert(parseInt('0.0000001'));

都输出 0, 这才符合预期。

查看 ECMA-262 规范，parseInt 会先调用 toString 方法。问题已逐渐清晰：

alert(0.000001);
alert(0.0000001);

第一条语句原样输出，第二条语句输出 1e-7.
继续翻查 ECMA-262 9.8.1 ToString Applied to the Number Type 一节，恍然大悟： 阅读全文 »