uView JS工具库

节流防抖

节流

throttle(func, wait = 500, immediate = true)
规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。
func 触发回调执行的函数
wait 时间间隔，单位ms
immediate 在开始还是结束处触发，比如设置wait为1000ms，如果在一秒内进行了5次操作，只触发一次，如果immediate为true，那么就会在第一次操作触发回调，如果为false，就会在第5次操作触发回调。

<template><view><view class="throttle" @tap="$u.throttle(btnClick1, 500)">throttle1</view><view class="throttle" @tap="btnClick2">throttle2</view></view>
</template><script>
export default {data() {return {};},methods: {btnClick1() {console.log('btnClick1');},btnClick2() {this.$u.throttle(this.btnClick, 500);},btnClick() {console.log('btnClick');}}
};
</script>
<style scoped lang="less"></style>

防抖

debounce(func, wait = 500, immediate = false)
在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
func 触发回调执行的函数
wait 时间间隔，单位ms
immediate 在开始还是结束处触发，如非特殊情况，一般默认为false即可

<template><view><view class="throttle" @tap="$u.debounce(btnClick1, 500)">throttle1</view><view class="throttle" @tap="btnClick2">throttle2</view></view>
</template><script>
export default {data() {return {};},methods: {btnClick1() {console.log('btnClick1');},btnClick2() {this.$u.debounce(this.btnClick, 500);},btnClick() {console.log('btnClick');}}
};
</script>
<style scoped lang="less"></style>

deepClone 对象深度克隆

场景：

我们平时可能会遇到需要通过console.log打印一个对象，至执行打印的时刻，此对象为空，后面的逻辑中对此对象进行了修改赋值，但是我们在控制台直接看到的打印结果却是修改后的值，这让人匪夷所思，虽然我们可以通过console.log(JSON.parse(JSON.stringify(object)))的形式处理，但是需要写这长长的一串，难免让人心生抵触。

当我们将一个对象(变量A)赋值给另一个变量(变量B)时，修改变量B，因为对象引用的特性，导致A也同时被修改，所以有时候我们需要将A克隆给B，这样修改B的时候，就不会导致A也被修改。

deepClone(object = {})
object 需要被克隆的对象

        let a = {name: 'mary'};// 直接赋值，为对象引用，即修改b等于修改a，因为a和b为同一个值let b = a;b.name = 'juli';console.log(b); // 结果为 {name: 'juli'}console.log(a); // 结果为 {name: 'juli'}// 深度克隆let b = this.$u.deepClone(a);b.name = 'juli';console.log(b); // 结果为 {name: 'juli'}console.log(a); // 结果为 {name: 'mary'}

deepMerge 对象深度合并

在ES6中，我们可以很方便的使用Object.assign进行对象合并，但这只是浅层的合并，如果对象的属性为数组或者对象的时候，会导致属性内部的值丢失。

注意：此处合并不同于Object.assign，因为Object.assign(a, b)会修改a的值为最终的结果(这往往不是我们所期望的)，但是deepMerge(a, b)并不会修改a的值。

deepMerge(target = {}, source = {})
target 目标对象
source 源对象
Object.assign浅合并示例：

let a = {info: {name: 'mary'}};let b = {info: {age: '22'}};// 使用Object.assign进行合并，注意此时a被修改了let c = Object.assign(a, b);console.log(a, b, c);/* a: {info: {age: '22';}}b: {info: {age: '22';}}c: {info: {age: '22';}} */let c = this.$u.deepMerge(a, b);console.log(c);/* a: {info: {name: 'mary';}}b: {info: {age: '22';}}c:{info: {name: 'mary',age: '22'}} */

时间格式化

time时间格式

格式化时间
timeFormat | date(timestamp, format = “yyyy-mm-dd”)
注意：1.7.9之前的版本只能传入秒或毫秒时间戳，date和timeFormat为同功能不同名函数，无论用哪个方法名，都是一样的。

该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。

time 任何合法的时间格式、秒或毫秒的时间戳
format 时间格式，可选。默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合

console.log(this.$u.timeFormat(1581170184));
console.log(this.$u.timeFormat(1581170184, 'yyyy年mm月dd日'));

过滤器式写法
uView同时把timeFormat()注册到了全局过滤器中，方便您在模板中使用：

 <!-- 因为默认参数为yyyy-mm-dd，所以这里可以不用写时间格式 --><view> {{ 1581170184 | date }}</view> // 2020-02-08<view> {{ 1581170184 | timeFormat('yyyy-mm') }}</view> //2020-02

多久以前

timeFrom(time, format = String | false)
注意 1.7.9之前的版本只能传入秒或毫秒时间戳

该函数必须传入第一个参数，格式为任何合法的时间格式、秒或毫秒的时间戳，第二个参数是可选的，返回的值类似刚刚，25分钟前，3小时前，7天前的结果。如果第二个参数是时间的格式，当前和传入时间戳相差大于一个月时，返回格式化好的时间；如果第二个参数为false，则不会返回格式化好的时间，而是诸如"xxx年前"的结果。

timestamp 时间戳
format <String / false> 时间格式，默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合。如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为false，返回均为"多久之前"的结果。

//如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为false，返回均为"多久之前"的结果。
console.log(this.$u.timeFrom(1581170184, 'yyyy-mm')); //2020-02
console.log(this.$u.timeFrom(1581170184)); //2020-02-08
console.log(this.$u.timeFrom(1637206559588)); //2小时前

过滤式写法
uView同时把timeFrom()注册到了全局过滤器中，方便您在模板中使用：

<view> {{ 1581170184 | timeFrom }}</view> // 2020-02-08
<view> {{ 1637206559588 | timeFrom('yyyy-mm') }}</view> //2小时前

route 路由跳转

route(Object)
此为一个路由跳转方法，内部是对uni多个路由跳转api的封装，更方便使用
Object参数说明：

参数名	类型	默认值	是否必填	说明
type	String	navigateTo	false	`navigateTo`或`to`对应`uni.navigateTo`，`redirect`或`redirectTo`对应`uni.redirectTo`，`switchTab`或`tab`对应`uni.switchTab`，`reLaunch`对应`uni.reLaunch`，`navigateBack`或`back`对应`uni.navigateBack`
url	String	-	false	type为`navigateTo`，`redirecTo`，`switchTab`，`reLaunch`时为必填
delta	Number	1	false	type为`navigateBack`时用到，表示返回的页面数
params	Object	-	false	传递的对象形式的参数，如{name:‘lisa’,age:18}
animationType	String	pop-in	false	只在app生效，详见窗口动画
animationDuration	Number	300	false	动画持续时间，单位ms

onLoad() {this.$u.route({url: 'pages/components/empty/index',params: {name: 'lisa',age: 18}});
},

简写
注：为了方便简写，可以直接传递一个url地址代替Object，它只能执行uni.navigateTo类型的地址，不支持跳转到Tabbar页面，如果有参数需要携带，以对象形式写到方法的第二个参数中。

onLoad() {//无参数this.$u.route('pages/components/empty/index');//有参数this.$u.route('pages/components/empty/index', {name: 'lisa',age: 18});
},

数组乱序

randomArray(array)
该函数可以打乱一维数组元素的顺序，这是随机过程

array 一维数组

<script>
export default {onLoad() {console.log(this.$u.randomArray([1, 2, 3, 4, 5])); //[1, 5, 2, 3, 4]console.log(this.$u.randomArray([1, 2, 3, 4, 5]));}
};
</script>

guid全局唯一标识符

guid(length = 32, firstU = true, radix = 62)
该函数可以生产一个全局唯一、随机的guid，默认首字母为u，可以用于当做元素的id或者class名等需要唯一，随机字符串的地方，因为id或者class不能以数字开头。

length <Number | null> guid的长度，默认为32，如果取值null，则按rfc4122标准生成对应格式的随机数
firstU 首字母是否为"u"，如果首字母为数字情况下，不能用作元素的id或者class，默认为true
radix 生成的基数，默认为62，用于生成随机数字符串为"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"，如果取2，那么返回的结果就是前两位0和1(可以理解为二进制)的随机结果，如果为7，返回的字符串就是0-7(理解为八进制)之间， 10为十进制，以此类推。

说明：这个方法三个参数都有默认的值，所以您调用的时候，可以无需传递任何参数也是可以的，并且建议您这样做。

<template><view :class="$u.guid()" :id="elClass">guid</view>
</template><script>
export default {data() {return {elClass: uni.$u.guid(2, true, 7)};}
};
</script>

colorSwitch颜色转换

<script>
export default {onLoad() {/* RGB转十六进制HexrgbToHex(rgb)该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值rgb <String> RGB颜色值，如rgb(230, 231, 233) */console.log(this.$u.rgbToHex('rgb(13, 145, 20)')); //#0d9114/* 十六进制Hex转RGBhexToRgb(hex)该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值hex <String> HEx颜色值，如#0afdce */console.log(this.$u.hexToRgb('#0d9114')); //rgb(13,145,20)/* 颜色渐变colorGradient(startColor, endColor, step)该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为step值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]startColor <String> 开始颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)endColor <String> 结束颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)step <Number> 均分值，把开始值和结束值平均分成多少份 */console.log(this.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3)); //['#fafafa', '#fbfbfb', '#fcfcfc']/* 颜色透明度colorToRgba(color, opacity = 0.3)该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式，比如white)，返回此颜色的rgba格式值，如下：color <String> 颜色值，只能hex或者rgba格式opacity <Number> 不透明度值，取值为0-1之间 */console.log(this.$u.colorToRgba('#000000', 0.3));//rgba(0,0,0,0.3)}
};
</script>

color 颜色值

此功能为uView内部通过js提供的一些颜色值，可以用于通过js修改元素字体，背景颜色等一些场景，常用于uView的各个组件中。
这些颜色值，挂载在$u对象下的color数组中，关于这些颜色值的具体描述，详见Color 色彩
使用方法：如使用primary颜色值，方法为：$u.color[‘primary’]

说明：这些通过JS调用的颜色值，也是能通过CSS调用的，二者等价。详见Color 色彩

<script>
export default {onLoad() {/* 主题颜色该主题颜色值，一共有5个，分别是primary、error、success、info、warning */console.log(this.$u.color['primary']); //#3c9cff/* 文字颜色uView一共提供了四个颜色值，具体请见组件部分Color色彩分别有：mainColor、contentColor、tipsColor、lightColor、borderColor(边框颜色值) */console.log(this.$u.color['mainColor']); //#303133/* 背景颜色 2.x已废弃uView提供了一个浅灰的背景颜色值，该值为#f3f4f6 */console.log(uni.$u.color['bgColor']); //undefined}
};
</script>

queryParams 对象转URL参数

该方法，可以将一个对象形式参数转换成get传参所需参数形式，如把{name: ‘lisa’, age: 20}转换成?name=lisa&age=20

用途：可以用于uni.navigateTo接口传参等场景，无需自己手动拼接URL参数

queryParams(data, isPrefix = true, arrayFormat = ‘brackets’)

data 对象值，如{name: ‘lisa’, age: 20}
isPrefix 是否在返回的字符串前加上"?"，默认为true
arrayFormat 属性为数组的情况下的处理办法，默认为brackets，见后面说明

<script>
export default {data() {return {data: {name: 'lisa',age: 18,fruits: ['apple', 'banana', 'orange']}};},onLoad() {console.log(this.$u.queryParams(this.data)); //?name=lisa&age=18&fruits[]=apple&fruits[]=banana&fruits[]=orange/* arrayFormat参数说明如果您传入的data对象内部某些属性值为数组的情况下，您可能需要留意这个参数的配置：该参数可选值有4个：indices，brackets，repeat，comma，具体效果请见下方的演示说明 */console.log(this.$u.queryParams(this.data, true, 'indices'));//?name=lisa&age=18&fruits[0]=apple&fruits[1]=banana&fruits[2]=orangeconsole.log(this.$u.queryParams(this.data, true, 'brackets'));//?name=lisa&age=18&fruits[]=apple&fruits[]=banana&fruits[]=orangeconsole.log(this.$u.queryParams(this.data, true, 'repeat'));//?name=lisa&age=18&fruits=apple&fruits=banana&fruits=orangeconsole.log(this.$u.queryParams(this.data, true, 'comma'));//?name=lisa&age=18&fruits=apple,banana,orange}
};
</script>

test 规则校验

uView内置了一些校验规则，如是否手机号，邮箱号，URL等
这些规则方法，挂载在 u . t e s t 下面，如验证是否手机号： ‘ u.test下面，如验证是否手机号：` u.test下面，如验证是否手机号：‘u.test.mobile(‘13888889999’)`，如果验证通过，返回true，否则返回false。

是否验证码

code(value, len = 6)
校验是否验证码(要求为数字)，返回true或者false。

value 验证码字符串
len 验证码长度，默认为6

console.log(this.$u.test.code('4567', 4));

是否数组

array(array)
校验是否数组，返回true或者false。

array 数组

console.log(this.$u.test.array(this.arr), Array.isArray(this.arr), Object.prototype.toString.call(this.arr) === '[object Array]');//true true true

是否Json字符串
jsonString(json)
校验是否Json字符串，返回true或者false。

json Json字符串
注意：请留意json字符串的要求：
整体为一个字符串
字符串对象内的属性需要用""双引号包含

 console.log(uni.$u.test.jsonString('{"a": 1}'));

是否对象
object(object)
校验是否对象，返回true或者false。

object 对象

console.log(uni.$u.test.object({a: 1}));

是否邮箱号
email(email)
校验是否邮箱号，返回true或者false。

email 字符串

console.log(uni.$u.test.email('123465798@gmail.com'));

是否手机号
mobile(mobile)
校验是否手机号，返回true或者false。

mobile 字符串

console.log(uni.$u.test.mobile('13845678900'));

是否URL
url(url)
校验是否URL链接，返回true或者false。

url 字符串

console.log(uni.$u.test.url('http://www.uviewui.com'));//true
console.log(uni.$u.test.url('www.uviewui.com'));//false

是否为空
这里指的“空”，包含如下几种情况：

值为undefined(一种类型)，
非字符串"undefined" 字符串长度为0，也即空字符串
值为false(布尔类型)，非字符串"false"
值为数值0(非字符串"0")，或者NaN
值为null，空对象{}，或者长度为0的数组

isEmpty(value)
校验值是否为空，返回true或者false。
此方法等同于empty名称，但是为了更语义化，推荐用isEmpty名称。

value 字符串

console.log(uni.$u.test.isEmpty(false));

是否普通日期
验证一个字符串是否日期，返回true或者false，如下行为正确：

2020-02-10、2020-02-10 08:32:10、2020/02/10 3:10、2020/02/10 03:10、2020/02-10 3:10
如下为错误：
2020年02月10日、2020-02-10 25:32
总的来说，年月日之间可以用"/“或者”-“分隔(不能用中文分隔)，时分秒之间用”:"分隔，数值不能超出范围，如月份不能为13，则检验成功，否则失败。

date(date)

date 日期字符串

console.log(uni.$u.test.date('2020-02-10 08:32:10'));

是否十进制数值
整数，小数，负数，带千分位数(2,359.08)等可以检验通过，返回true或者false。

number(number)

number 数字

console.log(uni.$u.test.number('2020'));

是否整数
所有字符都在0-9之间，才校验通过，结果返回true或者false。

digits(number)

number 数字

console.log(uni.$u.test.digits('2020'));

是否身份证号
身份证号，包括尾数为"X"的类型，可以校验通过，结果返回true或者false。

idCard(idCard)

idCard 身份证号

console.log(uni.$u.test.idCard('110101199003070134'));

是否车牌号
可以校验旧车牌号和新能源类型车牌号，结果返回true或者false。

carNo(carNo)

carNo 车牌号

console.log(uni.$u.test.carNo('京A88888'));

是否金额
最多两位小数，可以带千分位，结果返回true或者false。

amount(amount)

amount 金额字符串

console.log(uni.$u.test.amount('3,233.08'));//true
console.log(uni.$u.test.amount('3,233.080'));//false

是否汉字
可以为单个汉字，或者汉字组成的字符串，结果返回true或者false。

chinese(zh)

zh 中文字符串

console.log(uni.$u.test.chinese('更上一层楼'));

是否字母
只能为"a-z"或者"A-Z"之间的字符，结果返回true或者false。

letter(en)

en 字母串

console.log(uni.$u.test.letter('uView'));

是否字母或者数字
只能是字母或者数字，结果返回true或者false。

enOrNum(str)

str 字母或者数字字符串

console.log(uni.$u.test.enOrNum('uView'));

是否包含某个值
字符串中是否包含某一个子字符串，区分大小写，结果返回true或者false。

contains(str, subStr)

str 字符串
subStr 子字符串

console.log(uni.$u.test.contains('uView', 'View'));

数值是否在某个范围内
如30在"29-35"这个范围内，不在"25-28"这个范围内，结果返回true或者false。

range(number, range)

number 数值
range 如"[25-35]"

console.log(uni.$u.test.range(35, [30, 34]));

字符串长度是否在某个范围内
如"abc"长度为3，范围在"2-5"这个区间，结果返回true或者false。

rangeLength(str, range)

str 数值
range 如"[25, 35]"

console.log(uni.$u.test.rangeLength('abc', [3, 10]));

random 随机数值

random(min, max)
该方法可以返回在"min"和"max"之间的数值，要求"min"和"max"都为数值，且"max"大于或等于"min"，否则返回0.

min 最小值，最小值可以等于该值
max 最大值，最大值可以等于该值

console.log(uni.$u.random(1, 3));

trim 去除空格

trim(str, pos)
该方法可以去除空格，分别可以去除所有空格，两端空格，左边空格，右边空格，默认为去除两端空格

str 字符串
pos 去除那些位置的空格，可选为：both-默认值，去除两端空格，left-去除左边空格，right-去除右边空格，all-去除包括中间和两端的所有空格

console.log(uni.$u.trim('abc    b ', 'all')); // 去除所有空格
console.log(uni.$u.trim(' abc '));    // 去除两端空格