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'

rat-util

rat-util

目录及方法结构

使用示例

API

func.js

object.js

string.js

events.js

focus.js

env.js

dom.js

support.js

log.js

guid.js

keycode.js

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

rat-util

rat-util

目录及方法结构

使用示例

API

func.js

object.js

string.js

events.js

focus.js

env.js

dom.js

support.js

log.js

guid.js

keycode.js

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads