KISSY 1.2 升级指南

标记含义

  • [+] this is a new feature
  • [*] this is an improvement
  • [!] this is a change

1.1.6 -> 1.2 改动点

代码静态引用位置

  1. [!] 静态 combo 引用组件代码时注意:组件代码层次减低。例如 switchable/switchable-pkg.js -> switchable.js

    1.1.6:

    <script src='http://a.tbcdn.cn/s/kissy/1.1.6/??switchable/switchable-pkg-min.js,overlay/overlay-pkg-min.js'></script>
    

    1.2.0:

    <script src='http://a.tbcdn.cn/s/kissy/1.2.0/??switchable-min.js,overlay-min.js'></script>
    
  2. [!] css 引入位置改变

    1. reset

      1.1.6

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.1.6/cssreset/reset-min.css" />
      

      1.2.0

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset-min.css" />
      
    2. base

      1.1.6

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.1.6/cssbase/base-min.css" />
      

      1.2.0

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/base-min.css" />
      
    3. common

      1.1.6

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.1.6/csscommon/common-min.css" />
      

      1.2.0

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/common-min.css" />
      
    4. grids

      1.1.6

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.1.6/cssgrids/grids-min.css" />
      

      1.2.0

      <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/grids-min.css" />
      

doc

  1. [+] 使用 sphinx 重新编写

seed

  1. [+] KISSY.param/unparam 增加数组值的处理选择

  2. [+] KISSY.getScript 支持 css 载入后才调用回调

  3. [+] 增加 KISSY.throttle/buffer/stamp/every/some/filter/map/bind/escapeHTML/unEscapeHTML/startsWidth/endsWidth/parseXML 等工具方法

loader

  1. [+] 重构后的 loader ,支持 commonjs amd 形式的模块化开发以及自有的包机制

  2. [!] 使用 kissy 1.2 loader 载入的模块代码需要使用 KISSY.add 包裹起来

  3. [+] 增加自动依赖打包工具 KISSY Module Compiler

  4. [+] KISSY Loader 支持运行于 nodejs 平台,require kissy-nodejs.js 后,即可使用在 nodejs 环境下使用 KISSY.use/add

dom 模块

  1. [!] attr 方法对于 boolean 类型的属性返回值改变:例如 checked=’checked’ 返回 “checked” 否则返回 undefined。

    <input type='checkbox' checked id='t'/>
    <script>
       KISSY.one('#t').attr("checked") // => "checked"
    </script>
    

    详见: http://docs.kissyui.com/docs/html/api/core/dom/attr.html

  2. [+] 增加 prop 方法,对于 boolean 类型的属性返回。例如 checked=’checked’ 返回 prop(‘checked’)==true

    <input type='checkbox' checked id='t'/>
    <script>
       KISSY.one('#t').prop("checked") // => true
    </script>
    

    详见: http://docs.kissyui.com/docs/html/api/core/dom/prop.html

  3. [*] DOM.query(selector,context) 中 context 的限制同 selector,可以为选择器或Array<HTMLElement>或HTMLNodeList

    <div class='t'><span id='s1'></span></div>
    <div class='t'><span id='s2'></span></div>
    <script>
       KISSY.DOM.query("span",".t"); // => [s1,s2]
    </script>
    

    详见: http://docs.kissyui.com/docs/html/api/core/dom/query.html

  4. [!] DOM.css 优先取计算值而不是行内样式值

    <div style='font-size:14em'></div>
    <script>
        KISSY.DOM.css("font-size")  // => "10px"  !== "14em"
    </script>
    

    详见: http://docs.kissyui.com/docs/html/api/core/dom/css.html

  5. [+] 增加 DOM.clone : 修复 ie 自身 bug 以及允许克隆事件

  6. [!] DOM.remove 会清除当前节点以及其子孙节点上已经注册的事件

  7. [+] 增加 DOM.inner/outer|Width/Height

  8. [!] 调用 DOM.html(htmlstr,true) 时 htmlStr 中的脚本会在调用该函数后立即执行。

    请避免在脚本内部引用尚没添加到dom的根节点:

    DOM.html(DOM.create("<div>"),
    "<div id='t'><script>alert(document.getElementById('t'));</script></div>", // => null
    true);
    

    详见: http://docs.kissyui.com/docs/html/api/core/dom/html.html

event 模块

  1. [+] 增加 delegate/undelegate 方法

  2. [+] 增加针对 dom 节点的 fire 方法

  3. [+] 增加 submit/change 事件在 ie 下的冒泡兼容处理

  4. [+] 增加模拟 valuechange 事件

  5. [+] 增加 hashchange 事件在 ie 下的兼容处理

  6. [!] 修正 focusin/out 在非 ie 下的触发顺序:子元素先,父元素后

  7. [!] 无论是通过 Event.on 还是 S.one(“#xx”).on,回调 event.target 以及 event.relatedTarget 都为原生节点。

  8. [!] 无论是通过 Event.on 还是 S.one(“#xx”).on,如果不指定 scope 回调函数中 this 都指向原生 dom 节点。

  9. [+] 自定义事件增加冒泡支持

  10. [+] 兼容 mousewheel 事件

ajax(io) 模块

  1. [+] S.io 返回值对象,包含 abort 方法,用于停止请求

  2. [!] 请求的响应头如果设置了 content-type 为 json 或 xml,回调(success,complete)的第一个参数自动为该格式,不需要手动 parse

  3. [+] 增加 S.io.upload 方法,用于无刷新文件上传

  4. [+] S.io 增加 form 配置,可直接序列化 form 并发送 ajax 请求

  5. [+] 增加 S.io.serialize 方法,只用于序列化表单或表单元素

  6. [+] S.io 增加 xdr 配置用来做透明跨域处理,注意完全跨域时 ie6,7 将使用 flash。

anim 模块

  1. [+] 支持对 window 的 scrollTop/scrollLeft 进行动画

  2. [+] 增加队列(queue)配置

  3. [!] 对同一个元素的连续动画调用默认做排队处理

node 模块

  1. [+] node/nodelist 具有 dom,event,anim 模块的全部对应功能。

  2. [+] 增加 stop 方法,可停止由 animate 方法引起的动画

  3. [*] NodeList.prototype.all(selector) 增强为取得当前节点列表的所有子孙中符合 selector 的节点集合(经过去重和根据 DOM 树前序遍历顺序进行排序)

    详见: http://docs.kissyui.com/docs/html/api/core/node/instance_all.html

  4. [+] 增加 slideToggle/fadeToggle

base 模块

  1. [+] 增加 validator 验证配置,可在 set 时进行统一参数检查

  2. [+] set/get 支持 “x.y.z” 子属性设置,要求 x 为原生简单对象 : {y:{z:xx}}

  3. [+] set 返回值为 false 代表其中一个属性的 validator 验证函数失败

suggest 模块

  1. [+] 增加配置项 dataType, 标志数据来源, 支持动态且缓存, 动态但不缓存, 静态数据

switchable 模块

  1. [+] 支持 aria 以及键盘操作,需要配置 aria

overlay 模块

  1. [+] Overlay 增加 closeAction 配置,可以配置点击关闭对应隐藏还是销毁

  2. [+] closable 上移到 Overlay.Overlay ,允许简单弹层配置是否关闭

  3. [+] Dialog 支持 aria 配置

  4. [+] Overlay 增加 resize 配置

  5. [+] Overlay 增加 effect 配置

calendar

  1. [!] use(“calendar”) 不会会默认加载基础css,需要的话可以静态引入或者use(“calendar,calendar/assets/base.css”)

editor

  1. [+] 支持 use(“editor”) 动态加载.