rat-util v0.1.28

rat-util

• category: Utility
• chinese: Util

目录及方法结构

├── func.js  函数相关的方法
│   ├── <Function> noop()
│   ├── <Function> makeChain(fn1, ..., fnx)
│   ├── <Function> promiseCall(ret, success, failure)
│   └── <Function> bindCtx(ctx, fns)
├── object.js  对象相关的操作方法
│   ├── <Function> typeOf(obj)
│   ├── <Function> isArrayLike(obj)
│   ├── <Function> isPromise(obj)
│   ├── <Function> isPlainObject(obj)
│   ├── <Function> each(obj, callback, direction)
│   ├── <Function> shallowEqual(objA, objB, compare)
│   └── <Function> pickOthers(holdProps, props)
├── string.js  字符串操作方法
│   ├── <Function> camelcase(str)
│   └── <Function> hyphenate(str)
├── events.js  事件绑定相关
│   ├── <Function> on(node, eventName, callback)
│   ├── <Function> off(node, eventName, callback)
│   └── <Function> once(node, eventName, callback)
├── focus.js  焦点控制
│   ├── <Function> getFocusNodeList(node)
│   ├── <Function> saveLastFocusNode()
│   ├── <Function> clearLastFocusNode()
│   ├── <Function> backLastFocusNode()
│   └── <Function> limitTabRange(node, e)
├── env.js  环境相关的方法
│   └── <Number>   ieVersion
├── dom.js  DOM 节点相关的方法
│   ├── <Boolean>  hasDOM
│   ├── <Function> addClass(node, className)
│   ├── <Function> removeClass(node, className)
│   ├── <Function> toggleClass(node, className)
│   ├── <Function> hasClass(node, className)
│   ├── <Function> matches(node, selector)
│   ├── <Function> getStyle(node, name)
│   ├── <Function> setStyle(node, name, value)
│   └── <Function> scrollbar()
├── support.js  浏览器特性支持度判断
│   ├── <Boolean>        flex
│   ├── <String|false> animation
│   └── <String|false> transition
├── log.js  日志类方法
│   ├── <Function> deprecated(props, instead, component)
│   └── <Function> warning(msg)
├── guid.js  生成全局唯一 ID
└── keycode.js  键盘 keycode map

使用示例

在其它组件中直接引用独立的方法，例如：

import {func, obj, KEYCODE} from '@alife/next-util';
// ...

const {bindCtx, noop} = func;

export default class Hello extends Component {
    static propTypes = {
        onChange: PropTypes.func,
        type: PropTypes.string,
        // ...
    };
    
    static defaultProps = {
        onChange: noop
    };

    constructor(props) {
        super(props);
        
        bindCtx(this, ['handleKeyDown']);
    }
    
    handleKeyDown(e) {
        if (e.keyCode === KEYCODE.ENTER) {
            // ...
        }
    }

    render() {
        const others = obj.pickOthers(['onChange', 'className', 'type'], this.props);
        
        return (
            <div className="next-hello" {...others}>hello</div>
        );
    }
}

API

func.js

import {func} from '@alife/next-util';

// 在 constructor() 中，将方法的 scope 绑定到 this
func.bindCtx(this, ['handleChange', 'handleClick']);

// 将 props 中传入的 onClick 和当前已定义的方法合并
const onClick = func.makeChain(this.onClick, this.props.onClick);

func.promiseCall(1, () => {
    // success callback
});

func.promiseCall(false, () => {
    // success callback won't be called.
}, () => {
    // failure callback will be called.
});

func.promiseCall(ajax(param), () => {
    // will be called when ret promise resolved.
}, () => {
    // will be called when ret promise rejected.
});

object.js

import {obj} from '@alife/next-util';

// typeOf
obj.typeOf({}); // 'Object'
obj.typeOf([]); // 'Array'
obj.typeOf(new Date()); // 'Date'

// isArrayLike
obj.isArrayLike([]); // true
obj.isArrayLike(arguments); // true
obj.isArrayLike(document.querySelectorAll('div')); // true
obj.isArrayLike(this.props.children); // true

// each
// 遍历数组
obj.each([100, 200, 300], (n, i) => console.log(n, i)); 
// 遍历 json 对象
obj.each({a: 100, b: 200}, (value, key) => console.log(key, value));
// 遍历 React 子节点
obj.each(this.props.children, (child, index) => console.log(child));
// 遍历 arguments
obj.each(arguments, (arg, i) => console.log(arg));

// shallowEqual
obj.shallowEqual({a: 100}, {a: 100}); // true

// pickOthers
obj.pickOthers(FooComponent.propTypes, this.props);
obj.pickOthers(['className', 'onChange'], this.props);

string.js

import {string} from '@alife/next-util';

string.camelcase('-webkit-animation-name'); // WebkitAnimationName
string.hyphenate('componentDidMount'); // component-did-mount

events.js

import {events} from '@alife/next-util';

// 监听事件
const handler = events.on(document.body, 'click', e => {
    console.log('clicked!', e.target);
});

// 取消事件监听
handler.off();

focus.js

env.js

import {env} from '@alife/next-util';

// ieVersion 在 IE10 渲染模式下
env.ieVersion; // 10

dom.js

import {dom} from '@alife/next-util';

dom.hasDOM; // true or false

dom.addClass(document.body, 'foo-clazz');
dom.removeClass(document.body, 'foo-clazz');
dom.toggleClass(document.body, 'foo-clazz'); // true
dom.hasClass(document.body, 'foo-clazz'); // true
dom.matches(document.body, '.foo-clazz'); // true

dom.getStyle(document.body, 'fontSize'); // 14px
dom.getStyle(fooNode, 'left'); // 15
dom.setStyle(fooNode, 'top', 13);
dom.setStyle(fooNode, {top: 13, right: 20});

dom.scrollbar(); // {width: 10, height: 10}

support.js

import {support} from '@alife/next-util';

support.animation; // {end: 'animationend'}、{end: 'webkitAnimationEnd'} or false
support.transition; // {end: 'transitionend'}、{end: 'webkitTransitionEnd'} or false
support.flex; // boolean

log.js

import {log} from '@alife/next-util';

// deprecated
log.deprecated('onBeforeClose', 'beforeClose', 'Dialog'); 
// Warning: onBeforeClose is deprecated at [ Dialog ], use [ beforeClose ] instead of it.

guid.js

import {guid} from '@alife/next-util';

guid(); // j7jv509c
guid('prefix-'); // prefix-j7jv509d

keycode.js

import {KEYCODE} from '@alife/next-util';

KEYCODE.TAB         // 9
KEYCODE.ENTER       // 13
KEYCODE.SHIFT       // 16
KEYCODE.CTRL        // 17
KEYCODE.ALT         // 18
KEYCODE.ESC         // 27 alias as 'ESCAPE'
KEYCODE.SPACE       // 32
KEYCODE.END         // 35
KEYCODE.HOME        // 36
KEYCODE.LEFT        // 37 alias as 'LEFT_ARROW'
KEYCODE.UP          // 38 alias as 'UP_ARROW'
KEYCODE.RIGHT       // 39 alias as 'RIGHT_ARROW'
KEYCODE.DOWN        // 40 alias as 'DOWN_ARROW'

// MacOS
KEYCODE.CONTROL     // 17 same as 'CTRL'
KEYCODE.OPTION      // 18 same as 'ALT'
KEYCODE.CMD         // 91 alias as 'COMMAND'