@spore-ui/tskit

# DOM相关处理与取值

# eventOccurInside

判断事件是否发生在一个 Dom 元素内。

  • 常用于判断点击事件发生在浮层外时关闭浮层。

# Parameters

# Examples

import { eventOccurInside } from '@spore-ui/tskit';
$('.layer').on('click', function(evt){
  if(eventOccurInside(evt, $(this).find('close').get(0))){
    $(this).hide();
  }
});
1
2
3
4
5
6

Returns Boolean (opens new window) 事件是否发生在 node 内

# isHTMLElement

判断对象是否为dom元素

# Parameters

# Examples

import { isHTMLElement } from '@spore-ui/tskit';
isHTMLElement(document.body) // true
1
2

Returns Boolean (opens new window) 是否为dom元素

# 函数包装与处理

# setLock

包装为触发一次后，预置时间内不能再次触发的函数

  • 类似于技能冷却。

# Parameters

# Examples

import { setLock } from '@spore-ui/tskit';
$('#input').keydown(setLock(() => {
  console.info('do request');
}, 500));
// 第一次按键，就会触发一次函数调用
// 之后连续按键，仅在 500ms 结束后再次按键，才会再次触发事件函数调用
1
2
3
4
5
6

Returns Function (opens new window) 经过包装的冷却触发函数

# setPrepare

以闭包机制构建一个条件触发管理器

  • 条件触发管理器本身是一个函数
    • 条件触发管理器作用机制类似 jQuery.ready
    • 传入 function 作为条件触发后的回调
    • 可接收条件触发函数传递的 1 个参数
  • 调用条件触发管理器的 done 方法来激活回调条件
    • 之前插入管理器的回调函数按队列顺序执行
    • 之后插入管理器的回调函数立即执行
    • done 方法可接收 1 个参数传给回调方法

# Examples

import { setPrepare } from '@spore-ui/tskit';
// 生成一个管理器函数 timeReady
var timeReady = setPrepare();

// 设置条件为2秒后就绪
setTimeout(() => {
  timeReady.done('ready');
}, 2000);

// 调用管理器函数 timeReady，插入要执行的任务函数
timeReady((str) => {
  // 2 秒后输出 1 ready
  console.info(1, str);
});

// 调用管理器函数 timeReady，插入要执行的任务函数
timeReady((str) => {
  // 2 秒后输出 2 ready
  console.info(2, str);
});

// 2100ms 后执行
setTimeout(() => {
  // 调用管理器函数 timeReady，插入要执行的任务函数
  timeReady((str) => {
    // 立即执行，输出 3 ready
    console.info(3, str);
  });
}, 2100);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Returns Function (opens new window) 条件触发管理器函数

# setPromiseCache

包装为一个缓存函数，限定时间内，返回之前执行的 Promise 结果

  • 默认在回调执行前多次请求时，返回第一个回调结果
  • 可实现基于 Promise 机制的防抖能力。

# Parameters

# Examples

import { setPromiseCache } from '@spore-ui/tskit';
let index = 0;
const increase = () => new Promise(resolve => {
  setTimeout(() => {
    index += 1;
    resolve(index);
  }, 10);
});
const cacheIncrease = setPromiseCache(increase);
const exec = async () => {
  const rs = await cacheIncrease();
  console.info(rs);
};
exec(); // 1
exec(); // 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Returns Function (opens new window) 经过包装的函数

# setRegular

包装为规律触发的函数，用于降低密集事件的处理频率

  • 在疯狂操作期间，按照规律时间间隔，来调用任务函数

# Parameters

# Examples

import { setRegular } from '@spore-ui/tskit';
const comp = {
  countWords() {
    console.info(this.length);
  }
};
comp.regularCount = setRegular(comp.countWords.bind(comp), 200);
// 疯狂按键，每隔 200ms 才有一次按键有效
$('#input').keydown(() => {
  comp.length = $('#input').val().length;
  comp.regularCount();
}));
1
2
3
4
5
6
7
8
9
10
11
12

Returns Function (opens new window) 经过包装的定时触发函数

# 接口请求与异步获取

# getScript

加载 script 文件

# Parameters

# Examples

import { getScript } from '@spore-ui/tskit';
getScript('https://sporeui.github.io/spore-kit/docs/js/test.js').then(() => {
  console.info('loaded');
});
1
2
3
4

Returns Promise (opens new window)<undefined (opens new window)> 加载完成的回调

# loadSdk

sdk 加载统一封装

  • 多次调用不会发起重复请求

# Parameters

# Examples

import { loadSdk } from '@spore-ui/tskit';
loadSdk({
  name: 'TencentCaptcha',
  url: 'https://ssl.captcha.qq.com/TCaptcha.js'
}).then(TencentCaptcha => {})
1
2
3
4
5

Returns Promise (opens new window)<unknown> sdk 加载完成，回调加载的对象

# 数字处理

# commaFormat

数字的千分位逗号分隔表示法

  • IE8 的 toLocalString 给出了小数点后2位: N.00

# Parameters

# Examples

import { commaFormat } from '@spore-ui/tskit'
commaFormat(1234567); // '1,234,567'
1
2

Returns String (opens new window) 千分位表示的数字

# fixAccuracy

修正小数精度

  • 解决 0.1 + 0.2 !== 0.3 的问题

# Parameters

# Examples

import { fixAccuracy } from '@spore-ui/tskit'
fixAccuracy(0.1 + 0.2) === 0.3; // true
fixAccuracy(0.41 + 0.5) === 0.91 // true
1
2
3

Returns String (opens new window) 千分位表示的数字

# 字符串处理

# byteLength

获取字符串长度，一个中文算2个字符

# Parameters

# Examples

import { byteLength } from '@spore-ui/tskit';
byteLength('中文cc'); // 6
1
2

Returns Number (opens new window) 字符串长度

# dbcToSbc

全角字符转半角字符

# Parameters

# Examples

import { dbcToSbc } from '@spore-ui/tskit';
dbcToSbc('ＳＡＡＳＤＦＳＡＤＦ'); // 'SAASDFSADF'
1
2

Returns String (opens new window) 经过转换的字符串

# decodeHTML

解码HTML，将实体字符转换为HTML字符

# Parameters

# Examples

import { decodeHTML } from '@spore-ui/tskit';
decodeHTML('&amp;&lt;&gt;&quot;&#39;&#32;'); // '&<>"\' '
1
2

Returns String (opens new window) HTML字符串

# encodeHTML

编码HTML，将HTML字符转为实体字符

# Parameters

# Examples

import { encodeHTML } from '@spore-ui/tskit';
encodeHTML(`&<>"\' `); // '&amp;&lt;&gt;&quot;&#39;&#32;'
1
2

Returns String (opens new window) 经过转换的字符串

# getLeftByteString

从左到右取字符串，中文算两个字符

# Parameters

# Examples

import { getLeftByteString } from '@spore-ui/tskit';
//向汉编致敬
getLeftByteString('世界真和谐', 6); // '世界真'
1
2
3

Returns String (opens new window) str

# getRnd36

获取36进制随机字符串

# Parameters

  • rnd Float? 随机数，不传则生成一个随机数

# Examples

import { getRnd36 } from '@spore-ui/tskit';
getRnd36(0.5810766832590446); // 'kx2pozz9rgf'
1
2

Returns String (opens new window) 转成为36进制的字符串

# ipToHex

十进制IP地址转十六进制

# Parameters

# Examples

import { ipToHex } from '@spore-ui/tskit';
ipToHex('255.255.255.255'); //return 'ffffffff'
1
2

Returns String (opens new window) 16进制数字IPV4地址

# sizeOfUTF8String

取字符串 utf8 编码长度

# Parameters

# Examples

import { sizeOfUTF8String } from '@spore-ui/tskit';
sizeOfUTF8String('中文c'); //return 7
1
2

Returns Number (opens new window) 字符串长度

# substitute

简单模板函数

# Parameters

# Examples

import { substitute } from '@spore-ui/tskit';
substitute('{{city}}欢迎您', {city:'北京'}); // '北京欢迎您'
1
2

Returns String (opens new window) 替换了模板的字符串

# 时间与日期处理

# delay

延迟指定时间

# Parameters

# Examples

import { delay } from '@spore-ui/tskit';
const fn = async () {
  await delay(100);
  console.info('100ms 后执行');
};
fn();
1
2
3
4
5
6

Returns Promise (opens new window)<void> 时间结束后的回调 Promise

# formatDate

日期对象格式化输出

格式化日期对象模板键值说明

  • year 年份原始数值
  • month 月份原始数值[1, 12]
  • date 日期原始数值[1, 31]
  • day 星期原始数值[0, 6]
  • hours 小时原始数值[0, 23]
  • miniutes 分钟原始数值[0, 59]
  • seconds 秒原始数值[0, 59]
  • milliSeconds 毫秒原始数值[0, 999]
  • YYYY 年份数值，精确到4位(12 => '0012')
  • YY 年份数值，精确到2位(2018 => '18')
  • Y 年份原始数值
  • MM 月份数值，精确到2位(9 => '09')
  • M 月份原始数值
  • DD 日期数值，精确到2位(3 => '03')
  • D 日期原始数值
  • d 星期数值，通过 weekday 参数映射取得(0 => '日')
  • hh 小时数值，精确到2位(9 => '09')
  • h 小时原始数值
  • mm 分钟数值，精确到2位(9 => '09')
  • m 分钟原始数值
  • ss 秒数值，精确到2位(9 => '09')
  • s 秒原始数值
  • mss 毫秒数值，精确到3位(9 => '009')
  • ms 毫秒原始数值

# Parameters

# Examples

import { formatDate } from '@spore-ui/tskit';
console.info(
  formatDate(new Date(),{
    render(rs: TypeDateInfo) {
      return `${rs.YYYY}年${rs.MM}月${rs.DD}日 周${rs.d} ${rs.hh}时${rs.mm}分${rs.ss}秒`
    }
  })
);
// 2015年09月09日 周三 14时19分42秒
1
2
3
4
5
6
7
8
9

Returns String (opens new window) 格式化完成的字符串

# getLastStart

获取过去一段时间的起始日期，如3月前第1天，2周前第1天，3小时前整点

# Parameters

# Examples

import { getLastStartTime } from '@spore-ui/tskit';
const time = getLastStartTime(
  new Date('2018-10-25'),
  'month',
  0
).getTime(); // 1538323200000
new Date(time); // Mon Oct 01 2018 00:00:00 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7

Returns Date (opens new window) 最近单位时间的起始时间对象

# getTimeSplit

获取某个时间的 整年|整月|整日|整时|整分 时间对象

# Parameters

# Examples

import { getTimeSplit } from '@spore-ui/tskit';
new Date(
  getTimeSplit(
    '2018-09-20',
    'month'
  )
).toGMTString();
// Sat Sep 01 2018 00:00:00 GMT+0800 (中国标准时间)

new Date(
  getTimeSplit(
    '2018-09-20 19:23:36',
    'hour'
  )
).toGMTString();
// Thu Sep 20 2018 19:00:00 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Returns Date (opens new window) 时间整点对象

# parseUnitTime

时间数字拆分为天时分秒

# Parameters

# Examples

import { parseUnitTime } from '@spore-ui/tskit';
console.info( parseUnitTime(12345 * 67890) );
// Object {day: 9, hour: 16, minute: 48, second: 22, ms: 50}
console.info( parseUnitTime(12345 * 67890, {maxUnit : 'hour'}) );
// Object {hour: 232, minute: 48, second: 22, ms: 50}
1
2
3
4
5

Returns Object (opens new window) 拆分完成的天时分秒

# CountDown

提供倒计时器统一封装

# Parameters

# Examples

import { CountDown } from '@spore-ui/tskit';
const target = Date.now() + 5000;

const cd1 = new CountDown({
  target,
  onChange(delta) {
    console.info('cd1 change', delta);
  },
  onStop(delta) {
    console.info('cd1 stop', delta);
  }
});

setTimeout(() => {
  //trigger stop
  cd1.stop();
}, 2000);

const cd2 = new CountDown({
  target,
  interval: 2000,
  onChange(delta) {
    console.info('cd2 change', delta);
  },
  onStop(delta) {
    console.info('cd2 stop', delta);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# CountDown#setTarget

重设目标时间

# Examples

const cd = new CountDown();
const localTime = '2019/01/01';
cd.setTarget(serverTime);
1
2
3

# CountDown#correct

纠正时间差

# Examples

const cd = new CountDown();
const serverTime = '2019/01/01';
const localTime = '2020/01/01';
cd.correct(serverTime);
cd.correct(serverTime, localTime);
1
2
3
4
5

# CountDown#stop

停止倒计时

# Examples

const cd = new CountDown();
cd.stop();
1
2

# CountDown#destroy

销毁倒计时

# Examples

const cd = CountDown();
cd.destroy();
1
2

# URL工具函数

# getQuery

解析 location.search 为一个JSON对象

  • 或者获取其中某个参数

# Parameters

# Examples

import { getQuery } from '@spore-ui/tskit';
const url = 'http://localhost/profile?beijing=huanyingni';
console.info( getQuery(url) );
// {beijing : 'huanyingni'}
console.info( getQuery(url, 'beijing') );
// 'huanyingni'
1
2
3
4
5
6

Returns (Object (opens new window) | String (opens new window)) query对象 | 参数值

# 其他工具函数

# abToHex

ArrayBuffer 转 16 进制字符串

# Parameters

# Examples

import { abToHex } from '@spore-ui/tskit';
const ab = new ArrayBuffer(2);
const dv = new DataView(ab);
dv.setUint8(0, 171);
dv.setUint8(1, 205);
abToHex(ab); // => 'abcd'
1
2
3
4
5
6

Returns String (opens new window) 16进制字符串

# ascToHex

ASCII字符串转16进制字符串

# Parameters

# Examples

import { ascToHex } from '@spore-ui/tskit';
ascToHex(); // => ''
ascToHex('*+'); // => '2a2b'
1
2
3

Returns String (opens new window) 16进制字符串

# getType

获取数据类型

# Parameters

  • item any 任何类型数据

# Examples

import { getType } from '@spore-ui/tskit';
getType({}); // 'object'
getType(1); // 'number'
getType(''); // 'string'
getType(function(){}); // 'function'
getType(); // 'undefined'
getType(null); // 'null'
getType(new Date()); // 'date'
getType(/a/); // 'regexp'
getType(Symbol('a')); // 'symbol'
getType(window) // 'window'
getType(document) // 'htmldocument'
getType(document.body) // 'htmlbodyelement'
getType(document.head) // 'htmlheadelement'
getType(document.getElementsByTagName('div')) // 'htmlcollection'
getType(document.getElementsByTagName('div')[0]) // 'htmldivelement'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Returns String (opens new window) 对象类型

# hexToAb

16进制字符串转ArrayBuffer

# Parameters

# Examples

import { hexToAb } from '@spore-ui/tskit';
var ab = hexToAb();
ab.byteLength; // => 0
ab = hexToAb('abcd');
var dv = new DataView(ab);
ab.byteLength; // => 2
dv.getUint8(0); // => 171
dv.getUint8(1); // => 205
1
2
3
4
5
6
7
8

Returns ArrayBuffer (opens new window) 被转换后的 ArrayBuffer 对象

# hexToAsc

16进制字符串转ASCII字符串

# Parameters

# Examples

import { hexToAsc } from '@spore-ui/tskit';
$hexToAsc(); // => ''
$hexToAsc('2a2b'); // => '*+'
1
2
3

Returns String (opens new window) ASCII字符串

# hslToRgb

HSL颜色值转换为RGB

  • h, s, 和 l 设定在 [0, 1] 之间
  • 返回的 r, g, 和 b 在 [0, 255]之间

# Parameters

# Examples

import { hslToRgb } from '@spore-ui/tskit';
hslToRgb(0, 0, 0); // => [0,0,0]
hslToRgb(0, 0, 1); // => [255,255,255]
hslToRgb(0.5555555555555555, 0.9374999999999999, 0.6862745098039216); // => [100,200,250]
1
2
3
4

Returns Array (opens new window) RGB色值数值

# measureDistance

测量地理坐标的距离

# Parameters

# Examples

import { measureDistance } from '@spore-ui/tskit';
measureDistance(0, 0, 100, 100); // 9826.40065109978
1
2

Returns Number (opens new window) 2个坐标之间的距离（千米）

# rgbToHsl

RGB 颜色值转换为 HSL.

  • r, g, 和 b 需要在 [0, 255] 范围内
  • 返回的 h, s, 和 l 在 [0, 1] 之间

# Parameters

# Examples

import { rgbToHsl } from '@spore-ui/tskit';
rgbToHsl(100, 200, 250); // => [0.5555555555555555,0.9374999999999999,0.6862745098039216]
rgbToHsl(0, 0, 0); // => [0,0,0]
rgbToHsl(255, 255, 255); // => [0,0,1]
1
2
3
4

Returns Array (opens new window) HSL各值数组

# isLightColor

判断颜色是否为浅色

# Parameters

# Examples

import { isLightColor } from '@spore-ui/tskit';
isLightColor('#ffffff'); // => true
isLightColor('#000000'); // => false
1
2
3

Returns Boolean (opens new window) 是否为浅色

# parseRGB

rgb字符串解析

  • 返回的 r, g, 和 b 在 [0, 255]之间

# Parameters

# Examples

import { parseRGB } from '@spore-ui/tskit';
parseRGB('#ffffff'); // => [255,255,255]
parseRGB('#fff'); // => [255,255,255]
1
2
3

Returns Array (opens new window) RGB色值数值

← 推荐工具 →