@spore-ui/kit

# spore-ui/kit/packages/app

处理与客户端相关的交互

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.app.callUp);

// 单独引入 @spore-ui/kit/packages/app
var $app = require('@spore-ui/kit/packages/app');
console.info($app.callUp);

// 单独引入一个方法
var $callUp = require('@spore-ui/kit/packages/app/callUp');
1
2
3
4
5
6
7
8
9
10

# app/callUp

此方法用于呼起本地客户端，呼起失败时，跳转到客户端下载地址或者中间页

  • 首先需要客户端提供一个协议地址 protocol
  • 然后通过浏览器访问该地址或者 iframe 访问该协议地址来触发客户端的打开动作
  • 在设定好的超时时间 (waiting) 到达时进行检查
  • 由于 IOS 下，跳转到 APP，页面 JS 会被阻止执行
  • 所以如果超时时间大大超过了预期时间范围，可断定 APP 已被打开，此时触发 onTimeout 回调事件函数
  • 对于 IOS，此时如果从 APP 返回页面，就可以通过 waitingLimit 时间差来判断是否要执行 fallback 回调事件函数
  • Android 下，跳转到 APP，页面 JS 会继续执行
  • 此时无论 APP 是否已打开，都会触发 onFallback 事件与 fallback 回调事件函数
  • fallback 默认操作是跳转到 fallbackUrl 客户端下载地址或者中间页地址
  • 这样对于没有安装 APP 的移动端，页面会在超时事件发生时，直接跳转到 fallbackUrl

# Parameters

# Examples

var $callUp = require('@spore-ui/kit/packages/app/callUp');
$callUp({
  startTime: Date.now(),
  waiting: 800,
  waitingLimit: 50,
  protocol : scheme,
  fallbackUrl : download,
  onFallback : function () {
    // should download
  }
});
1
2
3
4
5
6
7
8
9
10
11

# spore-ui/kit/packages/arr

类数组对象相关工具函数

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.arr.contains);

// 单独引入 @spore-ui/kit/packages/arr
var $arr = require('@spore-ui/kit/packages/arr');
console.info($arr.contains);

// 单独引入一个方法
var $contains = require('@spore-ui/kit/packages/arr/contains');
1
2
3
4
5
6
7
8
9
10

# arr/contains

确认对象是否在数组中

# Parameters

# Examples

var $contains = require('@spore-ui/kit/packages/arr/$contains');
console.info($contains([1,2,3,4,5], 3)); // true
1
2

Returns Boolean (opens new window) 如果对象在数组中，返回 true

# arr/erase

删除数组中的对象

# Parameters

# Examples

var $erase = require('@spore-ui/kit/packages/arr/erase');
console.info($erase([1,2,3,4,5],3)); // [1,2,4,5]
1
2

Returns Number (opens new window) 对象原本所在位置

# arr/find

查找符合条件的元素在数组中的位置

# Parameters

# Examples

var $find = require('@spore-ui/kit/packages/arr/find');
console.info($find([1,2,3,4,5], function (item) {
  return item < 3;
}); // [0, 1]
1
2
3
4

Returns Array (opens new window) 符合条件的元素在数组中的位置

# arr/flatten

数组扁平化

# Parameters

# Examples

var $flatten = require('@spore-ui/kit/packages/arr/flatten');
console.info($flatten([1, [2,3], [4,5]])); // [1,2,3,4,5]
1
2

Returns array (opens new window) 经过扁平化处理的数组

# arr/include

确认对象是否在数组中，不存在则将对象插入到数组中

# Parameters

# Examples

var $include = require('@spore-ui/kit/packages/arr/include');
console.info($include([1,2,3],4)); // [1,2,3,4]
console.info($include([1,2,3],3)); // [1,2,3]
1
2
3

Returns Array (opens new window) 经过处理的源数组

本地存储相关工具函数

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.cookie.cookie);

// 单独引入 spore-ui/kit/packages/cookie
var $cookie = require('@spore-ui/kit/packages/cookie');
console.info($cookie.cookie);

// 单独引入一个工具对象
var $cookie = require('@spore-ui/kit/packages/cookie/cookie');
1
2
3
4
5
6
7
8
9
10

提供对 cookie 的读写能力

  • 写入时自动用 encodeURIComponent 编码
  • 读取时自动用 decodeURIComponent 解码

# Examples

var $cookie = require('@spore-ui/kit/packages/cookie/cookie');
$cookie.set('name', '中文', {
  expires: 1
});
$cookie.read('name') // '中文'
1
2
3
4
5

提供对 cookie 的读写能力

  • 此模块直接提供 js-cookie 的原生能力，不做任何自动编解码

# Examples

var $cookie = require('@spore-ui/kit/packages/cookie/origin');
$cookie.set('name', 'value', {
  expires: 1
});
$cookie.read('name') // 'value'
1
2
3
4
5

# spore-ui/kit/packages/date

日期相关工具

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.date.format);

// 单独引入 @spore-ui/kit/packages/date
var $date = require('@spore-ui/kit/packages/date');
console.info($date.format);

// 单独引入一个方法
var $format = require('@spore-ui/kit/packages/date/format');
1
2
3
4
5
6
7
8
9
10

# date/format

日期对象格式化输出

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

  • 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

var $format = require('@spore-ui/kit/packages/date/format');
console.info(
  $format(new Date(),{
    template : '{{YYYY}}年{{MM}}月{{DD}}日 周{{d}} {{hh}}时{{mm}}分{{ss}}秒'
  })
);
// 2015年09月09日 周三 14时19分42秒
1
2
3
4
5
6
7

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

# date/getUTCDate

获取一个时间对象，其年月周日时分秒等 UTC 值与北京时间保持一致。 解决不同服务器时区不一致场景下，可能会导致日期计算不一致的问题.

# Parameters

# Examples

var $getUTCDate = require('@spore-ui/kit/packages/date/getUTCDate');
var cnTime = 1540915200000; // (Wed Oct 31 2018 00:00:00 GMT+0800 (中国标准时间))
var utcDate = $getUTCDate(cnTime).getTime();
// 1540886400000 Tue Oct 30 2018 16:00:00 GMT+0800 (中国标准时间)
utcDate.getUTCdate(); // 31
utcDate.getHours(); // 8
utcDate.getUTCHours(); // 0
1
2
3
4
5
6
7

Returns Date (opens new window) UTC时间

# date/getLastStart

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

# Parameters

# Examples

var $getLastStart = require('@spore-ui/kit/packages/date/getLastStart');
var time = $getLastStart(
  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) 最近单位时间的起始时间对象

# date/getTimeSplit

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

# Parameters

# Examples

var $getTimeSplit = require('@spore-ui/kit/packages/date/getTimeSplit');
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) 时间整点对象

# spore-ui/kit/packages/dom

DOM 操作相关工具函数

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.dom.isNode);

// 单独引入 @spore-ui/kit/packages/dom
var $dom = require('@spore-ui/kit/packages/dom');
console.info($dom.isNode);

// 单独引入一个方法
var $isNode = require('@spore-ui/kit/packages/dom/isNode');
1
2
3
4
5
6
7
8
9
10

# dom/isNode

判断对象是否为dom元素

# Parameters

# Examples

var $isNode = require('@spore-ui/kit/packages/dom/isNode');
$isNode(document.body) // 1
1
2

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

# dom/offset

获取 DOM 元素相对于 document 的边距

# Parameters

# Examples

var $offset = require('@spore-ui/kit/packages/dom/offset');
var target = document.getElementById('target');
console.log($offset(target));
// {top: 69, left: 108}
1
2
3
4

Returns Object (opens new window) offset 对象

# dom/scrollLimit

显示滚动区域滑动滚动事件不再穿透到底部

  • ios 需要给滚动区域添加样式属性: -webkit-overflow-scrolling: touch;
  • 仅支持单方向滑动禁用

# Parameters

# Examples

var $scrollLimit = require('@spore-ui/kit/packages/dom/scrollLimit');
var scroller = document.getElementById('scroller');
var limiter = $scrollLimit(scroller, { direction: 'y' });
// 初始化时
limiter.attach();
// 卸载组件时
limiter.detach();
1
2
3
4
5
6
7

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

# spore-ui/kit/packages/env

环境检测与判断工具

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.env.touchable);

// 单独引入 @spore-ui/kit/packages/env
var $env = require('@spore-ui/kit/packages/env');
console.info($env.touchable);

// 单独引入一个方法
var $touchable = require('@spore-ui/kit/packages/env/touchable');
1
2
3
4
5
6
7
8
9
10

# env/browser

检测浏览器类型

支持的类型检测

  • qq
  • uc
  • baidu
  • miui
  • weixin
  • qzone
  • qqnews
  • qqhouse
  • qqbrowser
  • chrome

# Examples

var $browser = require('@spore-ui/kit/packages/env/browser');
console.info($browser().chrome);
console.info($browser.detect());
1
2
3

Returns Object (opens new window) UA 检查结果

# env/core

检测浏览器核心

支持的类型检测

  • trident
  • presto
  • webkit
  • gecko

# Examples

var $core = require('@spore-ui/kit/packages/env/core');
console.info($core().webkit);
console.info($core.detect());
1
2
3

Returns Object (opens new window) UA 检查结果

# env/device

检测设备类型

支持的类型检测

  • huawei
  • oppo
  • vivo
  • xiaomi
  • samsong
  • iphone

# Examples

var $device = require('@spore-ui/kit/packages/env/device');
console.info($device().huawei);
console.info($device.detect());
1
2
3

Returns Object (opens new window) UA 检查结果

# env/network

网络环境检测

# env/network.support

判断页面是否支持联网检测

# Examples

var $network = require('@spore-ui/kit/packages/env/network');
$network.support(); // true/false
1
2

Returns Boolean (opens new window) 是否支持联网检测

# env/network.onLine

判断页面是否联网

# Examples

var $network = require('@spore-ui/kit/packages/env/network');
$network.onLine(); // true/false
1
2

Returns Boolean (opens new window) 是否联网

# env/os

检测操作系统类型

支持的类型检测

  • ios
  • android

# Examples

var $os = require('@spore-ui/kit/packages/env/os');
console.info($os().ios);
console.info($os.detect());
1
2
3

Returns Object (opens new window) UA 检查结果

# env/touchable

判断浏览器是否支持触摸屏

# Examples

var $touchable = require('@spore-ui/kit/packages/env/touchable');
if ($touchable()) {
  // It is a touch device.
}
1
2
3
4

Returns Boolean (opens new window) 是否支持触摸屏

# env/uaMatch

UA字符串匹配列表

# Parameters

# Examples

var $uaMatch = require('@spore-ui/kit/packages/env/uaMatch');
var rs = $uaMatch({
  trident: 'trident',
  presto: /presto/,
  gecko: function(ua){
    return ua.indexOf('gecko') > -1 && ua.indexOf('khtml') === -1;
  }
}, 'xxx presto xxx');
console.info(rs.presto); // true
console.info(rs.trident); // undefined
1
2
3
4
5
6
7
8
9
10

# env/webp

判断浏览器是否支持webp

# Examples

var $webp = require('@spore-ui/kit/packages/env/webp');
console.info($webp()); // true/false
1
2

Returns Boolean (opens new window) 是否支持webp

# env/webp.support

判断浏览器是否支持webp

# Examples

var $webp = require('@spore-ui/kit/packages/env/webp');
console.info($webp.support()); // true/false
1
2

Returns Boolean (opens new window) 是否支持webp

# spore-ui/kit/packages/evt

处理事件与广播

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.evt.occurInside);

// 单独引入 @spore-ui/kit/packages/evt
var $evt = require('@spore-ui/kit/packages/evt');
console.info($evt.occurInside);

// 单独引入一个方法
var $occurInside = require('@spore-ui/kit/packages/evt/occurInside');
1
2
3
4
5
6
7
8
9
10

# evt/Events

A module that can be mixed in to any object in order to provide it with custom events. You may bind with on or remove with off callback functions to an event; trigger-ing an event fires all callbacks in succession.

  • 一个可以被混合到任何对象的模块，用于提供自定义事件。
  • 可以用 on, off 方法来绑定移除事件。
  • 用 trigger 来触发事件通知。

# Examples

var $events = require('@spore-ui/kit/packages/evt/events');
var evt = new $events();
evt.on('action', function() {
  console.info('action triggered');
});
evt.trigger('action');
1
2
3
4
5
6

# Events#on

Bind one or more space separated events, events, to a callback function. Passing "all" will bind the callback to all events fired.

  • 绑定一个事件回调函数，或者用多个空格分隔来绑定多个事件回调函数。
  • 传入参数 'all' 会在所有事件发生时被触发。

# Parameters

# Examples

var $events = require('@spore-ui/kit/packages/evt/events');
var evt = new $events();

// 绑定1个事件
evt.on('event-name', function () {});

// 绑定2个事件
evt.on('event1 event2', function () {});

// 绑定为所有事件
evt.on('all', function () {});
1
2
3
4
5
6
7
8
9
10
11

# Events#off

Remove one or many callbacks. If context is null, removes all callbacks with that function. If callback is null, removes all callbacks for the event. If events is null, removes all bound callbacks for all events.

  • 移除一个或者多个事件回调函数。
  • 如果不传递 callback 参数，会移除所有该时间名称的事件回调函数。
  • 如果不指定事件名称，移除所有自定义事件回调函数。

# Parameters

# Examples

var $events = require('@spore-ui/kit/packages/evt/events');
var evt = new $events();
var bound = {};
bound.test = function () {};

// 移除事件名为 event-name 的事件回调函数 bound.test
evt.off('event-name', bound.test);

// 移除事件名为 'event' 的所有事件回调函数
evt.off('event');

// 移除所有自定义事件
evt.off();
1
2
3
4
5
6
7
8
9
10
11
12
13

# Events#trigger

Trigger one or many events, firing all bound callbacks. Callbacks are passed the same arguments as trigger is, apart from the event name (unless you're listening on "all", which will cause your callback to receive the true name of the event as the first argument).

  • 派发一个或者多个事件，会触发对应事件名称绑定的所有事件函数。
  • 第一个参数是事件名称，剩下其他参数将作为事件回调的参数。

# Parameters

# Examples

var $events = require('@spore-ui/kit/packages/evt/events');
var evt = new $events();

// 触发事件名为 'event-name' 的事件
evt.trigger('event-name');

// 同时触发2个事件
evt.trigger('event1 event2');

// 触发事件同时传递参数
evt.on('event-x', function (a, b) {
  console.info(a, b); // 1, 2
});
evt.trigger('event-x', 1, 2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Events.mixTo

Mix Events to object instance or Class function.

  • 将自定事件对象，混合到一个类的实例。

# Parameters

# Examples

var $events = require('@spore-ui/kit/packages/evt/events');
// 给一个实例混合自定义事件方法
var obj = {};
$events.mixTo(obj);

// 生成一个实例
var o1 = Object.create(obj);

// 可以在这个对象上调用自定义事件的方法了
o1.on('event', function () {});
1
2
3
4
5
6
7
8
9
10

# evt/Listener

广播组件

  • 构造实例时，需要传入事件白名单列表。
  • 只有在白名单列表上的事件才可以被触发。
  • 事件添加，移除，激发的调用方法参考 Events。

# Examples

var $listener = require('@spore-ui/kit/packages/evt/listener');

// 白名单里只记录了 event1 事件
var channelGlobal = new $listener([
  'event1'
]);
channelGlobal.on('event1', function(){
  console.log('event1');
});
channelGlobal.on('event2', function(){
  // will not run
  console.log('event2');
});
channelGlobal.trigger('event1');
channelGlobal.trigger('event2');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Listener#define

在白名单上定义一个事件名称

# Parameters

# Listener#undefine

移除白名单上定义的事件名称

# Parameters

# Listener#on

广播组件绑定事件

# Parameters

# Listener#off

广播组件移除事件

# Parameters

# Listener#trigger

广播组件派发事件

# Parameters

# evt/occurInside

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

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

# Parameters

# Examples

var $occurInside = require('@spore-ui/kit/packages/evt/occurInside');
$('.layer').on('click', function(evt){
  if($occurInside(evt, $(this).find('close').get(0))){
    $(this).hide();
  }
});
1
2
3
4
5
6

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

# evt/tapStop

用遮罩的方式阻止 tap 事件穿透引发表单元素获取焦点。

  • 推荐用 fastclick 来解决触屏事件穿透问题。
  • 此组件用在 fastclick 未能解决问题时。或者不方便使用 fastclick 时。

# Parameters

# Examples

var $tapStop = require('@spore-ui/kit/packages/evt/tapStop');
$('.mask').on('tap', function(){
  $tapStop();
  $(this).hide();
});
1
2
3
4
5

# spore-ui/kit/packages/fn

函数包装，获取特殊执行方式

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.fn.delay);

// 单独引入 @spore-ui/kit/packages/fn
var $fn = require('@spore-ui/kit/packages/fn');
console.info($fn.delay);

// 单独引入一个方法
var $delay = require('@spore-ui/kit/packages/fn/delay');
1
2
3
4
5
6
7
8
9
10

# fn/delay

包装为延迟触发的函数

  • 用于处理密集事件，延迟时间内同时触发的函数调用。
  • 最终只在最后一次调用延迟后，执行一次。

# Parameters

# Examples

var $delay = require('@spore-ui/kit/packages/fn/delay');
var comp = {
  countWords : function(){
    console.info(this.length);
  }
};

 // 疯狂点击 input ，停下来 500 ms 后，触发函数调用
$('#input').keydown($delay(function(){
  this.length = $('#input').val().length;
  this.countWords();
}, 500, comp));
1
2
3
4
5
6
7
8
9
10
11
12

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

# fn/lock

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

  • 类似于技能冷却。

# Parameters

# Examples

var $lock = require('@spore-ui/kit/packages/fn/lock');
var request = function () {
  console.info('do request');
};
$('#input').keydown($lock(request, 500));
// 第一次按键，就会触发一次函数调用
// 之后连续按键，仅在 500ms 结束后再次按键，才会再次触发 request 函数调用
1
2
3
4
5
6
7

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

# fn/once

包装为仅触发一次的函数

  • 被包装的函数智能执行一次，之后不会再执行

# Parameters

# Examples

var $once = require('@spore-ui/kit/packages/fn/once');
var fn = $once(function () {
  console.info('output');
});
fn(); // 'output'
fn(); // will do nothing
1
2
3
4
5
6

Returns Function (opens new window) 该函数仅能触发执行一次

# fn/queue

包装为一个队列，按设置的时间间隔触发任务函数

  • 插入队列的所有函数都会执行，但每次执行之间都会有一个固定的时间间隔。

# Parameters

# Examples

var $queue = require('@spore-ui/kit/packages/fn/queue');
var t1 = Date.now();
var doSomthing = $queue(function (index) {
  console.info(index + ':' + (Date.now() - t1));
}, 200);
// 每隔200ms输出一个日志。
for(var i = 0; i < 10; i++){
  doSomthing(i);
}
1
2
3
4
5
6
7
8
9

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

# fn/prepare

包装为一个条件触发管理器

  • 调用管理器的 ready 函数来激活条件。
  • 之前插入管理器的函数按队列顺序执行。
  • 之后插入管理器的函数立即执行。
  • 作用机制类似 jQuery.ready, 可以设置任何条件。

# Examples

var $prepare = require('@spore-ui/kit/packages/fn/prepare');
// 生成一个管理器函数 timeReady
var timeReady = $prepare();

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

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

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

// 2100ms 后执行
setTimeout(function () {
  // 调用管理器函数 timeReady，插入要执行的任务函数
  timeReady(function () {
    // 立即执行，输出 3
    console.info(3);
  });
}, 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) 条件触发管理器函数，传入一个 function 作为任务执行函数参数

# prepare#ready

激活任务管理器的触发条件，在此之前插入管理器的任务按队列顺序执行，之后插入的任务函数立即执行。

# fn/reqular

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

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

# Parameters

# Examples

var $regular = require('@spore-ui/kit/packages/fn/regular');
var comp = {
  countWords : function(){
    console.info(this.length);
  }
};
// 疯狂按键，每隔 200ms 才有一次按键有效
$('#input').keydown($regular(function(){
  this.length = $('#input').val().length;
  this.countWords();
}, 200, comp));
1
2
3
4
5
6
7
8
9
10
11

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

# spore-ui/kit/packages/fx

动画交互相关工具

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.fx.smoothScrollTo);

// 单独引入 @spore-ui/kit/packages/fx
var $fx = require('@spore-ui/kit/packages/fx');
console.info($fx.smoothScrollTo);

// 单独引入一个方法
var $smoothScrollTo = require('@spore-ui/kit/packages/fx/smoothScrollTo');
1
2
3
4
5
6
7
8
9
10

# fx/easing

简单的 Easing Functions

  • 值域变化范围，从 [0, 1] 到 [0, 1]
  • 即输入值范围从 0 到 1
  • 输出也为从 0 到 1
  • 适合进行百分比动画运算

动画函数

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint

# Examples

var $easing = require('@spore-ui/kit/packages/fx/easing');
$easing.linear(0.5); // 0.5
$easing.easeInQuad(0.5); // 0.25
$easing.easeInCubic(0.5); // 0.125
1
2
3
4

# fx/flashAction

封装闪烁动作

# Parameters

# Examples

var $flashAction = require('@spore-ui/kit/packages/fx/flashAction');
// 文字闪烁，奇数次呈现为红色，偶数次成纤维蓝色，动画结束呈现为黑色
var text = $('#target span.txt');
$flashAction({
  actionOdd : function (){
    text.css('color', '#f00');
  },
  actionEven : function (){
    text.css('color', '#00f');
  },
  recover : function (){
    text.css('color', '#000');
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# fx/Fx

动画类 - 用于处理不适合使用 transition 的动画场景

可绑定的事件

  • start 动画开始时触发
  • complete 动画已完成
  • stop 动画尚未完成就被中断
  • cancel 动画被取消

# Parameters

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx({
  duration : 1000
});
fx.set = function (now) {
  node.style.marginLeft = now + 'px';
};
fx.on('complete', function(){
  console.info('animation end');
});
fx.start(0, 600); // 1秒内数字从0增加到600
1
2
3
4
5
6
7
8
9
10
11

# Fx#setOptions

设置实例的选项

# Parameters

# Fx#getTransition

设置动画的执行方式，配置缓动效果

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.getTransition = function () {
  return function (p) {
    return -(Math.cos(Math.PI * p) - 1) / 2;
  };
};
1
2
3
4
5
6
7

# Fx#set

设置当前动画帧的过渡数值

# Parameters

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.set = function (now) {
  node.style.marginLeft = now + 'px';
};
1
2
3
4
5

# Fx#start

开始执行动画

# Parameters

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start(); // 开始动画
1
2
3

# Fx#stop

停止动画

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start();
fx.stop(); // 立刻停止动画
1
2
3
4

# Fx#cancel

取消动画

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start();
fx.cancel(); // 立刻取消动画
1
2
3
4

# Fx#pause

暂停动画

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start();
fx.pause(); // 立刻暂停动画
1
2
3
4

# Fx#resume

继续执行动画

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start();
fx.pause();
fx.resume(); // 立刻继续动画
1
2
3
4
5

# Fx#isRunning

判断动画是否正在运行

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var fx = new $fx();
fx.start();
fx.pause();
fx.isRunning(); // false
1
2
3
4
5

Returns Boolean (opens new window) 动画是否正在运行

# fx/smoothScrollTo

平滑滚动到某个元素，只进行垂直方向的滚动

  • requires jQuery/Zepto

# Parameters

# Examples

var $smoothScrollTo = require('@spore-ui/kit/packages/fx/smoothScrollTo');
// 滚动到页面顶端
$smoothScrollTo(document.body);
1
2
3

# fx/sticky

IOS sticky 效果 polyfill

  • requires jQuery/Zepto

# Parameters

# Examples

var $sticky = require('@spore-ui/kit/packages/fx/sticky');
$sticky($('h1').get(0));
1
2

# fx/timer

用 requestAnimationFrame 包装定时器

  • 如果浏览器不支持 requestAnimationFrame API，则使用 BOM 原本的定时器API

# Examples

var $timer = require('@spore-ui/kit/packages/fx/timer');
$timer.setTimeout(function () {
  console.info('output this log after 1000ms');
}, 1000);
1
2
3
4

# timer#setInterval

设置重复调用定时器

# Parameters

Returns Object (opens new window) 定时器对象，可传入 clearInterval 方法来终止这个定时器

# timer#clearInterval

清除重复调用定时器

# Parameters

# timer#setTimeout

设置延时调用定时器

# Parameters

Returns Object (opens new window) 定时器对象，可传入 clearTimeout 方法来终止这个定时器

# timer#clearTimeout

清除延时调用定时器

# Parameters

# fx/transitions

动画运行方式库

  • Pow
  • Expo
  • Circ
  • Sine
  • Back
  • Bounce
  • Elastic
  • Quad
  • Cubic
  • Quart
  • Quint

# Examples

var $fx = require('@spore-ui/kit/packages/fx/fx');
var $transitions = require('@spore-ui/kit/packages/fx/transitions');
new $fx({
  transition : $transitions.Sine.easeInOut
});
new $fx({
  transition : 'Sine:In'
});
new $fx({
  transition : 'Sine:In:Out'
});
1
2
3
4
5
6
7
8
9
10
11

# spore-ui/kit/packages/io

处理网络交互

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.io.getScript);

// 单独引入 @spore-ui/kit/packages/io
var $io = require('@spore-ui/kit/packages/io');
console.info($io.getScript);

// 单独引入一个方法
var $getScript = require('@spore-ui/kit/packages/io/getScript');
1
2
3
4
5
6
7
8
9
10

# io/ajax

ajax 请求方法，使用方式与 jQuery, Zepto 类似，对 jQuery, Zepto 无依赖

# Examples

var $ajax = require('@spore-ui/kit/packages/io/ajax');
document.domain = 'qq.com';
$ajax({
  url: 'http://a.qq.com/form',
  data: [{
    n1: 'v1',
    n2: 'v2'
  }],
  success: function (rs) {
    console.info(rs);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12

# io/getScript

加载 script 文件

# Parameters

# Examples

var $getScript = require('@spore-ui/kit/packages/io/getScript');
$getScript({
  src: 'https://code.jquery.com/jquery-3.3.1.min.js',
  onLoad: function () {
    console.info(window.jQuery);
  }
});
1
2
3
4
5
6
7

# io/iframePost

封装 iframe post 模式

  • requires jQuery/Zepto

# Parameters

# Examples

var $iframePost = require('@spore-ui/kit/packages/io/iframePost');
document.domain = 'qq.com';
iframePost({
  url: 'http://a.qq.com/form',
  data: [{
    n1: 'v1',
    n2: 'v2'
  }],
  success: function (rs) {
    console.info(rs);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12

# io/loadSdk

sdk 加载统一封装

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

# Parameters

# Examples

var $loadSdk = require('@spore-ui/kit/packages/io/loadSdk');
$loadSdk({
  name: 'TencentCaptcha',
  url: 'https://ssl.captcha.qq.com/TCaptcha.js'
}).then(TencentCaptcha => {})
1
2
3
4
5

# spore-ui/kit/packages/location

处理地址字符串

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.location.getQuery);

// 单独引入 @spore-ui/kit/packages/location
var $location = require('@spore-ui/kit/packages/location');
console.info($location.getQuery);

// 单独引入一个方法
var $getQuery = require('@spore-ui/kit/packages/location/getQuery');
1
2
3
4
5
6
7
8
9
10

# location/getQuery

解析 location.search 为一个JSON对象

  • 或者获取其中某个参数

# Parameters

# Examples

var $getQuery = require('@spore-ui/kit/packages/location/getQuery');
var 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对象 | 参数值

# location/setQuery

将参数设置到 location.search 上

# Parameters

# Examples

var $setQuery = require('@spore-ui/kit/packages/location/setQuery');
$setQuery('localhost'); // 'localhost'
$setQuery('localhost', {a: 1}); // 'localhost?a=1'
$setQuery('', {a: 1}); // '?a=1'
$setQuery('localhost?a=1', {a: 2}); // 'localhost?a=2'
$setQuery('localhost?a=1', {a: ''}); // 'localhost?a='
$setQuery('localhost?a=1', {a: null}); // 'localhost'
$setQuery('localhost?a=1', {b: 2}); // 'localhost?a=1&b=2'
$setQuery('localhost?a=1&b=1', {a: 2, b: 3}); // 'localhost?a=2&b=3'
$setQuery('localhost#a=1', {a: 2, b: 3}); // 'localhost?a=2&b=3#a=1'
$setQuery('#a=1', {a: 2, b: 3}); // '?a=2&b=3#a=1'
1
2
3
4
5
6
7
8
9
10
11

Returns String (opens new window) 拼接好参数的URL字符串

# location/parse

解析URL为一个对象

# Parameters

# Examples

var $parse = require('@spore-ui/kit/packages/location/parse');
$parse('http://localhost/profile?beijing=huanyingni#123');
// {
//   slashes: true,
//   protocol: 'http:',
//   hash: '#123',
//   query: '?beijing=huanyingni',
//   pathname: '/profile',
//   auth: 'username:password',
//   host: 'localhost:8080',
//   port: '8080',
//   hostname: 'localhost',
//   password: 'password',
//   username: 'username',
//   origin: 'http://localhost:8080',
//   href: 'http://username:password@localhost:8080/profile?beijing=huanyingni#123'
// }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Returns Object (opens new window) URL对象

# spore-ui/kit/packages/mvc

兼容 IE8 的 MVC 简单实现

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.mvc.Model);

// 单独引入 @spore-ui/kit/packages/mvc
var $mvc = require('@spore-ui/kit/packages/mvc');
console.info($mvc.Model);

// 单独引入一个组件
var $model = require('@spore-ui/kit/packages/mvc/model');
1
2
3
4
5
6
7
8
9
10

# mvc/klass

class 的 ES5 实现

  • 为代码通过 eslint 检查做了些修改

# mvc/delegate

事件对象绑定，将events中包含的键值对映射为代理的事件。

  • 事件键值对格式可以为：
  • {'selector event':'method'}
  • {'event':'method'}
  • {'selector event':'method1 method2'}
  • {'event':'method1 method2'}

# Parameters

# mvc/proxy

函数代理，确保函数在当前类创建的实例上下文中执行。

  • 这些用于绑定事件的代理函数都放在属性 instance.bound 上。
  • 功能类似 Function.prototype.bind 。
  • 可以传递额外参数作为函数执行的默认参数，追加在实际参数之后。

# Parameters

# mvc/Base

基础工厂元件类

# Parameters

# Examples

var $base = require('@spore-ui/kit/packages/mvc/base');

var ChildClass = $base.extend({
  defaults : {
    node : null
  },
  build : function() {
    this.node = $(this.conf.node);
  },
  setEvents : function(action) {
    var proxy = this.proxy();
    this.node[action]('click', proxy('onclick'));
  },
  onclick : function() {
    console.info('clicked');
    this.trigger('click');
  }
});

var obj = new ChildClass({
  node : document.body
});

obj.on('click', function() {
  console.info('obj is clicked');
});
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

# Base#defaults

类的默认选项对象，绑定在原型上，不要在实例中直接修改这个对象

Type: Object (opens new window)

# Base#conf

类的实际选项，setOptions 方法会修改这个对象

Type: Object (opens new window)

# Base#bound

存放代理函数的集合

Type: Object (opens new window)

# Base#setOptions

混合传入的选项与默认选项，混合完成的选项对象可通过 this.conf 属性访问

# Parameters

# Base#build

元件初始化接口函数，实例化元件时会自动首先调用

# Base#setEvents

元件事件绑定接口函数，实例化元件时会自动在 build 之后调用

# Parameters

# Base#proxy

函数代理，确保函数在当前类创建的实例上下文中执行。 这些用于绑定事件的代理函数都放在属性 this.bound 上。

# Parameters

# Base#destroy

移除所有绑定事件，清除用于绑定事件的代理函数

# mvc/Model

模型类: 基础工厂元件类，用于做数据包装，提供可观察的数据对象

# Parameters

# Examples

var $model = require('@spore-ui/kit/packages/mvc/model');

var m1 = new $model({
  a : 1
});
m1.on('change:a', function(prevA){
  console.info(prevA); // 1
});
m1.on('change', function(){
  console.info('model changed');
});
m1.set('a', 2);

var MyModel = Model.extend({
  defaults : {
    a : 2,
    b : 2
  },
  events : {
    'change:a' : 'updateB'
  },
  updateB : function(){
    this.set('b', this.get('a') + 1);
  }
});

var m2 = new MyModel();
console.info(m2.get('b')); // 2

m2.set('a', 3);
console.info(m2.get('b')); // 4

m2.set('b', 5);
console.info(m2.get('b')); // 5
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
30
31
32
33
34

# Model#defaults

模型的默认数据

  • 绑定在原型上，不要在实例中直接修改这个对象。

Type: Object (opens new window)

# Model#events

模型的事件绑定列表。

  • 绑定在原型上，不要在实例中直接修改这个对象。
  • 尽量在 events 对象定义属性关联事件。
  • 事件应当仅用于自身属性的关联运算。
  • 事件绑定格式可以为：
  • {'event':'method'}
  • {'event':'method1 method2'}

Type: Object (opens new window)

# Model#processors

模型数据的预处理器。

  • 绑定在原型上，不要在实例中直接修改这个对象。

Type: Object (opens new window)

# Examples

processors : {
  name : {
    set : function(value){
      return value;
    },
    get : function(value){
      return value;
    }
  }
}
1
2
3
4
5
6
7
8
9
10

# Model#setOptions

深度混合传入的选项与默认选项，然后混合到数据对象中

# Parameters

# Model#delegate

绑定 events 对象列举的事件。在初始化时自动执行了 this.delegate('on')。

# Parameters

# Model#process

数据预处理

# Parameters

# Model#set

设置模型数据

# Parameters

# Model#get

获取模型对应属性的值的拷贝

  • 如果不传参数，则直接获取整个模型数据。
  • 如果值是一个对象，则该对象会被深拷贝。

# Parameters

Returns any 属性名称对应的值

# Model#keys

获取模型上设置的所有键名

Returns Array (opens new window) 属性名称列表

# Model#remove

删除模型上的一个键

# Parameters

# Model#clear

清除模型中所有数据

# Model#destroy

销毁模型，不会触发任何change事件。

  • 模型销毁后，无法再设置任何数据。

# mvc/View

视图类: 基础工厂元件类，用于对视图组件的包装

# Parameters

# Examples

var $view = require('@spore-ui/kit/packages/mvc/view');

var TPL = {
  box : [
    '<div>',
      '<button role="button"></button>',
    '</div>'
  ]
};

var TestView = $view.extend({
  defaults : {
    template : TPL.box
  },
  events : {
    'button click' : 'method1'
  },
  build : function(){
    this.role('root').appendTo(document.body);
  },
  method1 : function(evt){
    console.info(1);
  },
  method2 : function(evt){
    console.info(2);
  }
});

var obj1 = new TestView();
var obj2 = new TestView({
  events : {
    'button click' : 'method2'
  }
});

obj1.role('button').trigger('click'); // 1
obj2.role('button').trigger('click'); // 2
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
30
31
32
33
34
35
36
37

# View#defaults

类的默认选项对象，绑定在原型上，不要在实例中直接修改这个对象。

Type: Object (opens new window)

# View#events

视图的代理事件绑定列表，绑定在原型上，不要在实例中直接修改这个对象。

  • 事件绑定格式可以为：
  • {'selector event':'method'}
  • {'selector event':'method1 method2'}

Type: Object (opens new window)

# View#setOptions

深度混合传入的选项与默认选项，混合完成的选项对象可通过 this.conf 属性访问

# Parameters

# View#delegate

绑定 events 对象列举的事件。

  • 在初始化时自动执行了 this.delegate('on')。

# Parameters

# View#role

获取 / 设置角色对象指定的 jQuery 对象。

  • 注意：获取到角色元素后，该 jQuery 对象会缓存在视图对象中

# Parameters

Returns Object (opens new window) 角色名对应的 jQuery 对象。

# View#resetRoles

清除视图缓存的角色对象

# View#destroy

销毁视图，释放内存

# spore-ui/kit/packages/num

处理数字，数据转换

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.num.limit);

// 单独引入 @spore-ui/kit/packages/num
var $num = require('@spore-ui/kit/packages/num');
console.info($num.limit);

// 单独引入一个方法
var $limit = require('@spore-ui/kit/packages/num/limit');
1
2
3
4
5
6
7
8
9
10

# num/comma

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

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

# Parameters

# Examples

var $comma = require('@spore-ui/kit/packages/num/comma');
$comma(1234567); //'1,234,567'
1
2

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

# num/fixTo

修正补位

# Parameters

# Examples

var $fixTo = require('@spore-ui/kit/packages/num/fixTo');
$fixTo(0, 2); //return '00'
1
2

Returns String (opens new window) 经过补位的字符串

# num/limit

限制数字在一个范围内

# Parameters

# Examples

var $limit = require('@spore-ui/kit/packages/num/limit');
$limit(1, 5, 10); // 5
$limit(6, 5, 10); // 6
$limit(11, 5, 10); // 10
1
2
3
4

Returns Number (opens new window) 经过限制的数值

# num/numerical

将数据类型转为整数数字，转换失败则返回一个默认值

# Parameters

# Examples

var $numerical = require('@spore-ui/kit/packages/num/numerical');
$numerical('10x'); // 10
$numerical('x10'); // 0
1
2
3

Returns Number (opens new window) 转换而得的整数

# spore-ui/kit/packages/obj

对象处理与判断

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.obj.type);

// 单独引入 @spore-ui/kit/packages/obj
var $obj = require('@spore-ui/kit/packages/obj');
console.info($obj.type);

// 单独引入一个方法
var $type = require('@spore-ui/kit/packages/obj/type');
1
2
3
4
5
6
7
8
9
10

# obj/assign

扩展并覆盖对象

# Parameters

# Examples

var $assign = require('@spore-ui/kit/packages/obj/assign');
var obj = {a: 1, b: 2};
console.info($assign(obj, {b: 3, c: 4})); // {a: 1, b: 3, c: 4}
console.info($assign({}, obj, {b: 3, c: 4})); // {a: 1, b: 3, c: 4}
1
2
3
4

Returns Object (opens new window) 扩展后的源对象

# obj/clone

简易克隆对象，会丢失函数等不能被 JSON 序列化的内容

# Parameters

# Examples

var $clone = require('@spore-ui/kit/packages/obj/clone');
var obj = {a: 1, b: 2};
console.info($clone(obj)); //{a: 1, b: 2}
1
2
3

Returns Object (opens new window) 克隆后的对象

# obj/cloneDeep

深度克隆对象，会保留函数引用

# Parameters

# Examples

var $cloneDeep = require('@spore-ui/kit/packages/obj/cloneDeep');
var obj = {a: 1, b: 2, c: function () {}};
console.info($cloneDeep(obj)); //{a: 1, b: 2, c: function () {}}
1
2
3

Returns Object (opens new window) 克隆后的对象

# obj/merge

深度混合源对象，会保留函数引用

# Parameters

# Examples

var $merge = require('@spore-ui/kit/packages/obj/merge');
var origin = {a:{b:{c:1}}};
var target = {a:{b:{d:2}}};
console.info($merge(origin, target));
// {a:{b:{c:1,d:2}}};
1
2
3
4
5

Returns Object (opens new window) 混合之后的对象

# obj/cover

覆盖对象，不添加新的键

# Parameters

# Examples

var $cover = require('@spore-ui/kit/packages/obj/cover');
var obj = {a: 1, b: 2};
console.info($cover(obj,{b: 3, c: 4})); //{a: 1, b: 3}
1
2
3

Returns Object (opens new window) 覆盖后的源对象

# obj/find

查找对象路径上的值(简易版)

# Parameters

# Examples

var $find = require('@spore-ui/kit/packages/obj/find');
var obj = {a:{b:{c:1}}};
console.info($find(obj,'a.b.c')); // 1
console.info($find(obj,'a.c')); // undefined
1
2
3
4

Returns any 对象路径上的值

# obj/get

从对象路径取值(简易版)

# Parameters

# Examples

var $get = require('@spore-ui/kit/packages/obj/get');
var obj = {a: {b: {c: 1}}};
console.info($get(obj, 'a.b.c'); // 1
console.info($get(obj, 'e'); // undefined
console.info($get(obj, 'e', 3); // 3
var arr = [1, {a: [2, 3]}];
console.info($get(arr, '[1].a[1]'); // 3
1
2
3
4
5
6
7

Returns Any 取得的值

# obj/set

向对象路径设置值(简易版)

# Parameters

# Examples

var $set = require('@spore-ui/kit/packages/obj/set');
var obj = {a: {b: {c: 1}}};
$set(obj, 'a.b.c', 2);
console.info(obj.a.b.c) // 2
1
2
3
4

Returns undefined (opens new window)

# obj/type

获取数据类型

# Parameters

  • item any 任何类型数据

# Examples

var $type = require('@spore-ui/kit/packages/obj/type');
$type({}); // 'object'
$type(1); // 'number'
$type(''); // 'string'
$type(function(){}); // 'function'
$type(); // 'undefined'
$type(null); // 'null'
$type(new Date()); // 'date'
$type(/a/); // 'regexp'
$type(Symbol('a')); // 'symbol'
$type(window) // 'window'
$type(document) // 'htmldocument'
$type(document.body) // 'htmlbodyelement'
$type(document.head) // 'htmlheadelement'
$type(document.getElementsByTagName('div')) // 'htmlcollection'
$type(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) 对象类型

# spore-ui/kit/packages/str

字符串处理与判断

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.str.substitute);

// 单独引入 @spore-ui/kit/packages/str
var $str = require('@spore-ui/kit/packages/str');
console.info($str.substitute);

// 单独引入一个方法
var $substitute = require('@spore-ui/kit/packages/str/substitute');
1
2
3
4
5
6
7
8
9
10

# str/bLength

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

# Parameters

# Examples

var $bLength = require('@spore-ui/kit/packages/str/bLength');
$bLength('中文cc'); // 6
1
2

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

# str/dbcToSbc

全角字符转半角字符

# Parameters

# Examples

var $dbcToSbc = require('@spore-ui/kit/packages/str/dbcToSbc');
$dbcToSbc('ＳＡＡＳＤＦＳＡＤＦ'); // 'SAASDFSADF'
1
2

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

# str/decodeHTML

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

# Parameters

# Examples

var $decodeHTML = require('@spore-ui/kit/packages/str/decodeHTML');
$decodeHTML('&amp;&lt;&gt;&quot;&#39;&#32;'); // '&<>"\' '
1
2

Returns String (opens new window) HTML字符串

# str/encodeHTML

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

# Parameters

# Examples

var $encodeHTML = require('@spore-ui/kit/packages/str/encodeHTML');
$encodeHTML(`&<>"\' `); // '&amp;&lt;&gt;&quot;&#39;&#32;'
1
2

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

# str/getRnd36

获取36进制随机字符串

# Parameters

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

# Examples

var $getRnd36 = require('@spore-ui/kit/packages/str/getRnd36');
$getRnd36(0.5810766832590446); // 'kx2pozz9rgf'
1
2

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

# str/getTime36

获取36进制日期字符串

# Parameters

  • date Date (opens new window)? 符合规范的日期字符串或者数字，不传参数则使用当前客户端时间

# Examples

var $getTime36 = require('@spore-ui/kit/packages/str/getTime36');
$getTime36('2020'); // 'k4ujaio0'
1
2

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

# str/getUniqueKey

生成一个不与之前重复的随机字符串

# Examples

var $getUniqueKey = require('@spore-ui/kit/packages/str/getUniqueKey');
$getUniqueKey(); // '166aae1fa9f'
1
2

Returns String (opens new window) 随机字符串

# str/hyphenate

将驼峰格式变为连字符格式

# Parameters

# Examples

var $hyphenate = require('@spore-ui/kit/packages/str/hyphenate');
$hyphenate('libKitStrHyphenate'); // 'lib-kit-str-hyphenate'
1
2

Returns String (opens new window) 连字符格式的字符串

# str/ipToHex

十进制IP地址转十六进制

# Parameters

# Examples

var $ipToHex = require('@spore-ui/kit/packages/str/ipToHex');
$ipToHex('255.255.255.255'); //return 'ffffffff'
1
2

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

# str/leftB

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

# Parameters

# Examples

var $leftB = require('@spore-ui/kit/packages/str/leftB');
//向汉编致敬
$leftB('世界真和谐', 6); // '世界真'
1
2
3

Returns String (opens new window) str

# str/sizeOfUTF8String

取字符串 utf8 编码长度，from 王集鹄

# Parameters

# Examples

var $sizeOfUTF8String = require('@spore-ui/kit/packages/str/sizeOfUTF8String');
$sizeOfUTF8String('中文cc'); //return 8
1
2

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

# str/substitute

简单模板函数

# Parameters

# Examples

var $substitute = require('@spore-ui/kit/packages/str/substitute');
$substitute('{{city}}欢迎您', {city:'北京'}); // '北京欢迎您'
1
2

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

# str/keyPathSplit

解析对象路径为一个数组

# Parameters

# Examples

var $keyPathSplit = require('@spore-ui/kit/packages/str/keyPathSplit');
console.info($keyPathSplit('[1].a[1][2]b.c'); // ['1', 'a', '1', '2', 'b', 'c']
1
2

Returns Array (opens new window) 对象路径数组

# spore-ui/kit/packages/time

时间处理与交互工具

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.time.parseUnit);

// 单独引入 @spore-ui/kit/packages/time
var $time = require('@spore-ui/kit/packages/time');
console.info($time.parseUnit);

// 单独引入一个方法
var $parseUnit = require('@spore-ui/kit/packages/time/parseUnit');
1
2
3
4
5
6
7
8
9
10

# time/countDown

提供倒计时器统一封装

# Parameters

# Examples

var $countDown = require('@spore-ui/kit/packages/time/countDown');
var target = Date.now() + 5000;
var cd1 = $countDown({
  target : target,
  onChange : function(delta){
    console.info('cd1 change', delta);
  },
  onStop : function(delta){
    console.info('cd1 stop', delta);
  }
});
setTimeout(function(){
  //trigger stop
  cd1.stop();
}, 2000);
var cd2 = countDown({
  target : target,
  interval : 2000,
  onChange : function(delta){
    console.info('cd2 change', delta);
  },
  onStop : function(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

Returns Object (opens new window) 倒计时对象实例

# countDown#setTarget

重设目标时间

# Examples

var cd = countDown();
var localTime = '2019/01/01';
cd.setTarget(serverTime);
1
2
3

# countDown#correct

纠正时间差

# Examples

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

# countDown#stop

停止倒计时

# Examples

var cd = countDown();
cd.stop();
1
2

# countDown#destroy

销毁倒计时

# Examples

var cd = countDown();
cd.destroy();
1
2

# time/parseUnit

时间数字拆分为天时分秒

# Parameters

# Examples

var $parseUnit = require('@spore-ui/kit/packages/time/parseUnit');
console.info( $parseUnit(12345 * 67890) );
// Object {day: 9, hour: 16, minute: 48, second: 22, ms: 50}
console.info( $parseUnit(12345 * 67890, {maxUnit : 'hour'}) );
// Object {hour: 232, minute: 48, second: 22, ms: 50}
1
2
3
4
5

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

# spore-ui/kit/packages/util

其他工具函数

# Examples

// 统一引入 @spore-ui/kit
var $kit = require('@spore-ui/kit');
console.info($kit.util.hslToRgb);

// 单独引入 @spore-ui/kit/packages/util
var $util = require('@spore-ui/kit/packages/util');
console.info($util.hslToRgb);

// 单独引入一个方法
var $hslToRgb = require('@spore-ui/kit/packages/util/hslToRgb');
1
2
3
4
5
6
7
8
9
10

# util/abToHex

ArrayBuffer转16进制字符串

# Parameters

# Examples

var $abToHex = require('@spore-ui/kit/packages/util/abToHex');
var ab = new ArrayBuffer(2);
var 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进制字符串

# util/ascToHex

ASCII字符串转16进制字符串

# Parameters

# Examples

var $ascToHex = require('@spore-ui/kit/packages/util/ascToHex');
$ascToHex(); // => ''
$ascToHex('*+'); // => '2a2b'
1
2
3

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

# util/compareVersion

比较版本号

# Parameters

# Examples

var $compareVersion = require('@spore-ui/kit/packages/util/compareVersion');
// delta 取值可以理解为 前面的值 减去 后面的值
var info1 = $compareVersion('1.0.1', '1.2.2');
// {level: 1, delta: -2}
var info2 = $compareVersion('1.3.1', '1.2.2');
// {level: 1, delta: 1}
1
2
3
4
5
6

Returns Object (opens new window) info 版本号比较信息

Returns Object (opens new window) info.level 版本号差异所在级别

Returns Object (opens new window) info.delta 版本号差异数值

# util/hexToAb

16进制字符串转ArrayBuffer

# Parameters

# Examples

var $hexToAb = require('@spore-ui/kit/packages/util/hexToAb');
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 对象

# util/hexToAsc

16进制字符串转ASCII字符串

# Parameters

# Examples

var $hexToAsc = require('@spore-ui/kit/packages/util/hexToAsc');
$hexToAsc(); // => ''
$hexToAsc('2a2b'); // => '*+'
1
2
3

Returns String (opens new window) ASCII字符串

# util/hslToRgb

HSL颜色值转换为RGB

# Parameters

# Examples

var $hslToRgb = require('@spore-ui/kit/packages/util/hslToRgb');
$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色值数值

# util/job

任务分时执行

  • 一方面避免单次reflow流程执行太多js任务导致浏览器卡死
  • 另一方面单个任务的报错不会影响后续任务的执行

# Parameters

# Examples

var $job = require('@spore-ui/kit/packages/util/job');
$job(function() {
  //task1 start
});
$job(function() {
  //task2 start
});
1
2
3
4
5
6
7

Returns Object (opens new window) 任务队列对象

# util/measureDistance

测量地理坐标的距离

# Parameters

# Examples

var $measureDistance = require('@spore-ui/kit/packages/util/measureDistance');
var distance = $measureDistance(0, 0, 100, 100);
// 9826.40065109978
1
2
3

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

# util/parseRGB

rgb字符串解析

# Parameters

# Examples

var $parseRGB = require('@spore-ui/kit/packages/util/parseRGB');
$parseRGB('#ffffff'); // => [255,255,255]
$parseRGB('#fff'); // => [255,255,255]
1
2
3

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

# util/rgbToHsl

RGB 颜色值转换为 HSL.

# Parameters

# Examples

var $rgbToHsl = require('@spore-ui/kit/packages/util/rgbToHsl');
$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各值数组

←