zepto classnames

如果基于zepto.js开发，一般是通过event.touches[0]来获取属性。重要属性如下：clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY:触摸点相对于页面的位置;screenX,screenY：触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID 

touchstart:手指触摸屏幕上的时候触发 

touchmove:手指在屏幕上移动的时候触发 

touchend:手指从屏幕上拿起的时候触发 

touchcancel:系统取消touch事件的时候触发

2.使用classnames这个小工具来拼接 classNames:

// BEFORE:

var Button = React.createClass({

  render () {

    var btnClass = 'btn';

    if (this.state.isPressed) btnClass += ' btn-pressed';

    else if (this.state.isHovered) btnClass += ' btn-over';

    return <button className={btnClass}>{this.props.label}</button>;

  }

});

// AFTER ：

var classNames = require('classnames');

var Button = React.createClass({

  render () {

    var btnClass = classNames({

      'btn': true,

      'btn-pressed': this.state.isPressed,

      'btn-over': !this.state.isPressed && this.state.isHovered

    });

    return <button className={btnClass}>{this.props.label}</button>;

  }

});

大家有任何意见都可以直接在评论区指出，谢谢。

未完待续...

在React中编写模板时给标签添加class。

如果是固定的className="XX"就可以了。

如果要根据状态值动态应用或去除，

或使用多个class时就麻烦了。

可以使用classnames模块来解决：

var classnames= require('classnames');

classnames('foo', 'bar'); // => 'foo bar' 

classNames('foo', { bar: true }); // => 'foo bar' 

classNames({ 'foo-bar': true }); // => 'foo-bar' 

classNames({ 'foo-bar': false }); // => '' 

classNames({ foo: true }, { bar: true }); // => 'foo bar' 

classNames({ foo: true, bar: true }); // => 'foo bar' 

classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' 

classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' 

classNames('a',['b',{c:true}]) 

它有多种使用，参数要以是多个，可以是字符串，也可以是对象,还可以是数组。组成使用也可以

，通过值的true false来判断是否应用 

<div className={classnames('h1 h2')} >

className={classnames({'a':true,'b':false})}

在react中需这样使用