岁月如歌

这是内部的邮件讨论，我觉得可以开放出来，让所有关心 KISSY 的前端都参与进来，集思广益。

—————————————————————–
From: 射雕 [lifesinger@gmail.com]
Date: 2010/7/7

先说一下近期更新，主要是在完善 ks-core, 变化如下：

1. ks-core 原来只包含 kissy-dom-event, 近期借鉴 ext-core / jquery / mootools, 觉得 core 的概念可以扩大，目前 ks-core 已调整为包含以下组件：

kissy,  dom, event, node, cookie, json, ajax, anim

大家讨论下，这样是否妥当？比如 cookie 究竟应不应该放在 core 里？ks-core 究竟应该包含哪些组件？

2. node 模块已经完善好，提供了：

S.one  -  根据 css selector, 返回 Node 对象
S.all  -  根据 css selector, 返回 NodeList 对象

上面两个方法，和 S.get / S.query 是遥相呼应的，唯一的不同是，get/query 返回的是原生 DOM Node/NodeList. 详细可以参考 node docs

KISSY.Node/NodeList 类似 jQuery 全局对象，但只包含 DOM/Event 等方法，我们可以这样写代码：

S.one('#test').parent().next().html('<p>').on('click', function() { /* ... */ });

基本上和 jQuery 的语法风格是一样的，甚至 api 也是一样的。

对 node 模块，大家给给建议，目前 KISSY 的 api 方式是否合适？是否有更好的组织方式？
另外，虽然 api 和 jQuery 类似，但并不全同。如何避免 jQuery 熟手在使用 KISSY 时有可能导致的误用？
阅读全文 »

设置一个元素的高度：

var elem = document.getElementById('some-id'),
     val = '200px';

elem.style.height = val; // 原生写法
YAHOO.util.Dom.setStyle(elem, 'height', val); // YUI2 写法
$(elem).height(val); // jQuery 写法

当val = '200px'时，以上三种写法都能正确工作。
当val = '200xx'时，以上三种写法在 IE 下都抛出异常，在非 IE 下被忽略。
当val = '-200px'时，以上三种写法在 IE 下前两种抛异常，jQuery 忽略。

由于 height 值在不少使用场景下是动态计算出来的，比如淘宝宝贝详情页，就有如下代码：

YUD.setStyle(switchTrigger, 'height', viewportHeight + docScrollTop - detailTop + 'px');

在某些特定情况下，viewportHeight + docScrollTop - detailTop是负数，于是悲剧就产生了：IE 下，将会抛出异常，导致后续代码都不再执行。（这是一个真实的故事，淘宝的部分宝贝详情页，在发这篇文章之前，就因为该异常而导致部分功能不可用）

对于前端类库来说，在设计异常时，要尽可能考虑周全：

1. 异常的作用，是给程序员排查和定位错误用。对于线上代码来说，要尽可能的将异常设计为不打扰方式。比如在特定参数开启下，才会抛出或以 log 的形式输出。

2. 要特别小心浏览器自身 API 异常的不良设计。比如 IE 下对 style.height 非有效值的处理上，就不如其它浏览器。

3. 当然，该抛的异常还是得毫不犹豫抛出来。比如null.method()，所有浏览器都会告诉你错了。类库的 API 在某些场景下也需如此设计，以让开发者第一时间内发现问题。

两句话概括 API 的异常设计原则：

1. 当某个异常不会导致后续代码不可执行时，这种异常在设计时，要尽可能不打扰用户；
2. 当某个异常会严重导致后续代码不可执行并产生不可预期的隐患时，就大胆抛出来。

简言之，就是 API 设计要以用户为中心，包括页面浏览者、类库使用者和类库开发者。

从 Google 的一个细节说起：

整个虚线框都是“Next”的可点击区域。看似不经意，却直接提升了细节的可用性。其它页码也巧妙地和上面的字母 o 一起组成可点击区域。与百度和 Bing 的翻页相比，Google 优胜。

再来看 Twitter 的注册页面：

很大很舒服。到了这个页面，瞎逛都会忍不住去填写填写。提示文字也恰到好处，能提供帮助，不恼人。

我喜欢 Google. 来看下 Google Docs 中的颜色选择 阅读全文 »

土豆的搜索类别选择框，每次点击都让我觉得怪怪的：

1. 点击后，弹出列表的位置与预期不同。潜意识里是下拉列表，结果土豆给了我一个“中拉列表”。
2. 习惯性地用上/下键选择，结果却让整个页面滚动。
3. 一怒之下，想关闭不用了。按下 ESC 键，却没有任何响应。
4. 禁用 JS 后，完全不可用。

类似，淘宝商城也是看起来很美：

除了第 1 点，其它都和土豆一样，可访问性和可用性都存在问题。

解决办法很简单 阅读全文 »

在Platt《Why Software SUCKS》一书中，提及最具决定意义的三大人性：饥饿、性和懒惰。这能解释很多问题：

1. 麦当劳和肯德基，无论食品本身多垃圾，但满足了人性中饥饿 + 懒惰，不成功都难。

2. 六月天，满足了性，无需多说。需要补充的是，饥饿 > 性 > 懒惰。比如六月天再麻烦，依旧能吸引大批会员赴汤蹈火。

3. jQuery的成功，是因为在满足人性懒惰的需求上下了很大功夫：容易上手，方便使用。至于代码，绝大部分使用者是不会去看jQuery源码的，就如绝大部分家庭主妇不会去研究冰箱的运作机理一样。至于性能，大部分情况下也是遇不到的，即便遇到了，大部分用户也不会在意慢个0.1秒。而且网页的打开速度也并不是越快越好。

4. 为何BS模式兴起？为何各种RIA方案中，目前只有Ajax如日中天？为何云计算一夜之间腾云驾雾？懒啊懒。

5. Twitter为何流行？两个字：简单。简单是表象，隐藏的是懒惰。我爱Twitter，就像我爱加菲猫一样。140字，不是限制，是自由。只能输入文字？很好，我本就这么懒。懒对于用户体验来说，就如五弦琴的第六弦，看不见但却至关重要。

6. 再说淘宝网的崛起。我觉得主要因素不是价格便宜，而是满足了人性中的懒。在家里点点鼠标，就能省去现实购物的烦恼，实在太好。至于比价，特别是年轻的网购族，我不信会有多少人去自找麻烦（不愁麻烦去比价的，是因为第一人性：饥饿。随着人类生活水平的再进一步提高，饥饿不那么重要后，比价的作用将更小）。

7. 对于用户体验研究来说，就得疯狂的去想怎样方便用户能更懒地使用产品。很佩服Apple, 推出iPod, iPhone等产品，锲而不舍地让用户能更懒。Windows 7也开始加入这一潮流，这不，还没RC呢，就火爆得不行。《The Laws of Simplicity》，《Don’t Make Me Think》等书籍，贯穿的一个核心理念，也就是一个字：懒。

最后归纳成著名的射雕终极定律：

1. 人性定律：凡是不能迎合三大人性的技术，势必衰竭。凡是能够满足三大人性的软件，终究流行。
2. 懒懒定律：凡是优秀的用户体验，必定是满足人性懒惰的。