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 (Object): 选中的节点

className (String): 添加的类名


_.addLoadEvent(func)

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

Arguments

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


getNextElement(node)

获取相邻的元素节点(修改自 JavaScript DOM 编程艺术)

Arguments

node (Dom) 传入当前节点

  

Return

node (Dom) 返回相邻的下一个元素节点


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])

函数防抖。限制事件的频繁触发,将延迟函数的执行(真正的执行)在函数最后一次调用时刻的 wait 毫秒之后,对于必须在一些输入(多是一些用户操作)停止到达之后执行的行为有帮助。例如: 渲染一个 Markdown 格式的评论预览, 当窗口停止改变大小之后重新计算布局, 等等。传参 immediate 为 true,debounce会在 wait 时间间隔的开始调用这个函数。

Example
const lazyLayout = _.debounce(calculateLayout, 300)
$(window).resize(lazyLayout)

_.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


_.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

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

_.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}