岁月如歌

这是 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 – 此中有真意，欲辩已忘言。

转眼又过了半个月，汇报下 KISSY 的新进展和相关资讯：

1. 经过一个多月的开发，KISSY Editor 2.0 已初具雏形：

• static-demo.html – 静态载入
• loader-demo.html – 动态载入

下周将进入测试和细节完善阶段。大家有什么想法和需求，欢迎反馈。目前源码已放到 kissy-editor@github 上，欢迎 fork 和 review code.

2. 经过一年多的线上需求反馈，KISSY Suggest 已发布 1.1 版。这不是一个新鲜组件，基本上是各大网站的标配，但要做好做完美并不容易。目前 淘宝, 去哪儿 等站点已采用。很期待在您的站点上，也能看到 KISSY Suggest 的身影。

3. 浩行天下的研究精神非常值得推崇：KISSY 事件模型研究（2）. 没看的赶紧看，可以让你对 jQuery 和 KISSY 的事件机制有更深入的理解。

4. 做为前端开发工程师，不得不深刻关注浏览器占比，下面是淘宝首页昨天的统计数据：

KISSY 类库立足国内，UA 组件里添加了对国内浏览器的嗅探: ua docs
非常期待 IE6 的份额在国内跌破 50%

5. 小鹤与独角兽撰写了两篇入门级的 KISSY 学习心得：Kissy 库学习小结（一） 和 Kissy 库学习小结（二）. 建议一读。

6. 来个预告：lizzie mm 精心制作的 Getting Started with KISSY 系列即将出炉，敬请期待。

7. 最后，作为压轴新闻，KISSY 核心已支持 loader 机制：test-loader.html. 支持多实例和共享机制：loader-demo.html. KISSY Editor 的代码组织和加载机制均基于 KISSY Loader. 我们要使用某个组件时，仅需引入 gzip 后不到 5k 的种子文件 seed.js, 然后 use 调用相关组件即可，比如：

<script src="http://kissyteam.github.com/kissy/build/seed-min.js"></script>
<script>
KISSY.use('switchable', function(S) {
    new S.Slide('#id');
});
</script>

关于 Loader 的部分研究，可以阅读拔赤的文章：KISSY Loader 的设计

快讯完毕，期待您的参与和反馈。

infinte 总是能给我们带来一些新思路新想法：更优雅的兼容

很不错的思路。不过实际操作时，并不好组织。比如：getOffset （获取 elem 相对 page 的偏移量）方法，对于高级浏览器，直接 getBoundingClientRect + win.scrollLeft/Top 即可。对于低级浏览器，比如 Safari 2, 得利用 offsetParent 不断向上回溯叠加。至此，利用文中提及的优雅兼容，可构造：

nullDriver = {};
dhtmlDriver = derive(nullDriver);
w3cDriver = derive(dhtmlDriver);

if(supportsGetBoundingClientRect) {
    w3cDriver.getOffset = function() { ... }
} else {
    dhtmlDriver.getOffset = function() { ... }
}

看起来很美妙，可是问题不这么简单。w3cDriver.getOffset 里，依旧还有浏览器差异，比如在同是 webkit, 桌面版和 ipad 版是有差异的，并且郁闷的是，这个差异不大，就那么一两行代码。传统写法：

w3cDriver.getOffset = function() {
    ...
    if(isAppleMobileWebkit) { // bug fix }
    else { // go on }
    ...
}

按照优雅思路，上面的代码很 ugly, 一个可能的重构： 阅读全文 »

不了解的可以先看下这贴：KISSY Suggest 1.0 发布
这次更新主要有以下几点：

1. 去除对 yahoo-dom-event 的依赖，完全仅依赖 ks-core
2. 去掉了对静态 JSON 数据源的支持，因为实际项目中，从未出现过类似需求。（预告：类似需求将由正在开发中的 combobox 组件提供）
3. 对 PgDn/PgUp/Down/Up 等页面导航控制键的智能响应。由于主搜索框一般会设置自动聚焦，这对键盘用户来说，当打开页面的第一操作不是搜索而是滚动页面时，自动聚焦会带来“干扰”。目前 Suggest 能有效“猜测”用户意图，当你想翻页时，就 PgDn 吧，不用再怀疑键盘是否失灵了。
4. 增强了自定义事件，可以满足过去一年多以来，淘宝对 suggest 的各种定制化需求。
5. 对焦点的管理更加健壮。目前可以满足当提示框下面是 iframe 时（比如页面的主内容是 iframe 的情况），点击 iframe 区域时，也能关闭提示框，无跨域问题。
6. 输入框宽度改变时，提示层显示时，宽度的自动自适应，以及其它一些细节的优化。
7. 支持 ipad 等 touch 设备。（注意：iphone 一代请升级 safari 浏览器到最新版）
8. 文件大小更小了：min 压缩后 8.3k

测试页面：test.html（总共 30 项测试用例，目前除了 KISSY Suggest, 只有 Google 搜索提示能全部通过）
示范页面：demo.html（看下源码，相信你就知道如何使用了）

下载：ks-core-min.js + suggest-min.js

自定义事件简明说明：

beforeStart    // 监控计时器开始前触发，可以用来做条件触发
itemSelect     // 选中某项时触发，可以用来添加监控埋点等参数
beforeSubmit  // 表单提交前触发，可以用来取消提交或添加特定参数
beforeDataRequest  // 请求数据前触发，可以用来动态修改请求 url 和参数
dataReturn     // 获得返回数据时触发，可以用来动态修正数据
updateFooter  // 更新底部内容时触发，可以用来动态添加自定义内容
beforeShow    // 显示提示层前触发，可以用来动态修改提示层数据

KISSY 已于公元二零一零年八月二日发布，下面是相关资讯：

1. Lizzie mm 发布了一篇 About KISSY. “每个框架总有她自身的设计理念，最开始要想清楚的原则，以后就能按照此原则坚定不移的执行下去。而 kissy, 越仔细看就越喜欢:P” 简单质朴的文字，让人心里暖和和的。一起加油!

2. 浩行天下 据说从初中就开始写博文，所以文章质量那是杠杠的：KISSY事件模型研究（1）. 有志于深入了解 KISSY 的，赶快订阅吧。

3. 隆重推荐近期上线迅速红火史上最快上线的淘宝赛马项目：淘网址. 该项目是全世界上下五千年以来，第一个完全基于 KISSY 类库开发的独立站点。别小看它，作为 IT 精英的你可能压根儿不会去用，但是不妨先读读 L 和 W 先生的故事, 或许你就会领会到淘网址的巨大意义了。KISSY 的愿景之一是简洁实用，能用在淘网址上，深感荣幸。

4. 最后，低调隆重预告：淘宝首页已完全重构为仅依赖 KISSY 类库，同时采用了千呼万唤始出来的 cdn combo 服务。除了前端底层的革新，这次视觉设计和 CSS3 的运用上，也大胆尝试。让一直很低调的云谦 gg 都喊爽了：让前端忍不住喊爽的设计元素. 请耐心等待 8 月 6 日，淘宝首页，Thanks YUI, and says goodbye to YUI forever!

5. 不忍心这么快结束此文，爆料下来淘宝面试满分一鸣惊人的 承玉 gg 的近期进展：KISSY Editor 2.0 开发进行时版. 完全基于 KISSY, 完全有理由相信，这将是一个精简小巧，极具潜力超越 CKEditor 的新一代编辑器。很快将会正式转移到 github 上的 kissy-editor 中维护，敬请期待。

还不结束，就不能称快讯了，赶紧洗洗睡去^o^