kissy 1.5 progress

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
March 28, 2014

kissy 1.5 progress

progress about kissy 1.5 (kissy5)

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

March 28, 2014
Tweet

Transcript

  1. KISSY 1.5 Progress 承玉 2014-03

  2. • kissy • kissy mini • kimi • zepto

  3. None
  4. None
  5. 结局

  6. KISSY 1.5

  7. None
  8. JDK5

  9. KISSY5 • Major.Minor.Bugfix • 2014.03.28

  10. Docs again

  11. 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
  12. 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’)
  13. Load kissy modules in nodejs • kissy/lib/xx • npm install

    kissy • require(‘kissy/lib/base’) • require(‘kissy/lib/xtemplate’)
  14. anim • 条件加载 • Css3 transition supported: anim/transition • Old

    browser: anim/timer • node • Animate api • 依赖于 anim,同样减小 • 强制使用定时器动画模块 • use(‘anim/timer’)
  15. xtemplate • 支持 express 下直接使用 • app.set('view engine', 'html'); •

    app.set('views', path.join(__dirname, 'views')); • app.engine('html', require(‘kissy/lib/xtemplate').__express); • 性能大幅提升 • > jade > ejs
  16. 语法修改 • 靠拢 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))}}
  17. 继承机制 • Layout.html • Header {{block(‘body’)}}layout{{/block}} footer • List.html •

    {{extend(‘./layout’)}} Header {{block(‘body’)}}list{{/block}} footer • render(‘list’) • Header list footer
  18. 自定义异步命令 • {{ tms (id) }} • .render(function (err, content)

    { });
  19. 其他 • Event • 默认不载入需要手动 use • 拆出 event/gesture/shake •

    增加 event/gesture/drag • Combobox • 去除 filter-select • 拆出 combobox.MultiValueCombobox • use(‘combobox/multi-word’)
  20. • Touch Application Framework

  21. router • expressjs 语法的路由 • 支持 hash 和 pushState

  22. navigation-view

  23. navigation-view • view 生命周期 • 初始化 • 缓存 • 销毁

    • view 切换 • Loading 蒙层 • 特效 • 整合 scroll-view
  24. summary

  25. Scenario • 网页型 • OPOA • Touch WebApp

  26. None