how i develop carousel module

我是这样开发 CAROUSEL 的明城

LIFE IS HARD

“明城，别光顾着看蝇头小报了！”

“赶紧快给我写代码⋯”

“我们新首页需要个脚本⋯”

“这块、这块⋯ 噢还有这块归你了！”

“噢！开始了！”

以 Carousel（旋转木马）为例

等等⋯

所谓大师，在写脚本之前都会⋯

都会看看前人怎么写

Tbra 1.0 的 SimpleScroll

它足够老，但是至少还能工作

配置项有些少，感觉不够灵活

没用动画组件，效果有些少

不够 “KISSY”

assets:/tbra/1.0/build/widget/simplecroll.js

YUI 2.x 的 Carousel 组件

有些过于庞大，代码太多懒得看

组件与组件之间层层继承“辈分太小”

新版首页上不适合

http://developer.yahoo.com/yui/carousel/

I HAVE A DREAM

我理想中的 Carousel 组件

精简、简单小巧

接口弹性高，定制方便

具有一定的容错能力

效果要好

需求遵循 8/2 原则

⋯

“说你那，别流口水了，赶紧敲键盘”

“痛⋯痛⋯555⋯”

分解组件要素

想到我那凄惨的童年，555…

木马 ～ 元素

旋转速度 ～ 定时器间隔

旋转花样 ～ 滚动效果

音乐 ～ 装饰性的回调

接口很重要

KISSY().use("carousel", function(S) { var handle = new S.Carousel('sample', { direction: 'h', autoStart: false, speed: 500, scrollWidth: 400, onBeforeScroll: function() { // ... } });

// handle.next(); // handle.prev(); // handle.jumpTo();});

开始编写代码

第一版

嗯，实现是实现了，但是⋯

代码还是有些臃肿，将近 270 行（好数字）

ie 下有 Bug，滚动有误差

一些变量命名拿捏不好

代码注释很“无力”

呃，人生总是充满着杯具

第二版

继续改进代码逻辑以及接口

呼，看起来好多了⋯

但是，代码反而更长了⋯

看看增加了哪些“废话”

增加初始化容错判断

增加“海量”注释- 就怕别人以及以后的自己看不懂

修改变量命名以便更容易理解

有时候，代码“又臭又长”不见得就是件坏事

这时，看出来有两个地方代码功能明显重复 jumpTo 和 play 方法

悟

不要过早优化，代码结构和实现逻辑优先

组件的变量命名很重要

优化和改进犹如牙膏，挤挤总会有

第三版

剔除重复的代码，代码行数骤减

再次更改变量名，不耍宝了⋯

注释还是继续加，剔除些废话

接口还是要改改⋯

将回调（callback）抽离配置项

KISSY().use("slideview", function(S) {

var slideView = new S.SlideView("sample", {

autoPlay: false,

effectType: "scrollx",

activeTriggerCls: "current"

});

slideView.subscribe("onSwitch", function(index) {

// ...

});

});

简简单单，完成回调

KISSY.augment(ScrollView, Y.EventProvider);

“有些事儿没法说细⋯”

呼，似乎看起来差不多了⋯

等等，还有 ie 下的 Bug 没搞定呢

我恨 Internet Explorer

信 Google ，上本科！

解决 ie 下的 offsetLeft 计算误差

在父元素具有 padding 的情况下，会造成子元

素 offsetLeft/offsetHeight 计算有误差

var getRealOffset = function(elem) {

var elem = Dom.get(elem), leftOffset = elem.offsetLeft,

topOffset = elem.offsetTop, parent = elem.offsetParent;

// fix IE offsetLeft bug, see

// http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/

while(parent) {

leftOffset += parent.offsetLeft;

topOffset += parent.offsetTop;

parent = parent.offsetParent;

}

return { top: topOffset, left: leftOffset };

}

呼，似乎大功告成

什么？还有⋯

最终稳定版

代码要对“压缩友好”，代码挤挤总会变小的

如何“压缩友好”代码

将频繁出现的常量扔到个变量中

将 this 等关键字也一样扔到个变量中- 以后闭包中用得到- 处于绑定作用域的习惯

DOM 的 getElementByXX 系列又臭又长

如何给变量好的命名？

好的变量命名应该是⋯

简短、一针见血

没有“装逼”的专有名词

看起来都是爹妈生的 -- 就坚持用一种命名法则

类名、属性名用“名词”或者“动名词”如：Woman、money

方法用“动词 + 名词”的方式如：getNextOffsetByParent 表打我⋯

更多参见： http://coolshell.cn/?p=1990

下一步计划

更 “KISSY”，灵活度更高

⋯

追播广告

云谦 和 玉伯 的幻灯更精彩！

云谦：http://www.chencheng.org/blog/2010/01/05/dev-share-for-taobao-new-homepage/

玉伯： http://lifesinger.org/blog/2010/01/the-beauty-of-refactoring/

KISSY 项目地址： http://code.google.com/p/kissy/

感谢是发自肺腑的

感谢 玉伯 几乎过了每行的代码

场下的表羡慕

信伯哥，上本科

感谢 云谦 容忍我几番的频繁更改

感谢 谠 和组织给我那么宽松的环境发展

最后，感谢 大家 能容忍我讲了那么多废话