how i develop carousel module
DESCRIPTION
TRANSCRIPT
我是这样开发 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 表打我⋯
下一步计划
更 “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/
感谢是发自肺腑的
感谢 玉伯 几乎过了每行的代码
场下的表羡慕
信伯哥，上本科
感谢 云谦 容忍我几番的频繁更改
感谢 谠 和组织给我那么宽松的环境发展
最后，感谢 大家 能容忍我讲了那么多废话
