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

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:------------|:----------------------------|:-----------------------------------------------------------|:-------------|:-----| | noop | 空方法 | 无 | undefined | | | bindCtx | 绑定方法上下文 | <Object>ctx <Array>fns | - | | | makeChain | 将N个方法合并为一个链式方法 | <Function>fn1 ... <Function>fnx | <Function> | | | promiseCall | 用于执行回调方法后的逻辑 | <T>ret <Function>success <Function>failure | - | |

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

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:--------------|:-------------------------------|:-----------------------------------------------------------------------|:------------|:---------------------------| | typeOf | 获取对象的类型 | <T>obj | <String> | | | isArrayLike | 是否是数组或类数组对象 | <T>obj | <Boolean> | | | isPromise | 是否是一个 Promise 对象 | <T>obj | <Boolean> | | | isPlainObject | 是否是一个纯净的对象 | <T>obj | <Boolean> | | | each | 数组 (类数组) 和对象的遍历方法 | <Array/Object>obj <Function>callback <Number>direction | - | direction: -1 表示倒序遍历 | | shallowEqual | 对象浅比较是否相等 | <Object>objA <Object>objB | <Boolean> | | | pickOthers | 过滤出其它属性 | <Object/Array>holdProps <Object>props | <Object> | | | pickAttrsWith | 过滤出带prefix的属性 | <Object>holdProps <String>prefix | <Object> | |

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

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:----------|:-------------------------|:--------------|:-----------|:-----| | camelcase | 将字符串转化为坨峰式写法 | <String>str | <String> | | | hyphenate | 将字符串转化为连接符写法 | <String>str | <String> | |

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

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

events.js

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:-------|:-------------|:-------------------------------------------------------------------|:-----------|:------------------------------------------| | on | 监听事件 | <Element>node <String>eventName <Function>callback | <Object> | 执行返回的对象的off方法即可以取消事件监听 | | off | 取消监听 | <Element>node <String>eventName <Function>callback | - | | | once | 单次监听事件 | <Element>node <String>eventName <Function>callback | <Object> | |

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

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

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

focus.js

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:-------------------|:---------------------------|:--------------------------------|:----------|:-----| | getFocusNodeList | 列出能获取焦点的子节点 | <Element>node | <Array> | | | saveLastFocusNode | 保存最近一次获得焦点的无素 | - | - | | | clearLastFocusNode | 清除焦点记录 | - | - | | | backLastFocusNode | 尝试将焦点切换到上一个元素 | - | - | | | limitTabRange | 在限制的范围内切换焦点 | <Element>node <Event>e | - | |

env.js

| 属性或方法名 | 描述 | 参数 | 返回值 | 备注 | |:-------------|:-------------------------------------|:-----|:-----------|:-----| | ieVersion | 获取 IE 浏览器的 ** 渲染引擎 ** 版本 | - | <Number> | |

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

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

dom.js

| 属性或方法名 | 描述 | 参数 | 返回值 | 备注 | |:-------------|:---------------------|:---------------------------------------------------------|:------------------|:----------------------------------| | hasDOM | 是否能使用 DOM | - | <Boolean> | 这是一个属性 | | addClass | 添加 className | <Element>node <String>className | | | | removeClass | 移除 className | <Element>node <String>className | | | | toggleClass | 切换 className | <Element>node <String>className | <Boolean> | 返回值表示调用后是否有 className | | hasClass | 判断是否有 className | <Element>node <String>className | <Boolean> | | | matches | 是否匹配选择器 | <Element>node <String>selector | <Boolean> | | | getStyle | 获取元素的样式 | <Element>node <String>name | <Object/String> | | | setStyle | 设置元素的样式 | <Element>node <String>name <String>value | <String> | 参数二支持传 Object 批量设置 | | scrollbar | 页面滚动条的默认大小 | - | <Object> | 返回值包含 width, height 两个属性 |

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

| 属性名 | 描述 | 参数 | 返回值 | 备注 | |:-----------|:-------------------|:-----|:-------------------|:-----| | animation | 是否支持 CSS 动画 | | <Object/Boolean> | | | transition | 是否支持 CSS 过渡 | | <Object/Boolean> | | | flex | 是否支持 flex 布局 | | <Boolean> | |

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

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:-----------|:-------------------------|:-------------------------------------------------------------------|:-------|:-----| | deprecated | 方法或属性不再使用的提示 | <String> props <String> instead <String> component | | | | warning | 控制台警告 | <String> msg | | |

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

| 方法名 | 描述 | 参数 | 返回值 | 备注 | |:-------|:----------------|:-----|:-----------|:-----| | - | 生成全局唯一 ID | | <String> | |

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

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

keycode.js

| 属性名 | 描述 | 参数 | 返回值 | 备注 | |:-------|:-----------------|:-----|:-----------|:-----| | - | 键盘 keycode map | | <Object> | |

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'