Pocket-tool NPM

pocket-tool

pocket-tool

自己用的一些工具包集合

功能

util - 常用的工具函数
dom - 常用的dom操作

功能点

utils

isUndefined - 判断是否为undefined
isNull - 判断是否为null
isObject - 判断是否为对象
isArray - 判断是否为数组
isFunction - 判断是否为函数
isString - 判断是否为字符串
isNumber - 判断是否为数值
merge - 合并对象
toArray - 转换类数组对象为数组对象
typeCheck - 批量校验对象的类型
typeIs - 判断对象属于某种类型

dom

getElement - 获取dom元素
addClass - 增加类名
removeClass - 删除类名
on - 增加事件监听器
off - 移除事件监听器
getDataSet - 获取dataset

调用方式

可以通过 npm 方式安装

npm install pocket-tools --save

// app.js
import PTool from 'pocket-tools';
// or
import { Utils,Dom } from 'pocket-tools';

API

Utils

Utils.isUndefined(obj)

判断是否为undefined

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isUndeFined('1');
// return: false

Utils.isNull(obj)

判断是否为null

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isNull('1');
// return: false

Utils.isObject(obj)

判断是否为对象

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isObject('1');
// return: false

Utils.isArray(obj)

判断是否为数组

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isArray('1');
// return: false

Utils.isFunction(obj)

判断是否为函数

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isFunction('1');
// return: false

Utils.isString(obj)

判断是否为字符串

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.iString('1');
// return: true

Utils.isNumber

判断是否为数值型

参数

obj (string|number|array|object|boolean) - 想要判断的对象

返回值

true or false

例子

Utils.isNumber(1);
// return: true

Utils.merge(obj,obj...)

合并数组

参数

obj (object) - 传入想要合并的多个对象

返回值

新的数组对象

例子

Utils.isArray({a:1},{b:1});
// return: {a:1,b:1}

Utils.toArray(obj)

类数组对象转换

参数

obj (object) - 传入想要转换的对象

返回值

新的数组对象

例子

Utils.toArray({
    0: 'a',
    1: 'b',
    length: 2
});
// return: ['a', 'b']

Utils.typeCheck.any(obj)

批量对象判断 - 任何一个条件满足即可

参数

obj (object|array) - 传入想要判断的字面量对象或者数组对象

返回值

true or false

例子

var obj = {
    type: "string",// number,function,object,array,null,undefined
    value: '1'
};
Utils.typeCheck.any(obj);
// return: true

var arr = [
    {
        type: 'string',
        value: '1'
    },
    {
        type: 'number',
        value: '1'
    }
];
Utils.typeCheck.any(obj);
// return: true

Utils.typeCheck.all(obj)

批量对象判断 - 条件需要全部满足

参数

obj (object|array) - 传入想要判断的字面量对象或者数组对象

返回值

true or false

例子

var obj = {
    type: "string",// number,function,object,array,null,undefined
    value: '1'
};
Utils.typeCheck.all(obj);
// return: true

var arr = [
    {
        type: 'string',
        value: '1'
    },
    {
        type: 'number',
        value: 1
    }
];
Utils.typeCheck.all(arr);
// return: true

Utils.typeIs(obj)

判断对象属于哪种类型

参数

obj (string|number|array|object|function|null|undefined) - 传入想要判断的对象

返回值

例子

var obj = {
    type: "string",// number,function,object,array,null,undefined
    value: '1'
};
Utils.typeIs(obj);
// return: 'object'

var arr = [
    {
        type: 'string',
        value: '1'
    },
    {
        type: 'number',
        value: 1
    }
];
Utils.typeIs(arr);
// return: 'array'

DOM

DOM.getElement(tag)

获取dom元素

参数

tag (string) - 传入想要获取的dom元素，比如 '#id','.class'

返回值

获取到的dom对象

例子

// index.html
<div class="a-div"></div>

// app.js
DOM.getElement('.a-div');
// return [HTMLCollection]

DOM.addClass(element, className)

增加类名

参数

element (object) - 传入dom节点
className (string) - 传入想要添加的类名，可用空格隔开，'class1 class2'

例子

// index.html
<div class="a-div"></div>

// app.js
const div = DOM.getElement('.a-div');
DOM.addClass(div, 'class1 class2');
// <div class="a-div class1 class2"></div>

DOM.removeClass(element, className)

删除类名

参数

element (object) - 传入dom节点
className (string) - 传入想要删除的类名，可用空格隔开，'class1 class2'

例子

// index.html
<div class="a-div class1 class2"></div>

// app.js
const div = DOM.getElement('.a-div');
DOM.removeClass(div, 'class1 class2');
// <div class="a-div"></div>

DOM.on(element, event, handler)

增加事件监听器

参数

element (object) - 传入dom节点
event (string) - 传入想要监听的事件，例如:'click'
handle (function) - 传入回调函数

例子

// index.html
<div class="a-div"></div>

// app.js
const div = DOM.getElement('.a-div');
DOM.on(div, 'click', fn);

DOM.off(element, event, handler)

移除事件监听器

参数

element (object) - 传入dom节点
event (string) - 传入想要移除的监听事件，例如:'click'
handle (function) - 传入回调函数

例子

// index.html
<div class="a-div"></div>

// app.js
const div = DOM.getElement('.a-div');
DOM.on(div, 'click', fn);
DOM.off(div, 'click', fn);

DOM.getDataSet(element, key)

获取dataset

参数

element (object) - 传入dom节点
key (string) - 传入data-set的key

例子

// index.html
<div class="a-div" data="1"></div>

// app.js
const div = DOM.getElement('.a-div');
DOM.getDataSet(div, 'data');
// return: 1

返回值

具体data的值，若为数据或对象，则会进行转换

DOM 支持链式调用

addClass、removeClass、on、off、getDataSet均支持链式操作

例子

// index.html
<div class="a-div"></div>

// app.js
const getElment = DOM.getElement;

getElment('.a-div').addClass('a-div-new');

// <div class="a-div a-div-new"></div>

想要获取子对象，用法和jQuery相同

// index.html
<div class="a-div"></div>
<div class="a-div"></div>
<div class="a-div"></div>

// app.js
const getElment = DOM.getElement;

getElment('.a-div').eq(0).addClass('a-div-new');

// <div class="a-div a-div-new"></div>

获取真实DOM元素则通过索引值获取

// index.html
<div class="a-div"></div>
<div class="a-div"></div>
<div class="a-div"></div>

// app.js
const getElment = DOM.getElement;

getElment('.a-div')[0].className;

// a-div