常用工具函数封装

1、封装的函数：

 

2、函数库

 

import _ from 'lodash';
import vIsIP from 'validator/lib/isIP';
import vIsMD5 from 'validator/lib/isMD5';
import vIsEmail from 'validator/lib/isEmail';
import vIsURL from 'validator/lib/isURL';
import visBase64 from 'validator/lib/isBase64';
import visCreditCard from 'validator/lib/isCreditCard';
import visJSON from 'validator/lib/isJSON';
import visMACAddress from 'validator/lib/isMACAddress';
const wenger = {

  // 数组常用函数

  /**
   * drop:裁剪数组中的前 N 个元素，返回剩余的部分。
   * @param  (array, [n=1]) n表示裁剪个数
   * @return Array返回数组的剩余的部分。
   * 示例：wenger.drop([1, 2, 3], 2) == [3]
   */
  drop: _.drop,

  /**
   * first:获得数组的首个元素。
   * @param  (array)
   * @return 返回数组中的首个元素。
   * 示例：wenger.head([1, 2, 3]) == 1
   */
  first: _.head,

  /**
   * last:获取数组中的最后一个元素。
   * @param  (array)
   * @return 返回数组中的最后一个元素。
   * 示例：wenger.last([1, 2, 3]) == 3
   */
  last: _.last,

  /**
   * pull:移除所有经过 SameValueZero 等值比较为 true 的元素。
   * @param  (array, [values])
   * @return 返回数组本身(区别于下面的without方法)。
   * 示例：wenger.pull([1, 2, 3, 1, 2, 3], 2, 3) == [1, 1]
   */
  pull: _.pull,

  /**
   * tail:获取数组中除了第一个元素的剩余数组。
   * @param  (array)
   * @return 返回数组中除了第一个元素的剩余数组。
   * 示例：wenger.tail([1, 2, 3]) == [2, 3]
   */
  tail: _.tail,

  /**
   * take:从数组的起始元素开始提取 N 个元素。
   * @param  (array, [n=1]) n表示提取个数
   * @return 返回提取的元素数组。
   * 示例：wenger.take([1, 2, 3],2) == [1, 2]
   */
  take: _.take,

  /**
   * uniq:创建一个不重复的数组副本。使用了 SameValueZero 等值比较。只有首次出现的元素才会被保留。。
   * @param  (array)
   * @return 返回不重复的数组。
   * 示例：wenger.uniq([2, 1, 2]) == [2, 1]
   */
  uniq: _.uniq,

  /**
   * without:创建一个移除了所有提供的 values 的数组。使用了 SameValueZero 等值比较。
   * @param  (array, [values])
   * @return 返回一个处理好的新数组。
   * 示例：wenger.without([1, 2, 1, 3], 1, 2) == [3]
   */
  without: _.without,

  // 集合方法
  /**
   * includes:检查 值 是否在 集合中，如果集合是字符串，那么检查 值 是否在字符串中。 其他情况用 SameValueZero 等值比较。 如果指定 fromIndex 是负数，从结尾开始检索。
   * @param  (collection, value, [fromIndex=0])
   * @return 如果找到 value 返回 ture， 否则返回 false。
   * 示例：wenger.includes([1, 2, 3], 1) == true
   * wenger.includes({ 'user': 'fred', 'age': 40 }, 'fred') == true
   * wenger.includes('pebbles', 'eb') == true
   */
  includes: _.includes,

  // 函数方法
  /**
   * debounce:创建一个防抖动函数。
   * 该函数会在 wait 毫秒后调用 func 方法。
   * @param  (func, [wait=0], [options])
   * func (Function)
   *  要防抖动的函数

   *  [wait=0] (number)
   *  需要延迟的毫秒数

   *  [options] (Object)
    选项对象

   * [options.leading=false] (boolean)
   * 指定调用在延迟开始前

   * [options.maxWait] (number)
   * 设置 func 允许被延迟的最大值

   * [options.trailing=true] (boolean)
   * 指定调用在延迟结束后
   * @return 返回具有防抖动功能的函数。
   * 示例：
   * 避免窗口在变动时出现昂贵的计算开销: jQuery(window).on('resize', _.debounce(calculateLayout, 150));
   */
  debounce: _.debounce,

  /**
   * debounce:创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。
   * @param  (func, [wait=0], [options])
   * func (Function)
   *  要节流的函数

   *  [wait=0] (number)
   *  需要节流的毫秒

   *  [options] (Object)
    选项对象

   * [options.leading=true] (boolean)
   * 指定调用在节流开始前

   * [options.trailing=true] (boolean)
   * 指定调用在节流结束后

   * @return 返回节流的函数。
   * 示例：
   * 避免在滚动时过分的更新定位: jQuery(window).on('scroll', _.throttle(updatePosition, 100));;
   */
  throttle: _.throttle,

  // 通用方法
  /**
   * cloneDeep:深拷贝。
   * @param  (value)
   * @return 返回拷贝后的值。
   */
  cloneDeep: _.cloneDeep,

  /**
   * eq:执行 SameValueZero 比较两者的值确定它们是否相等。
   * @param  (value, other)
   * @return 相等返回 true，否则返回 false。
   * 示例：
   * wenger.eq({ 'user': 'fred' }, { 'user': 'fred' }) == true
   */
  eq: _.eq,

  /**
   * isArray:检查 value 是否是 Array 对象。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isArray([1]) == true
   */
  isArray: _.isArray,

  /**
   * isArrayLike:检查 value 是否是类数组。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isArrayLike([1]) == true
   * wenger.isArrayLike(document.body.children) == true
   * wenger.isArrayLike('abc') == true
   */
  isArrayLike: _.isArrayLike,

  /**
   * isBoolean:检查 value 是否是原始 boolean 类型或者对象。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isBoolean(false) == true
   */
  isBoolean: _.isBoolean,

  /**
   * isEqual:执行深比较来决定两者的值是否相等。
   * @param  (value, other)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isEqual({ 'user': 'fred' },{ 'user': 'fred' }) == true
   */
  isEqual: _.isEqual,

  /**
   * isFinite:检查 value 是否是原始 finite number。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isFinite(3) == true
   */
  isFinite: _.isFinite,

  /**
   * isInteger:检查 value 是否是整数。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false。
   * 示例：
   * wenger.isInteger(3) == true
   */
  isInteger: _.isInteger,

  /**
   * isNaN:检查 value 是否是 NaN。
   * @param  (value)
   * @return 如果符合 NaN 返回 true，否则返回 false。
   * 示例：
   * wenger.isNaN(NaN) == true
   */
  isNaN: _.isNaN,

  /**
   * isNil:检查 value 是否是 null 或者 undefined。
   * @param  (value)
   * @return 如果是 null 或者 undefined 返回 true，否则返回 false
   * 示例：
   * wenger.isNil(null) == true
   */
  isNil: _.isNil,

  /**
   * isNull:检查 value 是否是 null。
   * @param  (value)
   * @return 如果是 null 返回 true，否则返回 false
   * 示例：
   * wenger.isNull(NaN) == true
   */
  isNull: _.isNull,

  /**
   * isNumber:检查 value 是否是原始数值型 或者 对象。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false
   * 示例：
   * wenger.isNumber(3) == true
   */
  isNumber: _.isNumber,

  /**
   * isObject:检查 value 是否是 Object 的 language type。
   * @param  (value)
   * @return 如果是对象返回 true，否则返回 false
   * 示例：
   * wenger.isObject({}) == true
   * wenger.isObject(null) == false
   */
  isObject: _.isObject,

  /**
   * isSafeInteger:检查 value 是否是安全整数。 这个整数应该是符合 IEEE-754 标准的非双精度浮点数。
   * @param  (value)
   * @return 如果是安全整数返回true，否则返回 false
   * 示例：
   * wenger.isSafeInteger(3) == true
   */
  isSafeInteger: _.isSafeInteger,

  /**
   * isString:检查 value 是否是原始字符串或者对象。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false
   * 示例：
   * wenger.isString('3') == true
   */
  isString: _.isString,

  /**
   * isUndefined:检查 value 是否是 undefined。
   * @param  (value)
   * @return 如果是正确的类型，返回 true，否则返回 false
   * 示例：
   * wenger.isUndefined(undefined) == true
   */
  isUndefined: _.isUndefined,

  /**
   * toInteger:转换 value 为整数 。
   * @param  (value)
   * @return 返回转换后的整数
   * 示例：
   * wenger.toInteger('3') == 3
   */
  toInteger: _.toInteger,

  /**
   * toNumber:转换 value 为整数 。
   * @param  (value)
   * @return 返回数值
   * 示例：
   * wenger.toNumber('3') == 3
   */
  toNumber: _.toNumber,

  /**
   * toSafeInteger:转换 value 为安全整数。 安全整数可以用于比较和准确的表示。
   * @param  (value)
   * @return 返回转换后的整数
   * 示例：
   * wenger.toSafeInteger('3') == 3
   */
  toSafeInteger: _.toSafeInteger,

  /**
   * random:转换 value 为安全整数。 安全整数可以用于比较和准确的表示。
   * @param  (value)
   * @return 返回转换后的整数
   * 示例：
   * wenger.random(0, 5)  0 和 5 之间的数
   * wenger.random(0, 5, true)  0 和 5 之间的浮点数
   */
  random: _.random,

  // 对象方法
  /**
   * forIn:使用 iteratee 遍历对象的自身和继承的可枚举属性。
   * @param  (object, [iteratee=_.identity])
   * @return 返回对象
   * 示例：
   * function Foo() {
      this.a = 1;
      this.b = 2;
    }

    Foo.prototype.c = 3;
    wenger.forIn(new Foo, function(value, key) {
      console.log(key);
    })
    输出 'a', 'b', 然后 'c' (无法保证遍历的顺序)
   */
  forIn: _.forIn,

  /**
   * forOwn:使用 iteratee 遍历自身的可枚举属性。
   * @param  (object, [iteratee=_.identity])
   * @return 返回对象
   * 示例：
   * 上例只会返回 'a' 和 'b'
   */
  forOwn: _.forOwn,

  /**
   * get:根据对象路径获取值。
   * @param  (object, path, [defaultValue])
   * @return 返回解析的值
   * 示例：
    var object = { 'a': [{ 'b': { 'c': 3 } }] };

    wenger.get(object, 'a[0].b.c');
    输出3
   */
  get: _.get,

   /**
   * keys:创建 object 自身可枚举属性名为一个数组。
   * @param  (object)
   * @return 返回解析的值
   * 示例：
    function Foo() {
      this.a = 1;
      this.b = 2;
    }

    Foo.prototype.c = 3;

    wenger.keys(new Foo);
    输出['a', 'b']
   */
  keys: _.keys,

  /**
   * pick:创建一个从 object 中选中的属性的对象。
   * @param  (object, [props])
   * @return 返回新对象
   * 示例：
    var object = { 'a': 1, 'b': '2', 'c': 3 };

    wenger.pick(object, ['a', 'c']);
    输出{ 'a': 1, 'c': 3 }
   */
  pick: _.pick,

  // 字符串方法
  /**
   * escape:转义字符 "&", "<", ">", '"', "'", 以及 "`" 为HTML实体字符。
   * @param  ([string=''])
   * @return 返回转义后的字符串
   */
  escape: _.escape,

  /**
   * escapeRegExp:转义RegExp 中特殊的字符 "^", "$", "\", ".", "*", "+", "?", "(", ")", "[", "]", "{", "}", 以及 "|"。
   * @param  ([string=''])
   * @return 返回转义后的字符串
   */
  escapeRegExp: _.escapeRegExp,

  /**
   * trim:去掉字符串首尾两端的空格。
   * @param  ([string=''])
   * @return 返回处理后的字符串
   */
  trim: _.trim,

  /**
   * unescape:反向版 _.escape。 这个方法转换 HTML 实体 &amp;, &lt;, &gt;, &quot;, &#39;, 以及 &#96; 为对应的字符。
   * @param  ([string=''])
   * @return 返回处理后的字符串
   */
  unescape: _.unescape,

  /**
   * startsWith: 参数字符串是否在原字符串的头部。
   * @param  (str, value)
   * @return true or false
   */
  startsWith(str, value) {
    return str.startsWith(value)
  },
  endsWith(str, value) {
    return str.endsWith(value)
  },

  /**
   * isSupportWebP:判断浏览器是否支持webP格式图片。
   * @param  ()
   * @return ture or false
   */
  isSupportWebP() {
    return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
  },

  /**
   * isIp:是否为 IP，支持ipv4和ipv6两种格式。
   * @param  (str)
   * @return ture or false
   * 示例：
    wenger.isIp('127.0.0.1') == true;
   */
  isIp(str) {
    return vIsIP(str, 4) || vIsIP(str, 6);
  },

  /**
   * isDomain:是否为 域名。
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isDomain('www.baidu.com') == true;
   */
  isDomain(str) {
    if (this.isIp(str)) {
      return false;
    }

    let reg = /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}){0,10}(\.[a-zA-Z0-9][-a-zA-Z0-9]{1,15})$/i;
    return reg.test(str.toLowerCase());
  },

  /**
   * isMD5:是否为MD5。
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isMD5('32755257ee521e95abc307bb472c40bf') == true;
   */
  isMD5: vIsMD5,

  /**
   * isIMEI:是否为IMEI。
   * @param  (str)
   * @return ture or false
   */
  isIMEI(str) {
    let reg = /^[a-zA-Z0-9]{14,15}$/i;
    return reg.test(str);
  },

  /**
   * isIdCard:是否为判断是否为身份证号.
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isIdCard('110101201609102014') == true;
   */
  isIdCard(str) {
    return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str);
  },

  /**
   * isPhoneNum:判断是否为手机号。
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isPhoneNum('18612481388') == true;
   */
  isPhoneNum(str) {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str);
  },

  /**
   * isEmail:是否为邮箱。
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isEmail('1861248138@qq.com') == true;
   */
  isEmail: vIsEmail,

  /**
   * isURL:是否为URL
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isURL('http://baidu.com') == true;
   */
  isURL: vIsURL,

  /**
   * isBase64:检查字符串是否为base64编码
   * @param  (str)
   * @return ture or false
   */
  isBase64: visBase64,

  /**
   * isCreditCard：信用卡
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isCreditCard('6225768744320969') == true
   */
  isCreditCard: visCreditCard,

  /**
   * isJSON:检查字符串是否为JSON格式
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isJSON('{"a":1}') == true
   */
  isJSON: visJSON,

  /**
   * isMACAddress:检查字符串是否为MAC格式
   * @param  (str)
   * @return ture or false
   * 示例：wenger.isMACAddress('00:01:6C:06:A6:29') == true
   */
  isMACAddress: visMACAddress
}
export default wenger

 

 

 

3、函数库使用

//注意路径 假设上面的js名称为wenger.js
import $ from '@/utils/wenger'

//使用vue的mixin
mixins: [$],
  mounted() {

    //使用
    console.log($.tail([1, 2, 3]), '8989')
  }