tddutil

1.0.3 • Public • Published

tddutil NPM Version NPM Downloads size-image

一个封装获取url参数,ajax方法,手机号、邮箱正则检测,sessionStorage、localStorage、cookie操作等常用方法的js工具库

使用方式

注:为简化操作,默认命名为"tdl"

npm install --save tddutil

ES6

import tdl from 'tddutil'
tdl.trim('test')

CommonJS

var tdl = require('tddutil');
tdl.trim('test')

AMD

require(['tddutil'],function(tdl){
 tdl.trim('test')
})

CMD

seajs.use('tddutil',function(undefined){
    //插件没有遵循CMD规范,这里的tdl是全局的
    tdl.trim('test')
});

直接引入

<script src="tddutil.min.js"></script>
tdl.trim('test')

方法说明

方法名 用途 描述
trim 字符串去空格 @param str {String} 需要处理的字符串
@param type {Boolean} 是否去除所有空格
each 遍历数值、对象 @param obj {Object|Array} 遍历对象
@param callback {Function} 回调函数,第一个参数为val,第二个为key,这里与jquery相反
param 对象转url参数 @param obj {Object|Array} 需要转换的对象
get 获取url参数 @param 参数为空时,获取当前url所有参数;
@param 参数为1个时,获取当前url的指定参数;
@param 参数为2个且第二个参数不为true时,获取指定url的指定参数;
@param 参数为2个且第二个参数为true时,获取指定url的所有参数;
test 常用字符串检测 @param type {String} 类型
@param str {String} 需要检测的字符串
storage 操作sessionStorage、
localStorage、cookie
@param type {String|Number} 类型(默认sessionStorage 0),其他localStorage 1、cookie 2 这里使用了作者的另外一个小插件,具体请参考https://github.com/weijhfly/js-utils/tree/master/storage-util
min 数组最小值 @param arr {Array} 数组
max 数组最大值 @param arr {Array} 数组
sort 数组升降排序 @param arr {Array} 数组
@param type {Boolean} 非false、0、''、null、undefined开启降序
eq 比较两个值
是否相等
@param obj1 {Any}
@param obj2 {Any}
ajax 封装ajax方法 @param options.type {String} get或者post请求,默认get
@param options.url {String} 请求路径,默认当前路径
@param options.async {String} 同步或异步,默认true 异步
@param options.data {Any} 参数,可以是对象、FormData、Blob等
@param options.headers {Object} 设置请求头
@param options.timeout {Number} 超时时间,默认0,无限制,超时触发error
@param options.dataType {String} 响应数据的类型,默认json
@param options.success {Function} ajax的成功回调,返回response、options、当前XMLHttpRequest实例
@param options.error {Function} ajax的失败回调,返回status/'not support ajax'/'timeout'、options、当前XMLHttpRequest实例
ajaxSetup 全局设置ajax 所有回调函数返回false会阻止下一步执行
@param before {Function} ajax发起请求之前,返回options、xhr,可统一修改options
@param after {Function} ajax成功返回之后,返回response、options、xhr,可统一修改response
@param error {Function} ajax失败回调,返回status、options、xhr

代码示例

/**
 * trim 字符串去除空格
 * @param str {String} 需要处理的字符串
 * @param type {Boolean} 是否去除所有空格
 */
console.log('trim-----------');

let str1 = tdl.trim(' trim ');
let str2 = tdl.trim(' trim test ',true);

console.log(str1);
console.log(str2);

/**
 * each 遍历数组及对象
 * @param obj {Object|Array} 遍历对象
 * @param callback {Function} 回调函数,第一个参数为val,第二个为key,这里与jquery相反
 */
console.log('each-----------');

tdl.each({aa:1, bb:2, cc:3},(v,i) => {
    console.log(v,i);
})
tdl.each([1,3,5,7,9],(v,i) => {
    console.log(v,i);
})

/**
 * param 对象转url参数
 * @param obj {Object|Array} 需要转换的对象
 */
console.log('param-----------');

let p = tdl.param({name:'li', age:18});

console.log(p);

/**
 * get 获取url参数
 * @param 参数为空时,获取当前url所有参数;
 * @param 参数为1个时,获取当前url的指定参数;
 * @param 参数为2个且第二个参数不为true时,获取指定url的指定参数;
 * @param 参数为2个且第二个参数为true时,获取指定url的所有参数;
 */
console.log('get-----------');

let arg1 = tdl.get();//所有参数
let arg2 = tdl.get('name');//指定参数
let arg3 = tdl.get('www.baidu.com?xx=1','xx');//指定url,指定参数
let arg4 = tdl.get('www.baidu.com?xx=1&yy=2&zz=3',true);//指定url,所有参数

console.log(arg1);
console.log(arg2);
console.log(arg3);
console.log(arg4);

/**
 * test 常用字符串检测
 * @param type {String} 类型
 * @param str {String} 需要检测的字符串
 */
console.log('test-----------');

let test1 = tdl.test('phone','18888888888');
let test2 = tdl.test('phone','123456');
let test3 = tdl.test('email','123456com');
let test4 = tdl.test('email','123456@qq.com');

console.log(test1);
console.log(test2);
console.log(test3);
console.log(test4);

/**
 * storage 操作sessionStorage、localStorage、cookie
 * 这里使用了作者的另外一个小插件,具体请参考https://github.com/weijhfly/js-utils/tree/master/storage-util
 * @param type {String|Number} 类型(默认sessionStorage 0),其他localStorage 1、cookie 2
 */
console.log('storage-----------');

//注:Chrome不支持本地html设置cookie
tdl.storage().set('msg','你翩翩地路过').get('msg',function(msg){
    console.log(msg);
}).setType(1).set('msg','以为不曾留下什么').get('msg',function(msg){
    console.log(msg);
}).setType(2).set('msg','却在我心里有了思念').get('msg',function(msg){
    console.log(msg);
}).setType().set('msg','若你还记得').get('msg',function(msg){
    console.log(msg);
}).setType(1).set('msg','那个蝉鸣的夏天').get('msg',function(msg){
    console.log(msg);
}).setType(2).set('msg','有一个你,也有一个我').get('msg',function(msg){
    console.log(msg);
})

/**
 * min max 数组中最小最大数值
 * @param arr {Array} 数组
 */
console.log('min max-----------');
let min = tdl.min([1,3,5,7,9]);
let max = tdl.max([2,4,6,8,10]);

console.log(min,max);

/**
 * sort 数组sort方法的修复版,支持升序降序
 * @param arr {Array} 数组
 * @param type {Boolean} 非false、0、''、null、undefined开启降序
 */
console.log('sort-----------');

let sort1 = [0,1,5,10,15].sort();
let sort2 = tdl.sort([0,1,5,10,15]);
let sort3 = tdl.sort([0,1,5,10,15],true);

console.log(sort1);
console.log(sort2);
console.log(sort3);

/**
 * eq 比较两个值是否相等(主要参考了underscore)
 * @param obj1 {Any}
 * @param obj2 {Any}
 */
console.log('eq-----------');

let e1 = tdl.eq(1,1);
let e2 = tdl.eq(NaN,NaN);
let e3 = tdl.eq([],[]);
let e4 = tdl.eq({x: 1},{y: 2});

console.log(e1);
console.log(e2);
console.log(e3);
console.log(e4);

/**
 * ajaxSetup 全局设置ajax
 * 所有回调函数返回false会阻止下一步执行
 * @param before {Function} ajax发起请求之前,返回options、xhr,可统一修改options
 * @param after {Function} ajax成功返回之后,返回response、options、xhr,可统一修改response
 * @param error {Function} ajax失败回调,返回status、options、xhr
 */
console.log('ajaxSetup-----------');

tdl.ajaxSetup.before = (options) => {
    console.log('ajaxSetup before')
    options.data.ajaxSetup = 1;
    //return false;
}
tdl.ajaxSetup.after = (data) => {
    console.log('ajaxSetup after', data.match(/tddutil/)[0])
    //return false;
}
tdl.ajaxSetup.error = (status) => {
    console.log('ajaxSetup error', status)
    //return false;
}

/**
 * ajax 封装ajax方法
 * @param options.type {String} get或者post请求,默认get
 * @param options.url {String} 请求路径,默认当前路径
 * @param options.async {String} 同步或异步,默认true 异步
 * @param options.data {Any} 参数,可以是对象、FormData、Blob等
 * @param options.headers {Object} 设置请求头
 * @param options.timeout {Number} 超时时间,默认0,无限制,超时触发error
 * @param options.dataType {String} 响应数据的类型,默认json
 * @param options.success {Function} ajax的成功回调,返回response、options、当前XMLHttpRequest实例
 * @param options.error {Function} ajax的失败回调,返回status/'not support ajax'/'timeout'、options、当前XMLHttpRequest实例
 */
console.log('ajax-----------');

tdl.ajax({
    type: 'get',
    url: '',
    data: {test: 1},
    dataType: 'text',
    success: function(data, options, xhr){
        console.log(data.match(/tddutil/)[0], options, xhr);
    }
})

tdl.ajax({
    type: 'post',
    url: '',
    data: {test: 1, post: 1},
    dataType: 'json', // 默认json,可省略
    success: function(data, options, xhr){
        console.log(data, options, xhr);
    },
    error: function(status, options, xhr){
        console.log(status, options, xhr);
    }
})

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i tddutil

Weekly Downloads

3

Version

1.0.3

License

MIT

Unpacked Size

104 kB

Total Files

19

Last publish

Collaborators

  • jiangxiaohei