1.0.9 • Published 1 year ago

@xtdev/xt-utils v1.0.9

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

项目启动:

# install dependencies
npm install

# 编译sdk命令
npm run build

快速使用:

第一种:
<script src="https://img.tanjiu.cn/frontsdk/1.0.8/xtUtils.js"></script>
console.log(window.xtUtils.urlQuery)
console.log(window.xtUtils.urlQuery.queryToObj)

第二种(当前最新版本:1.0.8):
npm install @xtdev/xt-utils -S

import { urlQuery } from '@xtdev/xt-utils'
console.log(urlQuery)
console.log(urlQuery.queryToObj)

方法:

方法名称: queryToObj

方法详细: 将url的传参参数形式的字符串转化为json对象格式
使用方式:
外链: const urlQuery = window.xtUtils.urlQuery
npm: import { urlQuery } from '@xtdev/xt-utils'
let param = 'school=gongda&hobby=skating&number=3'
let jsonObj = urlQuery.queryToObj(param)

console.log(jsonObj)
输出:{
        school: 'gongda',
        hobby: 'skaing',
        number: '3'
      }

方法名称: toQueryString

方法详细: 将obj转换成url参数形式
使用方式:
外链: const urlQuery = window.xtUtils.urlQuery
npm: import { urlQuery } from '@xtdev/xt-utils'
urlQuery.toQueryString({a:1,b:2})  =>   a=1&b=2

方法名称: urlToJson

方法详细: 直接取url中的参数转为json(或者不转)
使用方式:
外链: const urlQuery = window.xtUtils.urlQuery
npm: import { urlQuery } from '@xtdev/xt-utils'
用法1:
let para = urlQuery.urlToJson()
console.log(para)

用法2:
let para = urlQuery.urlToJson('https://www.baidu.com?a=1&b=2')
console.log(para)

方法名称: getQueryString

方法详细: 直接取url中的某个参数
使用方式:
外链: const urlQuery = window.xtUtils.urlQuery
npm: import { urlQuery } from '@xtdev/xt-utils'
用法:
let deviceType = urlQuery.getQueryString('deviceType')
console.log(deviceType)

方法名称: setUrl

方法详细: 更改url中的某个参数,返回更改后的最终带参数url
使用方式:
外链: const urlQuery = window.xtUtils.urlQuery
npm: import { urlQuery } from '@xtdev/xt-utils'
参数解析:
json: 更改参数的json对象
originUrl:预置的网站地址

用法一:
let resultUrl = urlQuery.setUrl({id: 1, name: '测试页面'})
console.log(resultUrl) // 输出:https://********.html?id=1&name=测试页面

用法二:
let resultUrl = urlQuery.setUrl({id: 3, name: '哈哈哈'}, 'https://www.baidu.com')
console.log(resultUrl) // 输出:https://www.baidu.com?id=3&name=哈哈哈

方法名称: isReg

方法详细: 校验正则方法
使用方式:
外链: const regRules = window.xtUtils.regRules
npm: import { regRules } from '@xtdev/xt-utils'
用法一:
let result = regRules.isReg(123, 'reg_number')
console.log(result) // 输出:true

用法二:
let result = regRules.isReg(123, regRules.regPool.reg_number)
console.log(result) // 输出:true

用法三:
let result = regRules.isReg(18501268102, /^1\d{10}$/)
console.log(result) // 输出:true

方法名称: regPool

方法详细: 目前提供的正则池子
使用方式:
外链: const regRules = window.xtUtils.regRules
npm: import { regRules } from '@xtdev/xt-utils'
const regPool = {
  reg_emailAddress:
    /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, // 邮箱正则
  reg_space: /\s+/g, // 匹配所有空格
  reg_phoneNumber: /^1\d{10}$/, // 电话号码
  reg_url: /^http(s)?:\/\/.*$/, // 链接的正则,如:(http(s)://www.baidu.com)
  reg_number: /^[+-]?\d+(\.\d+|\.)?$/, // 数字正则(带有小数点)
  reg_number_nopoint: /^[0-9]*$/, // 数字正则(不带小数点)
  reg_word_cn: /^[\u4e00-\u9fa5]*$/, // 匹配中文汉字
  reg_word_eg: /^\w*$/, // 匹配英文字符及0-9,等价于“[A-Za-z0-9_]”
  reg_word_cn_eg: /^[\u4e00-\u9fa5|[A-Za-z]*$/, // 匹配中英文

  // 添加收货地址使用-----
  reg_name: /^[A-Za-z0-9|\u4e00-\u9fa5]*$/, // 匹配中英文不含空格(收货人)
  reg_address_info: /[\u4e00-\u9fa5]+/, // 匹配至少含有一个中文(地址详情)
  // -----

  reg_logistic: /^[A-Za-z0-9]+$/, // 纯数字+字母校验(物流单号)
  reg_special_word_en: /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, // 英文特殊字符
  reg_special_word_cn: /[·!#¥(——):;“”‘、,|《。》?、【】[\]]/im, // 中文特殊字符

  reg_ID_card:
    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, // 身份证

  reg_tag: /<[^<>]+>/g, // html标签正则
  reg_tag_img: /<img.*?src="(.*?)".*?\/?>/gi, // 匹配出img标签
  reg_zip_code_v2: /^[1-9]\d{5}/, // 邮编正则

  reg_telephone_v1: /^[0-9]{0,4}$/, // 座机-区号-4位
  reg_telephone_v2: /^[0-9]{7,11}$/, // 座机-号码-7-11位
  reg_telephone_v3: /^[0-9]{0,6}$/, // 座机-分机号-最多6位
}

用法一:
let result = regRules.regPool.reg_number
console.log(result) // 输出:/^[+-]?\d+(\.\d+|\.)?$/

方法名称: deepClone

方法详细: 对象、数组深拷贝
使用方式:
外链: const deepClone = window.xtUtils.deepClone
npm: import { deepClone } from '@xtdev/xt-utils'
用法一:
let result = deepClone({a: 1, b: 2})
console.log(result) // 深拷贝,输出:{a: 1, b: 2}

方法名称: isClass

方法详细: 返回当前数据类型(返回:array、object、number、string)
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
用法一:
let result = base.isClass({a: 1, b: 2})
console.log(result) // 打印数据类型,输出: 'object'

方法名称: enCodeData

方法详细: 字符串数据加密算法,双向-对应deCodeData方法;(***注:对同一字符串加密:得到的加密字符串每次都不一致。)
使用方式:
外链: const crypto = window.xtUtils.crypto
npm: import { crypto } from '@xtdev/xt-utils'
1. crypto.enCodeData('测试一下') // 输出加密后字符串:U2FsdGVkX1/GJ7iQZAYKp1IgSGdvopC86jz5jTnhUSI=
2. crypto.enCodeData({
      a: 1,
      b: 3,
    })
3. crypto.enCodeData([1,2,3,4,5])

方法名称: deCodeData

方法详细: 字符串数据解密算法,传入参数必须是上面'enCodeData'方法加密后的字符串
使用方式:
外链: const crypto = window.xtUtils.crypto
npm: import { crypto } from '@xtdev/xt-utils'
crypto.deCodeData('U2FsdGVkX1/GJ7iQZAYKp1IgSGdvopC86jz5jTnhUSI=') // 输出解密后字符串:测试一下

方法名称: md5

方法详细: 字符串md5加密算法,单向;(***注:对同一字符串加密:得到的加密字符串永远一致。)
使用方式:
外链: const crypto = window.xtUtils.crypto
npm: import { crypto } from '@xtdev/xt-utils'
md5('测试一下') // 输出加密后字符串:U2FsdGVkX1/GJ7iQZAYKp1IgSGdvopC86jz5jTnhUSI=

方法名称: loadCss

方法详细: 自定义动态加载css方法(支持传入对象、数组),串行依次按顺序加载数组中的css资源
使用方式:
外链: const loadCss = window.xtUtils.loadCss
npm: import { loadCss } from '@xtdev/xt-utils'
// 用法1: 资源串行加载
loadCss(
  [
    {
      global: "cssA", // 必须传入,避免spa单页面重复加载css,加载成功后,会将值注入到window上
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mantpl/css/recommand/init-304003f32f.css",
    },
    {
      global: "cssB",
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/newmusic/css/newmusic_min_1b1ebf56.css",
    },
  ], function () {
    console.log('静态资源已经全部加载完毕');
  }
);

// 用法2: 资源并行加载,增加第三个参数传2
loadCss(
  [
    {
      global: "cssA", // 必须传入,避免spa单页面重复加载css,加载成功后,会将值注入到window上
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mantpl/css/recommand/init-304003f32f.css",
    },
    {
      global: "cssB",
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/newmusic/css/newmusic_min_1b1ebf56.css",
    },
  ], function () {
    console.log('静态资源已经全部加载完毕');
  },
  2
);

方法名称: loadJs

方法详细: 自定义动态加载js方法(支持传入对象、数组),串行依次按顺序加载数组中的js资源
使用方式:
外链: const loadJs = window.xtUtils.loadJs
npm: import { loadJs } from '@xtdev/xt-utils'
// 用法1: 资源串行加载
loadJs(
  [
    {
      global: "Bscroll", // 必须传入,避免spa单页面重复加载js,加载成功后,会将值注入到window上
      src: "https://mstatic.secooimg.com/js/bscroll.min.js",
    },
    {
      global: "jQuery",
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js",
    },
  ], function () {
    console.log('静态资源已经全部加载完毕');
  }
);

// 用法2: 资源并行加载,增加第三个参数传2
loadJs(
  [
    {
      global: "Bscroll", // 必须传入,避免spa单页面重复加载js,加载成功后,会将值注入到window上
      src: "https://mstatic.secooimg.com/js/bscroll.min.js",
    },
    {
      global: "jQuery",
      src: "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js",
    },
  ], function () {
    console.log('静态资源已经全部加载完毕');
  },
  2
);

方法名称: myBrowser

方法详细: 判断当前浏览器类型(返回:Opera、FF、Chrome、Safari、IE、ipad)
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.myBrowser() // Chrome

方法名称: isPc

方法详细: 判断是否是pc端
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isPc() // true

方法名称: isH5

方法详细: 判断是否是h5端
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isH5() // true

方法名称: isIpad

方法详细: 判断是否是ipad端
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isIpad() // true

方法名称: isIpod

方法详细: 判断是否是ipod端
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isIpod() // true

方法名称: isWx

方法详细: 判断是否在微信中打开(微信环境)
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isWx() // true

方法名称: isWxMini

方法详细: 判断是否是微信小程序打开
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.isWxMini() // true

方法名称: systemType

方法详细: 判断当前浏览器是什么系统(mac、windows32、windows64、其他)
使用方式:
外链: const navigate = window.xtUtils.navigate
npm: import { navigate } from '@xtdev/xt-utils'
navigate.systemType() // 输出: 'mac'

方法名称: imgZoomAuto

方法详细: 等比例缩放图片函数
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
const newData = base.imgZoomAuto({
  oldWidth: 100,
  oldHeight: 200,
  newHeight: 300,
});
console.log(newData)
/*
输出:
{
  newHeight: 300,
  newWidth: 150,
  oldHeight: 200,
  oldWidth: 100
}
*/

方法名称: loadImage

方法详细: 加载img,完成后执行then后的逻辑
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
let imgUrl = "https://tpdoc.cn/erp/uploads/image/cut_133301_3487.png";
base.loadImage(imgUrl).then((url) => {
  console.log(url);
});

方法名称: getRandom

方法详细: 得到一个数组,内部数字随机且不重复(length:数组长度;range:随机范围)
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
const newData = base.getRandom(9);
console.log(newData) // 打印:0-9之间的随机整数(不包含9)

方法名称: getNorepeatArr

方法详细: 取0-n之间的随机整数
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
const newData = base.getNorepeatArr(3, 9)
console.log(newData) // 打印:0-9之间的随机整数(不包含9) 的 包含3项的数组

方法名称: wordLen

方法详细: 字符串按照不同字符规则标准,返回当前字符串长度;
wordLen(word, type) (word参数:字符串;第二个参数type:1是按照当前字符串长度返回, 2:是按照字符数的长度返回一个汉字长度是2个字符, 3:是按照汉字数的长度返回一个字符长度是0.5个汉字)
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
const word = '哈哈哈123'
var index1 = base.wordLen(word, 1)
var index2 = base.wordLen(word, 2)
var index3 = base.wordLen(word, 3)
console.log(index1) // 输出:6
console.log(index2) // 输出:9
console.log(index3) // 输出:4.5

方法名称: goBack

方法详细: 浏览器返回上一页
使用方式:
外链: const base = window.xtUtils.base
npm: import { base } from '@xtdev/xt-utils'
// 用法一:
base.goBack(true) // 暂存上一页的input值

// 用法二:
base.goBack(false) // 不暂存上一页的input值,全部刷新;默认是false

方法名称: setStorage

方法详细: 设置本地存储
使用方式:
外链: const storage = window.xtUtils.storage
npm: import { storage } from '@xtdev/xt-utils'
// 用法一:
storage.setStorage('20191111_game_v1', '哈哈哈123')

// 用法二:
storage.setStorage('20191111_game_v1', {a:1, b:2})

方法名称: removeStorage

方法详细: 删除本地存储
使用方式:
外链: const storage = window.xtUtils.storage
npm: import { storage } from '@xtdev/xt-utils'
storage.removeStorage('20191111_game_v1')

方法名称: getStorage

方法详细: 获取本地存储
使用方式:
外链: const storage = window.xtUtils.storage
npm: import { storage } from '@xtdev/xt-utils'
// 用法一:
let data = storage.getStorage('20191111_game_v1')
console.log(data)

// 用法二(数据是object时,可传第二个参数制定返回的属性):
let data = storage.getStorage('20191111_game_v1', 'deviceId')
console.log(data)

方法名称: setCookie

方法详细: 设置cookie
使用方式:
外链: const cookie = window.xtUtils.cookie
npm: import { cookie } from '@xtdev/xt-utils'
用法一:
cookie.setCookie('topay_cli_manage_name', '123')

用法二:
var in15Minutes = new Date(new Date().getTime() + 15 * 60 * 1000);
cookie.setCookie('topay_cli_manage_name', '123', {
  path: '/about',
  expires: in15Minutes, // 过期时间(毫秒)
})

方法名称: removeCookie

方法详细: 删除cookie
使用方式:
外链: const cookie = window.xtUtils.cookie
npm: import { cookie } from '@xtdev/xt-utils'
用法一:
cookie.removeCookie('topay_cli_manage_name')

用法二:
cookie.removeCookie('topay_cli_manage_name', {
  path: '/about',
})

方法名称: getCookie

方法详细: 获取cookie
使用方式:
外链: const cookie = window.xtUtils.cookie
npm: import { cookie } from '@xtdev/xt-utils'
用法一:
cookie.getCookie('cookieName')

用法二:
cookie.getCookie('cookieName', {
  path: '/about',
})

方法名称: getRandomString

方法详细: 产生随机字符串
example : getRandomString() => '27wx-9AkP-MPYj-ERfx'
example : getRandomString('dddd-dddd-dddd') => '5238-3191-0062'
example : getRandomString('sss_sss_sss') => 'TDP_pQR_xWQ'
example : getRandomString('**@**.com') => 'TXyQ@xYe7.com'
使用方式:
外链: const strTools = window.xtUtils.strTools
npm: import { strTools } from '@xtdev/xt-utils'
用法一: strTools.getRandomString() => '27wx-9AkP-MPYj-ERfx'
用法二: strTools.getRandomString('dddd-dddd-dddd') => '5238-3191-0062'
用法三: strTools.getRandomString('sss_sss_sss') => 'TDP_pQR_xWQ'
用法四: strTools.getRandomString('****@****.com') => 'TXyQ@xYe7.com'

方法名称: desensitization

方法详细: 电话号码/身份证 脱敏。有3个参数,具体使用如下:
使用方式:
外链: const strTools = window.xtUtils.strTools
npm: import { strTools } from '@xtdev/xt-utils'
用法一: strTools.desensitization(18501268102, 6,7) => ''185012**8102''
1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago