Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kissy 1.5 progress

yiminghe
March 28, 2014

kissy 1.5 progress

progress about kissy 1.5 (kissy5)

yiminghe

March 28, 2014
Tweet

More Decks by yiminghe

Other Decks in Technology

Transcript

  1. 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
  2. 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’)
  3. Load kissy modules in nodejs • kissy/lib/xx • npm install

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

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

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

    {{extend(‘./layout’)}} Header {{block(‘body’)}}list{{/block}} footer • render(‘list’) • Header list footer
  8. 其他 • Event • 默认不载入需要手动 use • 拆出 event/gesture/shake •

    增加 event/gesture/drag • Combobox • 去除 filter-select • 拆出 combobox.MultiValueCombobox • use(‘combobox/multi-word’)
  9. navigation-view • view 生命周期 • 初始化 • 缓存 • 销毁

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