组件的使用注意

[shuier]

kissy 组件的使用注意

• 组件调用方式的改变

  • 初始化方式： 升级后新增了直接new 的方式
  • 组件初始化的参数： 升级前会有container和config，而升级后，container作为了config的一部分

  // 如懒加载组件
  // 升级前
  KISSY.DataLazyload (container, config);
  
  // 升级后，写法一
  KISSY.DataLazyload (config);
  // 升级后，写法二
  new DataLazyload (config);

• 懒加载组件 (http://docs.kissyui.com/docs/html/api/component/datalazyload/)

  • container: 现在container虽然兼容以前的写法，类型支持HTMLElement，但是升级后，kissy建议container只包含一个element；另外：如果container的范围比较大时就改为document或body吧，以减少懒加载范围的检查，因为kissy对非document或body的container, 会检查当前懒加载对象是否处于两个加载范围中的其中一个，他们分别是windowRegion和containerRegion

  /**
   * lazyload images
   * @private
   */
  '_loadImgs': function (windowRegion, containerRegion) {
      var self = this;
      self._images = S.filter(self._images, function (img) {
          if (elementInViewport(img, windowRegion, containerRegion)) {
              return loadImgSrc(img);
          } else {
              return true;
          }
      }, self);
  },

  • diff 以前只是一个数值，现在是一个对象，有四个方向的值
  • placeholder：需要有值，就用kissy默认的值吧，否则会因为src没有，影响图片懒加载的性能

• overlay组件

  // 升级前
  S.Popup('#shop-rank-popup', {
          trigger:'#shop-rank',
          align:  {
              node:  'trigger',
              points:['bc', 'tl'],
              offset:[-20, 10]
          }
      });
  
  // 升级后
  <style>
      .ks-overlay {
          position:absolute;
           left:-9999px;
          top:-9999px;
      }
  </style>
  
  new Overlay.Popup({
          srcNode: '#shop-rank-popup',   // 以前的container
          trigger: '#shop-rank',
          triggerType: 'mouse',    //默认的triggerType由mouse变成了click, 在1.3下需要重新赋值一下
          align: {
              node: '#shop-rank',
              points: ['bc', 'tl'],
              offset: [-20, 10]
          }
      });      

• tabs组件

  // 升级前
  var tabs = new S.Tabs(DOM.get('div.rank-tab', v), tabs_cfg);
  Event.on(tabs,'switch', function(ev){};
  
  // 升级后
  var tabs = new Switchable.Tabs(DOM.get('div.rank-tab', self._mod), tabs_cfg);
  tabs.on('switch', function(ev){})