KISSY for touch #1

satans17 · 2013-10-19T10:15:04Z

KISSY for touch

为了KISSY能更好的支持移动开发，承玉作为技术支持加入到了detail多终端项目中，对KISSY做了不少改进和组件上的支持
今天主要讲讲KISSY这方面的特性，这些特性是基于KISSY1.4.0的（目前的稳定版是1.3.0）
你可以直接pullKISSY主干代码

https://github.com/kissyteam/kissy

也可以直接引用我发布的CDN版本

//KISSY1.4dev 版
http://g.tbcdn.cn/tb/item-touch/0.2.2/kissy/seed.js

-------------------万恶的分割线---------------------

更细粒度的模块颗粒

相对于1.3，KISSY1.4最大的变化是将不在有 kissy.js 这个文件，只有seed.js
seed.js只包含lang,loader等基础模块。
对于移动终端，特别是phone，KISSY.js这样的大文件已经不能满足用户的个性化需求
据说承玉还有对ajax,anim等模块拆分的计划

以后这么使用KISSY

    <script src="//g.tbcdn.cn/??kissy/k/1.4.0/seed-min.js" charset="utf-8"></script>
    <script>
        KISSY.add(function(S,DOM,Event,Anim,Ajax,Noe,Base){
            //your code
        },{
            requires:["dom","event","anim","ajax","node","base"]
        })
    </script>

看到这段代码后，有人会有两个疑问

链接数太多
requries信息太长，写起来不方便

针对这两个问题，KISSY做了一些优化

增加data-config="{combine:true}",自动合并KISSY请求
增加requrie方法

代码修改如下：

    <script src="//g.tbcdn.cn/??kissy/k/1.4.0/seed-min.js" charset="utf-8" data-config="{combine:true}"></script>
    <script>
KISSY.add(function(S){
        var DOM = S.require('dom'),
            Event = S.require('event'),
            Anim = S.require('anim'),
            Ajax = S.require('ajax'),
            Node = S.require('node'),
            Base = S.require('base');

        //your code
 },{
requires:['dom','event','anim','ajax','node','base']
 })
    </script>

特性检测

移动设备开发中，经常会用到touch event,transition，transform等，怎么知道当前设备是否支持这些属性呢，其实KISSY早就实现了，只是在文档没有体现。

这里不一一列举，直接贴出KISSY的实现代码，不清楚的东西可以顺便看下实现

/**
 * @ignore
 * detect if current browser supports various features.
 * @author [email protected]
 */
(function (S, undefined) {
    var Env = S.Env,
        win = Env.host,
        UA = S.UA,
        VENDORS = [
            '',
            'Webkit',
            'Moz',
            'O',
            // ms is special .... !
            'ms'
        ],
    // nodejs
        doc = win.document || {},
        documentMode = doc.documentMode,
        isMsPointerSupported,
        transitionProperty,
        transformProperty,
        transitionPrefix,
        transformPrefix,
        documentElement = doc.documentElement,
        documentElementStyle,
        isClassListSupportedState = true,
        isQuerySelectorSupportedState = false,
    // phantomjs issue: http://code.google.com/p/phantomjs/issues/detail?id=375
        isTouchEventSupportedState = ('ontouchstart' in doc) && !(UA.phantomjs),
        ie = documentMode || UA.ie;

    if (documentElement) {
        if (documentElement.querySelector &&
            // broken ie8
            ie != 8) {
            isQuerySelectorSupportedState = true;
        }
        documentElementStyle = documentElement.style;

        S.each(VENDORS, function (val) {
            var transition = val ? val + 'Transition' : 'transition',
                transform = val ? val + 'Transform' : 'transform';
            if (transitionPrefix === undefined &&
                transition in documentElementStyle) {
                transitionPrefix = val;
                transitionProperty = transition;
            }
            if (transformPrefix === undefined &&
                transform in documentElementStyle) {
                transformPrefix = val;
                transformProperty = transform;
            }
        });

        isClassListSupportedState = 'classList' in documentElement;
        isMsPointerSupported = "msPointerEnabled" in (win.navigator || {});
    }

    /**
     * browser features detection
     * @class KISSY.Features
     * @private
     * @singleton
     */
    S.Features = {
        // http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
        /**
         * whether support microsoft pointer event.
         * @type {Boolean}
         */
        isMsPointerSupported: function () {
            return isMsPointerSupported;
        },

        /**
         * whether support touch event.
         * @return {Boolean}
         */
        isTouchEventSupported: function () {
            return isTouchEventSupportedState;
        },

        /**
         * whether support device motion event
         * @returns {boolean}
         */
        isDeviceMotionSupported: function () {
            return !!win['DeviceMotionEvent'];
        },

        /**
         * whether support hashchange event
         * @returns {boolean}
         */
        'isHashChangeSupported': function () {
            // ie8 支持 hashchange
            // 但 ie8 以上切换浏览器模式到 ie7（兼容模式），
            // 会导致 'onhashchange' in window === true，但是不触发事件
            return ( 'onhashchange' in win) && (!ie || ie > 7);
        },

        /**
         * whether support css transition
         * @returns {boolean}
         */
        'isTransitionSupported': function () {
            return transitionPrefix !== undefined;
        },

        /**
         * whether support css transform
         * @returns {boolean}
         */
        'isTransformSupported': function () {
            return transformPrefix !== undefined;
        },

        /**
         * whether support class list api
         * @returns {boolean}
         */
        'isClassListSupported': function () {
            return isClassListSupportedState
        },

        /**
         * whether support querySelectorAll
         * @returns {boolean}
         */
        'isQuerySelectorSupported': function () {
            // force to use js selector engine
            return !S.config('dom/selector') &&
                isQuerySelectorSupportedState;
        },

        /**
         * whether is ie and ie version is less than specified version
         * @param {Number} v specified ie version to be compared
         * @returns {boolean}
         */
        'isIELessThan': function (v) {
            return !!(ie && ie < v);
        },

        /**
         * get css transition browser prefix if support css transition
         * @returns {String}
         */
        'getTransitionPrefix': function () {
            return transitionPrefix;
        },

        /**
         * get css transform browser prefix if support css transform
         * @returns {String}
         */
        'getTransformPrefix': function () {
            return transformPrefix;
        },

        /**
         * get css transition property if support css transition
         * @returns {String}
         */
        'getTransitionProperty': function () {
            return transitionProperty;
        },

        /**
         * get css transform property if support css transform
         * @returns {String}
         */
        'getTransformProperty': function () {
            return transformProperty;
        }
    };
})(KISSY);

(https://github.com/kissyteam/kissy/blob/master/src/seed/src/features.js)[https://github.com/kissyteam/kissy/blob/master/src/seed/src/features.js]

触屏设备事件支持

大家都知道，标准只需要实现touchstart touchend touchmove touchcancel几个事件
http://www.w3.org/TR/touch-events/
这几个事件远远不能满足我们触屏设备的开发，为此KISSY对触屏事件做了增强

包括以下事件：

doubleTap
singleTap
tap
tapHold
swipe
swiping
rotateStart
rotate
rotateEnd
pinchStart
pinch
pinchEnd
shake

为了兼容移动与pc， kissy event 还提供手势事件的枚举：

Event.Gesture.start pc 上为 'mousedown' , 触屏为 'touchstart'
Event.Gesture.move pc 上为 'mousemove' , 触屏为 'touchmove'
Event.Gesture.end pc 上为 'mouseup' , 触屏为 'touchend'
Event.Gesture.tap pc 上为 'click' , 触屏为 'tap'
Event.Gesture.doubleTap pc 上为 'dblclick' , 触屏为 'doubleTap'

    <script>
        KISSY.add(function(S){
            var Event = S.require('evnet'),
                Node = S.require('node');

            //如果你开发一个页面需要同时兼容pad和pad,不用进行事件的特性检测
            //在pad中是tap,在PC上是click
            Node.all(document.body).on(Event.Gesture.tap,function(ev){
                //you code
            })
        })
    </script>

全平台兼容，包括windows系列触屏设备。
KISSY event 文档链接：http://docs.kissyui.com/docs/html/api/core/event/

CSS3动画原生支持

KISSY.add(function(S){
    var Anim = S.require('anim'),
        Node = S.require('node');

    Node.all("#test").animate({
            transform: "translate3d(-"+pos+"px,0,0)"
        }, {
            duration: .3,
            //增加useTransition配置即可
            useTransition:true,
            //
            easing: "ease-out",
            complete: function(){
                //your code
            }
        });
},{
    requires:[]
})

这里要特别注意easing的配置，CSS3 transition-timing-function Property只支持以下几种：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

重量级组件 scroll-view

这里说的重量级，并不是指这个组件很大，而是这个组件功能很强，而且移动设备上，基本上都会用到。
也没啥好介绍的，大家直接看demo吧

win8 支持

虽然windows系列设备目前市场份额不高，但是作为一个全平台支持的框架，KISSY这点做的还是不错的。

最后

需要强调的，以上我只列举了与移动开发相关的KISSY1.4的特性
除了这些，承玉对KISSY1.4进行了非常多的改进和增强，非常值得我们期待。
另外，剧透一下，不出意外KISS1.4将在下周正式发布，除了KISSY本身的改进，文档也做了非常大的调整，大家一起期待吧！

The text was updated successfully, but these errors were encountered:

yiminghe · 2013-10-21T12:06:33Z

win8 支持

S.require 问题

KISSY.add(function(S){
          var DOM = S.require('dom'),
              Event = S.require('event'),
              Anim = S.require('anim'),
              Ajax = S.require('ajax'),
              Node = S.require('node'),
              Base = S.require('base');

          //your code
   },{
  requires:['dom','event','anim','ajax','node','base']
   })

requires 仍然要重复写下，下次优化.

示例引 dev 吧, url 后加 ?build
http://dev.kissyui.com/kissy/src/scroll-view/sub-modules/base/demo/simple.html?build

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KISSY for touch #1

KISSY for touch #1

satans17 commented Oct 19, 2013

yiminghe commented Oct 21, 2013

KISSY for touch #1

KISSY for touch #1

Comments

satans17 commented Oct 19, 2013

KISSY for touch

更细粒度的模块颗粒

特性检测

触屏设备事件支持

CSS3动画原生支持

重量级组件 scroll-view

win8 支持

最后

yiminghe commented Oct 21, 2013