Diana 前端定制化工具库

 

Array

_.countInArr(arr, value)

统计数组中特定值出现的次数

Returns

(Number): 返回数组中特定值出现的次数.

  

Example
_.countInArr([1, 1, 2, 1, 2, 3], 1) // => 3

_.difference(arr1, arr2)

数组取差集(即取 arr1 中存在,arr2 中不存在的值)

Returns

(Array): 返回取差集后的 array.

  

Example
_.difference([1,2,3], [1,2,4]) // => [3]

_.intersection(...arr)

多个数组取交集

Arguments

...arr (Array): 可传入 1 个或多个数组

  

Returns

(Array): 返回取交集后的 array.

  

Example
_.intersection([1, 2, 'a', 1, 'a']) // => [1, 'a']
_.intersection([1, 2, 'a', 1], [4, 2, 'a'], [2, 'a', 'c']) // => [ 2, 'a']

_.uniq(...arr)

多个数组取并集 | 数组去重

Arguments

...arr (Array): 可传入 1 个或多个数组

  

Returns

(Array): 返回去重后的 array.

  

Example
_.uniq([1, 3, 2, 2, 1]) // => [1, 3, 2]
_.uniq([1, 'a', 3, 1], [4, 'a', 'b'], [2, 3, 'b', 'c'])
// => [1, 'a', 3, 4, 'b', 2, 'c']

Collection

_.each(list, iteratee)

遍历 list 中的所有元素,按顺序用每个元素当做参数调用 iteratee 函数。支持数组,对象,和类数组对象

Example
_.each([1, 2, 3], (value) => {console.log(value)}); // => 1, 2, 3
_.each({1, 2, 3}, (value) => {console.log(value)}); // => 1, 2, 3

Device(B)

_.getOS()

获取当前的操作系统

Example
_.getOS(); // => 'MacOSX'

_.isMobile()

判断当前环境是否为手机

Example
_.isMobile(); // => true

Dom(B)

_.addClass(element, className)

为元素添加类名

Arguments

element (HTMLElement): 选中的节点

className (String): 添加的类名


_.addLoadEvent(func)

把在页面加载完毕时执行的函数创建为一个队列(摘自 JavaScript DOM 编程艺术)

Arguments

func (Function) 需加进队列的函数


_.hasClass(element, className)

判断当前节点是否有指定的 class 属性

Arguments

element (HTMLElement): 选中的节点

className (String): 判断的类名


insertAfter(newNode, referenceNode)

在指定节点后插入节点(摘自 JavaScript DOM 编程艺术)

Arguments

newNode (Dom) 新节点

referenceNode (Dom) 指定节点

  

Example
  const image = document.createElement('img')
  image.setAttribute('src', 'images/1.png')
  const imagegallery = document.getElementById('imagegallery')
  _.insertAfter(image, imagegallery)

Function

_.curry(fn, arity = fn.length, ...args)

函数柯里化。如果提供的参数 (args) 数量足够,则调用传递函数 f ,否则返回一个 curried 函数 f

Arguments

fn (Function) 调用函数

arity (Number) 参数数量(可不传)

...args (any) 剩余参数

  

Example
_.curry(Math.pow)(2)(10) // => 1024

_.debounce(function, wait, [immediate])

函数防抖,用来限制事件的频繁触发。例如: 使用防抖来限制点击查询按钮调用查询 api 的次数。传参 immediate 为 true 时,会立即执行传入的函数,wait 毫秒内不再触发事件后才可以重新触发执行;传参 immediate 不传或为 false 时,wait 毫秒内不触发事件后,会触发传入函数的执行

Arguments

function (fn) 需执行防抖的函数

wait (number) 防抖频率

immediate (boolean) 是否立即执行

  

Example
// 浏览器中重绘使用防抖
const lazyLayout = _.debounce(calculateLayout, 300)
$(window).resize(lazyLayout)

// 结合装饰器使用防抖
class Demo {
  @Debounce(2000, true)
  submit() {
    // 调用查询 api
  }
}

_.throttle(function, wait, [options])

函数节流。创建并返回一个像节流阀一样的函数,当重复调用函数的时候,至少每隔 wait 毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助。默认情况下,throttle 将在你调用的第一时间尽快执行这个 function,(默认第一次和最后一次都执行function)。如果你想禁用第一次首先执行的话,传递{leading: false},还有如果你想禁用最后一次执行的话,传递{trailing: false}

Example
const throttled = _.throttle(updatePosition, 100)
$(window).scroll(throttled)

Http(B)

_.redirect(url, aslink = true)

重定向到指定的 URL

Arguments

url (String) 待跳转 URL

aslink (Boolean) 默认为 true, 传 false 时,你不能通过 “前进” 和 “后退” 来访问已经被替换的 URL

  

Example
_.redirect('http://muyunyun.cn/diana/'); // 重定向到 http://muyunyun.cn/diana/ 这个网址

Lang

_.clone(obj)

浅拷贝

Arguments

any (values): 拷贝对象

Returns

(any): 拷贝出的对象

Example
let obj = {a: 1}
_.clone(obj).a === obj.a; // => true

_.cloneDeep(obj)

深拷贝

Arguments

any (values): 拷贝对象

Returns

(any): 拷贝出的对象

Example
let obj = {a: 1}
_.cloneDeep(obj).a === obj.a; // => false

_.codeToMean(arr, code)

将数组中的 code 转化为 mean.

Arguments

arr (Array): 数组

code (String | Number): 要转化的 code 值

  

Returns

(mean): 数组中 code 对应的 mean,若找不到则返回 null

  

Example
const arr = [
  { code: 10, mean: '午高峰时段' },
  { code: 20, mean: '晚高峰时段' },
  { code: 30, mean: '夜宵时段' },
]

_.codeToMean(arr, 20) // => 晚高峰时段


_.isArguments(object)

如果 object 是一个参数对象,返回 true

Example
(function(){ return _.isArguments(arguments); })(1, 2, 3); // => true
_.isArguments([1,2,3]); // => false


_.isArray(val)

判断是否为数组

  

Example
_.isArray([1, 2]); // => true

_.isDate(object)

如果 object 是一个日期,返回 true

Example
_.isDate(new Date()); // => true

_.isError(object)

如果object继承至 Error 对象,那么返回 true

Example
_.isError(/abc/); // => true

_.isFunction(object)

如果 object 是一个函数(Function),返回 true

Example
_.isFunction(() => {return 1}); // => true

_.isNumber(object)

如果 object 是一个数值,返回 true

Example
_.isNumber(123); // => true

_.isRegExp(object)

如果 object 是一个正则表达式,返回 true

Example
_.isRegExp(/abc/); // => true

_.isString(object)

如果 object 是一个字符串,返回 true

Example
_.isString('abc'); // => true

_.meanToCode(arr, mean)

将数组中的 mean 转化为 code.

Arguments

arr (Array): 数组

mean (String): 要转化的 mean 值

  

Returns

(code): 数组中 mean 对应的 code,若找不到则返回 null

  

Example
const arr = [
  { code: 10, mean: '午高峰时段' },
  { code: 20, mean: '晚高峰时段' },
  { code: 30, mean: '夜宵时段' },
]

_.meanToCode(arr, '晚高峰时段') // => 30

Math

_.distance(x0, y0, x1, y1)

计算两点 (x0, y0), (x1, y1) 之间的欧几里得距离

Example
_.distance(1,1, 2,3) // => 2.23606797749979

_.gcd(x, y)

求最大公约数

Example
_.gcd(8, 36) // => 4

_.max(arr)

判断数组中的最大值

Example
_.max([1, 2, 3, 4]); // => 4

_.mean(arr)

数组求平均值

Example
_.mean([1, 2, 3, 4]); // => 2.5

_.min(arr)

判断数组中的最小值

Example
_.min([1, 2, 3, 4]); // => 1

_.round(value, position)

数字四舍五入(可以指定保留几位小数)

Arguments

value (number): 数值 position (number): 保留几位小数, 默认为 0

Returns

(string)

Example
_.round(1.235, 2) => 1.24
_.round(1, 2)     => 1.00

_.sum(arr)

数组求和

Example
_.sum([1, 2, 3, 4]); // => 10

Object

_.convertInObj(obj, ruleObj)

该函数可以将相应字段转化为指定格式

Arguments

obj (Object)

ruleObj (Object): 给相应字段配置规则,暂时支持 number、string、boolean 类型

  

Example
_.convertInObj({ att1: '1', att2: '2', att3: 'att3value', att4: '', att5: 5, att6: 0 },
      {
        number: ['att1', 'att2', 'att4'],
        string: ['att3','att5'],
        boolean: ['att6'],
      })
    => { att1: 1, att2: 2, att3: 'att3value', att4: null, att5: '5', att6: false }

_.equal(value1, value2)

判断两个任意值是否相等(包含对象、数组深度遍历)

Example
const obj1 = {
    a: 1,
    b: [1, this.obj1],
}
const obj2 = {
    a: 1,
    b: [1, this.obj2],
}
_.equal(obj1, obj2) // => true

_.pairs2obj(arr)

将给定的键值对转换为一个对象

Example
_.pairs2obj([['a',1],['b',2]]) // => {a: 1, b: 2}

Random

_.rdColor()

生成随机颜色.

Returns

(String): 返回颜色的十六进制值.

  

Example
_.rdColor();
// => #b4370c

_.rdNum(min, max [, border])

指定整数范围生成随机整数.

Arguments

min (Number): 边界最小值

max (Number): 边界最大值

border (String): 设定边界(默认参数为 'both', 可选参数: 'left', 'right', 'no')

  

Returns

(Number): 指定整数范围生成的随机整数.

  

Example
_.rdNum(1, 3);            // =>   1 <= result <= 3
_.rdNum(1, 3, 'left');    // =>   1 <= result < 3
_.rdNum(1, 3, 'right');   // =>    1 < result <= 3
_.rdNum(1, 3, 'no');      // =>    1 < result < 3

Regexp

_.isEmail(email)

判断是否为邮箱地址.

Example
_.isEmail('muyy95@gmail.com'); // => true

_.isPhoneNum(phoneNum)

判断是否为手机号.

Example
_.isPhoneNum('15712345678'); // => true

String

_.changeCase(str, type)

大小写转化

Arguments

str (String): 待去除空格的字符串

type (Number): 1:首字母大写(默认) 2:首页母小写 3:大小写转换

  

Returns

(String): 返回 String 值

  

Example
_.changeCase('abcd'); // => 'Abcd'
_.changeCase('aBcD', 3); // => 'AbCd'

_.escapeStr(str)

转义特殊字符

Example
_.escapeRegExp('(test)') // => \\(test\\)

_.sortStr(str)

将字符串按字母顺序排序

Example
_.sortStr('cabbage') // => 'aabbceg'

_.trim(str, type)

去除空格

Arguments

str (String): 待去除空格的字符串

type (Number): 1-所有空格(默认),2-前后空格,3-前空格,4-后空格

  

Returns

(String): 返回 String 值

  

Example
_.trim(' ab cd ef '); // => 'abcdef'
_.trim(' ab cd ef ', 2); // => 'ab cd ef'

Time

_.timeTaken(callback)

测试功能所花费的时间

Example
_.timeTaken(() => Math.pow(2, 10)) // => 1024
// (logged): timeTaken: 0.019775390625ms

Url

_.obj2query(baseurl, obj)

对象转成 URL 中的 query

Arguments

baseurl (String) 基础 url

obj (Object) 待解析对象

  

Returns

(String): 返回 queryurl

  

Example
_.obj2query('http://abc.com', {a: 1, b: 2}); // => http://abc.com?a=1&b=2

_.query2obj(queryurl)

将 URL 中的 query 转为对象

Arguments

queryurl (String) 基础 url

  

Returns

(Object): 返回解析后的对象

  

Example
_.query2obj('http://abc.com?a=1&b=2'); // => {a: 1, b: 2}