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.k...
seed
• 细化模块拆分
• util
• S.extend/S.isArray/S.each
• ua
• UA.ie/UA.webkit/UA.ieMode
• feature
• Feature.isMsPointerSupport/F...
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,同样减小
• ...
xtemplate
• 支持 express 下直接使用
• app.set('view engine', 'html');
• app.set('views', path.join(__dirname, 'views'));
• app.en...
语法修改
• 靠拢 js 语法
• 内置
• {{#if x>1&&y<2}}x{{/if}} => {{#if (x>1 && y<2) }}x{{/if}}
• 自定义命令
• {{custom x y}} => {{custom (x, ...
继承机制
• Layout.html
• Header {{block(‘body’)}}layout{{/block}} footer
• List.html
• {{extend(‘./layout’)}} Header {{block(‘...
自定义异步命令
• {{ tms (id) }}
• .render(function (err, content) {
});
其他
• Event
• 默认不载入需要手动 use
• 拆出 event/gesture/shake
• 增加 event/gesture/drag
• Combobox
• 去除 filter-select
• 拆出 combobox.Mu...
• Touch Application Framework
router
• expressjs 语法的路由
• 支持 hash 和 pushState
navigation-view
navigation-view
• view 生命周期
• 初始化
• 缓存
• 销毁
• view 切换
• Loading 蒙层
• 特效
• 整合 scroll-view
summary
Scenario
• 网页型
• OPOA
• Touch WebApp
kissy 1.5 progress
kissy 1.5 progress
kissy 1.5 progress
kissy 1.5 progress
Upcoming SlideShare
Loading in …5
×

kissy 1.5 progress

576 views
414 views

Published on

progress about kissy 1.5 (kissy5)

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
576
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

kissy 1.5 progress

  1. 1. KISSY 1.5 Progress 承玉 2014-03
  2. 2. • kissy • kissy mini • kimi • zepto
  3. 3. 结局
  4. 4. KISSY 1.5
  5. 5. JDK5
  6. 6. KISSY5 • Major.Minor.Bugfix • 2014.03.28
  7. 7. Docs again
  8. 8. 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
  9. 9. 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’)
  10. 10. Load kissy modules in nodejs • kissy/lib/xx • npm install kissy • require(‘kissy/lib/base’) • require(‘kissy/lib/xtemplate’)
  11. 11. anim • 条件加载 • Css3 transition supported: anim/transition • Old browser: anim/timer • node • Animate api • 依赖于 anim,同样减小 • 强制使用定时器动画模块 • use(‘anim/timer’)
  12. 12. xtemplate • 支持 express 下直接使用 • app.set('view engine', 'html'); • app.set('views', path.join(__dirname, 'views')); • app.engine('html', require(‘kissy/lib/xtemplate').__express); • 性能大幅提升 • > jade > ejs
  13. 13. 语法修改 • 靠拢 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))}}
  14. 14. 继承机制 • Layout.html • Header {{block(‘body’)}}layout{{/block}} footer • List.html • {{extend(‘./layout’)}} Header {{block(‘body’)}}list{{/block}} footer • render(‘list’) • Header list footer
  15. 15. 自定义异步命令 • {{ tms (id) }} • .render(function (err, content) { });
  16. 16. 其他 • Event • 默认不载入需要手动 use • 拆出 event/gesture/shake • 增加 event/gesture/drag • Combobox • 去除 filter-select • 拆出 combobox.MultiValueCombobox • use(‘combobox/multi-word’)
  17. 17. • Touch Application Framework
  18. 18. router • expressjs 语法的路由 • 支持 hash 和 pushState
  19. 19. navigation-view
  20. 20. navigation-view • view 生命周期 • 初始化 • 缓存 • 销毁 • view 切换 • Loading 蒙层 • 特效 • 整合 scroll-view
  21. 21. summary
  22. 22. Scenario • 网页型 • OPOA • Touch WebApp

×