秋知-实习报告
1. 新淘宝动效
2. 百阿百技培训
3. API文档 & Gallery组件
4. KISSY5.0 文档构建工具
新淘宝动效 - 库存（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();
}
});
新淘宝动效 - 浮层 实现：
1. 定制时间曲线：easing、cubic-bezier
2. 浮动太大，针对高级浏览器使用css3动画
3. 居中定位 effect : { target : referenceDiv$ }
2. 百阿百技培训
为期两周（一周“百阿”，一周“百技”）
酸甜苦辣，了解阿里
新人品码会：抓取好友微博，词法分析，排序
3. KISSY5.0 API文档
文档生成工具选型（yuidoc、jsduck...）
支持Markdown，支持继承，语法简单
写文档的过程中学习KISSY
去掉YUI依赖，改为KISSY组件，js精简
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);
添加事件：complete/fail/done/progress
4. KISSY5.0 文档构建工具
(1) 为什么要做新的文档系统
(2) 文档系统的实现方案
为什么要做新的文档系统
- 结构紊乱，重点不突出
- API文档构建工具语法不简洁，不支持继承
- Demos示例调试麻烦
实现方案
a. 文档结构尽量保持简洁
b. 文档编写支持Markdown，方便编写
c. API文档的编写语法尽量简洁，体现继承
d. 支持Demo在线编辑调试
e. 引入谷歌自定义搜索
文档结构保持简洁
导航
项目结构
用Markdown编写文档
实现思路：
- NodeJS环境下，marked包将Markdown内容转成html，highlight.js对其中的代码片段高亮
- 文档只需写主体，其他部分由Xtpl模板引擎渲染和拼装页面的头部、尾部，统一风格
- 用gulp来管理所有构建任务，简化构建工具
代码示例：
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文档体现继承
yuidoc优点：语法简单、@extends、@uses体现继承/拓展
注：局部刷新、去掉yui依赖，应用KISSY filter-menu
代码示例：
/** @module component/container */ /** @extends Component.Control @class Container @namespace Component @constructor @param config {Object} */ /** 添加一个指定的组件作为当前组件的子组件 @method addChild @param c {Control|Object} 要添加的子组件实例或者子组件的对象描述 @param [index] 子组件的索引，可选。从 0 开始，新子组件被插入时的索引。如果未指定，新组件将会被插入在最后 */
Demos在线编辑调试
Markdown语法增强：
[[[include file="file path" height="xxxpx"]]] --- 引入html demo，灵活 && 方便本地demo调试
(((apilink class="class name")))或(((apilink module="module name"))) --- 生成api索引链接
ACE代码编辑器增强在线编辑功能：
支持广大UED亲们喜爱的sublime-text主题
实时修改，切换实时显示效果：
KISSY tabs组件 + iframe实现
Gulp任务管理
Gulp统一管理构建任务
环境配置，构建更简单：
clone -> npm install -g gulp -> npm install -> gulp linkserver -> gulp
一个问题：
osx下 默认256 open files too many...
ulimit -n 2560
总结
1. 有计划地学习
2. 知识在平淡中收获
3. 追求更好
3. 经验积累，发散思维
谢谢
Internship Report
By benfchen
