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/
感谢是发自肺腑的
感谢 玉伯 几乎过了每行的代码
场下的表羡慕
信伯哥,上本科
感谢 云谦 容忍我几番的频繁更改
感谢 谠 和组织给我那么宽松的环境发展
最后,感谢 大家 能容忍我讲了那么多废话