自己用的一些工具包集合
- util - 常用的工具函数
- dom - 常用的
dom操作
- isUndefined - 判断是否为undefined
- isNull - 判断是否为null
- isObject - 判断是否为对象
- isArray - 判断是否为数组
- isFunction - 判断是否为函数
- isString - 判断是否为字符串
- isNumber - 判断是否为数值
- merge - 合并对象
- toArray - 转换类数组对象为数组对象
- typeCheck - 批量校验对象的类型
- typeIs - 判断对象属于某种类型
- 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';
判断是否为undefined
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isUndeFined('1'); // return: false
判断是否为null
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isNull('1'); // return: false
判断是否为对象
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isObject('1'); // return: false
判断是否为数组
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isArray('1'); // return: false
判断是否为函数
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isFunction('1'); // return: false
判断是否为字符串
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.iString('1'); // return: true
判断是否为数值型
参数
- obj (string|number|array|object|boolean) - 想要判断的对象
返回值
true or false
例子
Utils.isNumber(1); // return: true
合并数组
参数
- obj (object) - 传入想要合并的多个对象
返回值
新的数组对象
例子
Utils.isArray({a:1},{b:1}); // return: {a:1,b:1}
类数组对象转换
参数
- obj (object) - 传入想要转换的对象
返回值
新的数组对象
例子
Utils.toArray({ 0: 'a', 1: 'b', length: 2 }); // return: ['a', 'b']
批量对象判断 - 任何一个条件满足即可
参数
- 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
批量对象判断 - 条件需要全部满足
参数
- 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
判断对象属于哪种类型
参数
- obj (string|number|array|object|function|null|undefined) - 传入想要判断的对象
返回值
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元素
参数
- tag (string) - 传入想要获取的dom元素,比如 '#id','.class'
返回值
获取到的dom对象
例子
// index.html <div class="a-div"></div> // app.js DOM.getElement('.a-div'); // return [HTMLCollection]
增加类名
参数
- 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>
删除类名
参数
- 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>
增加事件监听器
参数
- 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);
移除事件监听器
参数
- 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);
获取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的值,若为数据或对象,则会进行转换
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
- 增加DOM部分的单元测试
- 增加DOM部分的链式调用
- 增加单元测试覆盖率的统计(Utils部分)
- 增加Number类型判断
- 增加单元测试覆盖率的统计(DOM部分)
- 增加数组拼接、增强对象合并的功能、对象根据字符串获取相对应的值、增加NaN类型判断、增加Boolean类型判断、增加数组对比、增加对象对比