UEDMAGAZINE

彩票首页上线了

jayli — Fri, 23 Jul 2010 11:32:21 GMT

淘宝彩票是我做过的比较快的项目，2周时间就做完了demo，包括三个彩种的玩法购彩，sprite做的也很不科学，只是趁机添加了一些widget，修复了slide里的一些不和谐的bug，包括slide里的旋转木马的功能，其他没有太多值得说道的，一期发布彩票首页yslow做到了77分，已经可以赶上淘宝首页，页头那几个tbra的css和js合并下，能将js和css请求数继续减少3个，应该能做到B，pagespeed得分84分，应该说是超出期望的。

另外，最不和谐的，淘宝公用头的交互简单功能单一，竟然引入3个css和js，这是完全没有必要的，tbra既没有文档也不优化，就为了实现吊顶那几个mouseover，放哪里硬生生的占几个链接是在不和谐，没这些东西,我的页面理应在B级的，二期优化是可以冲A的。

在淘宝，规范早已成空气。。。。

首页的UI，赞夏之

yslow得分，应该说刚及格

killie6的彩蛋，你懂得

这周珍珠奶茶分享会上的pp一张

cubee beta版

jayli — Thu, 15 Jul 2010 14:11:47 GMT

身边越来越多的牛人离开了淘宝，这里只剩下我，还有一坨浮躁。是时候该把做过的东西整理一下了，之前做的一些组件都放在cubee中，等有时间仔细review一遍代码，补充完整注释，争取尽早脱离beta。做这么多项目，明白了一些浅显的道理：一定要遵循正常的项目生命周期，生命周期的完整是产品质量的起码保证；编码的最高境界就是基于接口的抽象，oop本质即是如此，前端领域的抽象和java式的封装继承多态的思路是完全一致的；css和html更容易抽象出“模式”，因此他很简单，但前提是要有规范；设计要远比开发重要，工程师一定要用设计的眼光来看待自己代码和产品，不要让钻研限制自己的视野。。。

cubee需要新的logo，我问jjb用什么logo，jjb说用鸡巴，我就用了一只鸡。就这样吧。cubee已经迁到了github上

项目首页：http://github.com/cubee/cubee.github.com
文档首页：http://cubee.github.com/doc/

更多内容继续补充中。。。

code.taobao.org 山寨？

jayli — Tue, 06 Jul 2010 12:03:39 GMT

http://code.taobao.org
发布了，看了看界面，堂堂淘宝，做出的东西怎么感觉那么山寨啊

我的西湖牛肉羹 & 烧茄子

jayli — Sat, 03 Jul 2010 03:07:26 GMT

第一次尝试做西湖牛肉羹，淀粉放的不够，粘性不大，没有少了羹应有的浓香，不过，拿鸡精和胡椒粉还是比较容易调出味道的，羹出锅后的味道就像在老家吃过的油茶和胡辣汤，在多放点胡椒粉就味道更似了。在一个，最后出锅前的火候稍有过头，香菜放的有一点早，不过影响不大，乘出来后勾一丁点香油就更不错了。

烧茄子基本步骤，1，在淀粉面糊中滚茄块，2，煎茄子，快出，3，用蒜汁加底油加西红柿加热，4，放入煎好的茄子滚两下出锅，o～

KPI与高考

jayli — Mon, 28 Jun 2010 05:31:33 GMT

似乎很多人突然开始对KIP感兴趣，似乎看到了人间邪恶，一定要用长篇申论来证明人间的正道沧桑。我们真的很在乎KIP吗？说你在乎，鬼才信。

本质上、KPI考核和高考没啥区别，是一个集公正的理念、充满妥协的实践与漏洞百出的操作为一身的评价制度。他和高考一样有很多共同点：

1，不是所有的成绩都是优良，一定会有人要为其低绩效付出代价。

2，员工只接受积极的建议和结果，员工面对糟糕的绩效结果时，很少会从自身找原因进行反省，而是自觉不自觉地寻找各种理由进行推诿辩解，试图将其低劣的绩效归因于客观因素。

3，考高分的学生不会对考试制度产生质疑，那些指斥考试制度公平性的人总是成绩糟糕的人。

因此，不要把KPI看的太重，在KPI领域获得赢利是有很多技巧在里面的。因为漏洞百出的体制、官僚化的小群体以及僵化的管理是KPI世界的有机组成部门，我们能够隐忍在这样一个糟糕的环境中，更多的是因为这里有志同道合的人的存在，有适合自己呆的一个小圈子，有更多比KIP有意思的人和事儿，外面的世界该怎么乱就让他乱下去，只要员工感觉圈子散了，缺少小圈子带个人的安全感的话，KIP无论如何也是没办法留得住人的。为什么KIP都是优的人也会离职、为什么KPI很差的人还呆在公司，为什么常常离职时间点会扎堆？总是有原因的，虽然这个原因是那么的不起眼。

如何让自己在KIP中赢利呢，秘诀就是高调，把自己份内的工作添油加醋搞的跟喜报似得、发邮件到处宣扬自己做了多么惊天地泣鬼神的大事。企业其实和社会是一样的浮躁不堪的，其实员工厚着脸皮给自己贴金宣扬自己的本职工作也没什么，关键是leader是否真的有一双慧眼，不被这些无聊无料的邮件冲昏头脑，搞得自己也随波逐流一般没有主见。leader是随波逐流的昏庸还是明察秋毫的公正，我们心里都有数。这时，KIP只是企业政治化的一种代名词，意义早就脱离了KPI本身的语义，纠结于KPI本身也没什么意思了。

Namespace的简写

jayli — Sat, 26 Jun 2010 06:34:02 GMT

YUI3在淘宝彩票中的实践小结

jayli — Sat, 26 Jun 2010 01:38:09 GMT

春风吹战鼓擂，YUI3早就扛起了高端的“前端团队开发”的大旗，昂首阔步的朝我们走来，不管是Yahoo对YUI3的实践，还是D2上克军对 YUI3分享带来的诱惑，无不让人感觉YUI3带给人的感官冲击，如今，淘宝电子杂志、网络文学、彩票等产品已经在使用YUI3，今天，让我们来对YUI3在淘宝彩票项目中的一些实践做一些简介，希望给各位同仁带来一些参考和帮助。

1，天然优良的框架

淘宝彩票是一个包含诸多彩种的产品系列，各彩种之间有相当多的可通用部分，各种数字彩的玩法极为类似，此外，同一个彩种也包含不同的玩法，这些玩法则更加近似。比如这里是双色球、大乐透、时时彩的三星玩法和单双玩法的UI：

可以看到，他们选球的步骤、投注增删改的操作、号码的校验、附加行为（追号、跟单），以及拆单和下单的逻辑，几乎完全一致，他们之间的区别仅仅是，选球的组合形式不同、胆拖的特例、号码位数不同、每位号码个数不同等等，此外玩法的投注原始算法是永远一致的，这样就可以将通用逻辑进行抽离，首先针对数字彩的大类做一个算法库，再者对选球、投注操作、追号跟单等通用的部分做功能的封装，形成功能库，最后最终页面的实现只是将这些零散的功能片段进行组装，并着力实现玩法的各个接口。显然，YUI3是非常适合这种级别的功能分割和模块封装的，比如，算法库，功能逻辑片段和玩法实现之间的层次关系为：

处理模块层次关系正是YUI的强项，代码示意：

YUI.addmojo({
    ’ssc’:{
        path:’ssc.js’,
        requires:['c-framework']
    },
    ‘c-framework’:{
        path:’c-framework.js’,
        requires:['c-tools']
    },
    ‘c-tools’:{
        path:’c-tools.js’
    }
});

在页面中引入ssc（时时彩）的module-name即可：

YUI.use(’ssc’);

此外，各种玩法和功能区之间通过统一的接口连接起来。因为YUI3的模块依赖的机制可以方便的实现高层的module覆盖低层的module，这样就模拟了“重载”，以及“多态”。比如，每个玩法都是用单独的module-name,每个玩法的接口格式均保持统一：

YUI.add(‘module-name’,function(Y){
    Abacus['module-name'] = {
        verify:function(){
            //… 本玩法的选号球的验证
        },
        getNakedBets:function(){
            //.. 本玩法获得原始投注数据
        },
        getWrappedBets:function(){
            //.. 本玩法获得封装后的投注
        }
    };
});

将此玩法根据需要应用到页面中去：

YUI.use(‘module-name’);

这样，在运行时就可以根据key（module-name）得到每个玩法对象，由投注操作（C.Basket）、辅助操作区（C.Donkeyman）去调用这些即时对象的接口来完成整个投注流程，而C.Basket和C.Donkeyman这些逻辑根本不需要知道他调用了谁，只需要知道他调用了“某一类东西中的一个”的方法即可。这样的话，YUI3即为这种级别的功能分离提供了一个天然优良的架构，在后续开发大量功能类似、细节有差异的各个彩种的时候，只要重用度做的合理，二次开发是非常快速，也很方便维护。

2，最原始的解耦思想

在我学习使用YUI的过程中，体会最深的并不是YUI的实现细节是如何精妙，而是框架作者埋藏在源码字里行间最原生最裸露的设计模式精髓——接口。模块通讯依赖于接口，串接各个逻辑使用接口，多态的实现更要靠接口。在YUI里，从Node的封装到Base的构造，万变的架构始终没能离开这最原始的解耦方式，当架构的重心从底层转移到应用层的时候，依然能强烈的感觉到接口在功能解耦方面的威力，比如，在时时彩的页面中共有10中选号玩法，

每种玩法都具有相同的接口，在运行时，功能区域（比如C.Basket投注操作）对玩法的调用始终通过接口，而根本不用在乎调用的是谁。因为每种玩法的接口都是一样的：

3，YUI3不止是“框架”

有人说yui3粒度太高，淘宝又没有combo，高粒度和高性能之间难道是鱼和熊掌吗？非也，动态合并代码是一种思路，和框架无关，和cdn无关，任何人理解动态合并代码的原理手写一个新的框架也不是麻烦事，还有人说yui不能合并非yui的代码，其实只要找对地方稍微hack下yui- loader即可，这些都不是重点，重点在于YUI如何适应开发、测试、发布和bugfix的整个过程，环境太多，调试太麻烦，环境太少，很多bug测不出来，工程师和QA似乎永远是一对矛盾，当然我们可以将线上环境原封不动拷贝到本地，做一个镜像，完全基于本地开发，这成本实在太高，万一一个项目开发时间很长，线上环境更新了好几个版本，本地镜像还是旧的，这就麻烦了，即使有svn，找log，对代码，也够让人头疼的。其实在apache写几个 rewrite规则就可以做到实时镜像（可以参照这里），不管是合并代码，还是调试源码都很方便，不用看着一大堆的压缩代码思前想后的想切换到哪个环境？

时时彩的项目中，page.js既是combo后转存下来的文件，当然，这里无论如何还是要做一下“另存为”的操作，不失为一种权宜之计。

因此，YUI3作为YAHOO前端技术的一小部分，他所带来的开发思路的灵感要远远超过YUI3本身。

4，规范的力量

得益于YUI3的解耦能力，页面功能亦可做进一步划分，纯粹的widget式的交互和功能性逻辑，比如彩票中的选号方法就是功能性逻辑，而页面中比较边缘的不太起眼的交互则是widget式的交互，这类widget式的交互在业务逻辑层面并无语义，仅仅是为了交互而交互，这些快捷交互的代码就可以直接在页面中拼装好，完全不用将这些在业务层无语义的代码参杂进业务逻辑的代码中，比如：

这里包含简单分页、tabview、展开折叠、下拉菜单等，这些快捷交互在页面中的实现大致如下：

TBloader.require(’slide’).onReady(function(Y){
    new Y.Slide(‘J_donkeyman_subtab’,{
        eventype:’click’
    });
});

而诸如slide、simple-page和collapse这些逻辑，则更适合做成widget，这样到处都可以使用了。这里则不得不提到 Y.Base和Y.Widget，为开发者开发组件搭建了一套现成的模板，其实，由此可以窥见YUI对规范的理解，规范的精髓是统一，效率和合理性是次要的，不管是简单的分页，还是复杂点的tabview，但对于简单的widget，Y.Base和Y.Widget似乎有些浪费，但在规范至上的理念中，这又有什么所谓呢，毕竟统一规格可以使得开发者花更少的精力做出更健壮更具重用价值的组件，这也是YUI在复杂度和规范之间做出的取舍，在越复杂的项目中，这种取舍的价值越能体现出来。

5，迷惘在快餐式的前端开发中

这里不得不提及我们越来越没有技术含量的前端工作，相比于传统软件工程师，前端工程师似乎更习惯于堆代码，表面看起来，前端开发用不着算法，也很少用设计模式，做东西没有概设和详设，甚至于没画过流程图，因为前端太“所见即所得”了，不容易看到view背后的control和data，外加上千变万化的需求变更，前端工程师似乎总是在忙着响应五花八门的需求、堆代码实现功能，最后的作品不是用心设计出来的，而是拼凑出来的，即便实现了功能性需求，也很难做到品质的内秀，久而久之，导致一个系统的复杂度完全超过任何人掌控的范围，最终成为二次开发中的最大障碍，那么，你是否也迷失在这快餐式的前端开发中呢？当你再次翻开那本破旧的“数据结构”的时候，是否会有一丝没落？

如果你还在迷惘其中，我只想建议你多读一读yui的源码，或许你会回想起一些关于算法、设计模式、工程化、标准化所带给你最本初的编程美的感受。

6，YUI3的缺憾

无独有偶，YUI3太过庞大的身躯带来更便捷的开发，也带来一些显而易见的缺憾，比如dom操作性能不高，学习成本太高，入门相对有难度，更不用说深入理解和熟练应用了，这似乎是YUI最致命的缺憾，相比其他框架，他的确太复杂了，当然，这和YUI所定位的使用人群有关，不过，这又有什么所谓呢，我们不能老是停留在入门级的水平，不是吗？

淘宝北京UED招人ing

jayli — Mon, 07 Jun 2010 11:19:25 GMT

淘宝北京招聘前端工程师

要求

1. 精通各种Web前端技术，包括XHTML/XML/CSS/Javascript/ActionScript等（JS和AS之一即可）；
2. 深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
3. 有基于Ajax或Flash的RIA应用开发经验；
4. 至少精通一门非Web前端脚本的语言（如Java/PHP/C++），并有项目经验；
5. 个性乐观开朗，逻辑性强，善于和各种背景的人合作；
6. 计算机、数学、自动化等相关专业本科以上学历优先。

简历请发邮件至yizhou@taobao.com

基于YUI3 combo的实践

jayli — Mon, 07 Jun 2010 11:18:44 GMT

上次在w3ctech上作了关于combo的分享，上周淘宝时时彩上线了，用手动开关的方法来对付预发和上线，最终需要发布的前端文件不会超过3个，非常方便，更重要的，越少的文件越容易管理，不管是打tag还是文件更新，都很简单。

话说YUI作为一个技术体系，是一套解决前端开发、测试、打包上线以及优化型能的一揽子理论的完整实践，所以从技术的角度来看，YUI是这个体系的通称，不像jquery，仅仅是一个js库而已，如果你还在乐此不彼的在比较jquery和yui的实现细节上的差异，那么你甚至连Yahoo前端理论知识的皮毛都没掌握，YUI需要机制的辅助、需要制度的扶持、需要后端的紧密配合、外加详细复杂的技术约定，在这些规范约束的土壤中，YUI才能发挥他无敌的优势，combo就是这些土壤中的一捧。

原理上次说过了，看看重庆时时彩的页面
http://caipiao.taobao.com/lottery/order ... _cqssc.htm

转存过来的combo文件
http://a.tbcdn.cn/apps/lottery/ssc/combo/page.js

css的处理也是一样

以上～

给页面加了一个彩蛋,输入:“killie6”，恩

YUI 3.x 初探

jayli — Thu, 03 Jun 2010 11:44:43 GMT

刚在team内做的一个讲座，记录下。