新淘宝动效 - 库存（SKU）实现：

第一种方案：<div contenteditable="true">

第二种方案：数字整体上移

第三种方案：只移动个位数

//主要代码实现

var numInput$ = $('#numInput'),
	numContainer$ = $('.num-container'),
	num = numInput$.val(),
	sNum = num + '',
	sSepNumInSpans = '',
	nNowNum = parseInt(num) + 1,
	sNowNum = nNowNum + '',
	sSepNowNumInSpans = '',
	width = numInput$.width(),
	height = numInput$.height();

for(var i = 0;i < sNum.length;i++){
	sSepNumInSpans += '<span style="position:relative;top:1px;">' + sNum[i] + '</span>';
}

numInput$.val('');
numContainer$.css('position','relative');
numContainer$.prepend('<span id="numSpan" style="font-family:verdana;font-size:33px;color:#fff;position:absolute;width:' + width + 'px;height:' + height + 'px;line-height:' + height + 'px;margin:0;padding:0;text-align:center;top:0px;">' + sSepNumInSpans +'</span>');
var sepNumSpanContainer$ = numContainer$.all('#numSpan'),
	numSpan$ = sepNumSpanContainer$.last('span');
numSpan$.animate({
	top : -25,
	opacity : 0.5
},{
	duration : 0.1,
	complete : function(){
		sepNumSpanContainer$.remove();
	}
});

新淘宝动效 - 浮层 实现：

3. KISSY5.0 API文档

YUIDOC使用示例

/**
@module component/container
*/

/**
@extends Component.Control
@class Container
@namespace Component
@constructor
@param config {Object}
*/

/**
可选，当前组件的子组件数组
@attribute children {Control[]} 
*/

一点提示

YUIdoc：@extends  &  @uses

KISSY: augement & mix & extend

旧文档的一些纰漏

augment & mix  ---->  @uses

extend    ---->@exntends

Gallery组件--imagesLoaded

S.use('gallery/imagesLoaded/1.0/index', function (S, ImagesLoaded) {
     var imagesLoaded = new ImagesLoaded({
        elem : container$,
        complete : function(imagesLoadedInstance){
            //图片列表加载完成，无论是否有图片加载失败
            //do something
        }
     });
})

//使得ImagesLoaded拥有处理事件的功能
S.augment(ImagesLoaded, Event.Target);

4. KISSY5.0 文档构建工具

                                                                                                                                                                                                                                    文档地址

(1) 为什么要做新的文档系统

(2) 文档系统的实现方案

为什么要做新的文档系统

实现方案

文档结构保持简洁

用Markdown编写文档

var fs = require('fs'),
  marked = require('marked'),
  highlightJs = require('highlight.js'),
  xtpl = require('xtpl'),
  unEscapeHtml = require('unescape-html');
//markdown定制
var markedRenderer = new marked.Renderer();
markedRenderer.heading = function(text, level){
return '<h' + level + '>' + text + '</h' + level + '>';
};
marked.setOptions({
highlight: function (code) {
return highlightJs.highlightAuto(code).value;
},
renderer : markedRenderer
});
var fileMD = fs.readFileSync(fileName).toString(),
  fileHtml = unEscapeHtml(marked(fileMD));
xtpl.__express(xtplPath,{
  mainContent : fileHtml,
  settings : {
        'view encoding' : 'utf-8'
  }
},function(err,desFileContent){
  if(err){
      console.log('render failed');
  }else{
      fs.writeFileSync(xxx)
  }
});

API文档体现继承

/**
@module component/container
*/
/**
@extends Component.Control
@class Container
@namespace Component
@constructor
@param config {Object}
*/
/**
添加一个指定的组件作为当前组件的子组件
@method addChild
@param c {Control|Object} 要添加的子组件实例或者子组件的对象描述
@param [index] 子组件的索引，可选。从 0 开始，新子组件被插入时的索引。如果未指定，新组件将会被插入在最后
*/

Demos在线编辑调试

Gulp任务管理