kissy 1.5 progress

KISSY 1.5 Progress承玉

2014-03

• kissy

• kissy mini

• kimi

• zepto

结局

KISSY 1.5

JDK5

KISSY5

• Major.Minor.Bugfix

• 2014.03.28

Docs again

seed

• Loader 独立• http://dev.kissyui.com/kissy/build/loader-min.js• loader-min.js• gzip: 6.6kb

• Seed 精简• http://dev.kissyui.com/kissy/build/seed-min.js• 去除 uri/path 依赖• seed-min.js• gzip: 13.8kb

seed

• 细化模块拆分• util

• S.extend/S.isArray/S.each

• ua• UA.ie/UA.webkit/UA.ieMode

• feature• Feature.isMsPointerSupport/Feature.isQuerySelectorSupported

• path• path.relative/path.resolve

• uri• new Uri(‘http://www.g.cn’)

Load kissy modules in nodejs

• kissy/lib/xx

• npm install kissy

• require(‘kissy/lib/base’)

• require(‘kissy/lib/xtemplate’)

anim

• 条件加载• Css3 transition supported: anim/transition• Old browser: anim/timer

• node• Animate api• 依赖于 anim，同样减小

• 强制使用定时器动画模块• use(‘anim/timer’)

xtemplate

• 支持 express 下直接使用• app.set('view engine', 'html');

• app.set('views', path.join(__dirname, 'views'));

• app.engine('html', require(‘kissy/lib/xtemplate').__express);

• 性能大幅提升• > jade > ejs

语法修改

• 靠拢 js 语法

• 内置• {{#if x>1&&y<2}}x{{/if}} => {{#if (x>1 && y<2) }}x{{/if}}

• 自定义命令• {{custom x y}} => {{custom (x, y) }}

• 嵌套调用• {{custom1 (custom2 (x, y))}}

继承机制

• Layout.html• Header {{block(‘body’)}}layout{{/block}} footer

• List.html• {{extend(‘./layout’)}} Header {{block(‘body’)}}list{{/block}} footer

• render(‘list’)• Header list footer

自定义异步命令

• {{ tms (id) }}

• .render(function (err, content) {

});

其他

• Event• 默认不载入需要手动 use

• 拆出 event/gesture/shake

• 增加 event/gesture/drag

• Combobox• 去除 filter-select

• 拆出 combobox.MultiValueCombobox• use(‘combobox/multi-word’)

• Touch Application Framework

router

• expressjs 语法的路由

• 支持 hash 和 pushState

navigation-view

navigation-view

• view 生命周期• 初始化

• 缓存

• 销毁

• view 切换• Loading 蒙层

• 特效

• 整合 scroll-view

summary

Scenario

• 网页型

• OPOA

• Touch WebApp