常用工具函数封装

最新推荐文章于 2023-04-19 17:34:17 发布
最新推荐文章于 2023-04-19 17:34:17 发布
阅读量150 收藏
点赞数
文章标签： javascript json ViewUI

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')
  }

 

weixin_34402408
关注
几个网络工具函数 只是做了一下简单封装
08-09
GetHostAddrByHostname GetHostnameByHostAddr GetHostnameByIP GetIPByHostAddr GetIPByHostname
Vue 工具函数封装
qq_45345113的博客
07-25 1057
common/utils下定义一个公共方法，将动态的数据抽取为形参，由使用者根据自身的情况动态的传入实参
小程序工具函数封装
qq_43559271的博客
12-20 196
工具函数封装，集合一些常用正则验证函数，字符串处理，数组处理，对象处理，时间操作等模块
封装一个常用的js工具
gs981600308的博客
12-10 557
封装一个常用的js工具 * 数组的去重复 * @param arr * @returns {*} */ unique2: function(arr) { for(var i = 0; i &lt; arr.length; i++) { ...
js常用封装函数
坚持，努力，奋斗不止
05-26 2427
//js判断数据为空的方法 function isBlank(str){ if (Object.prototype.toString.call(str) ==='[object Undefined]'){//空 return true } else if ( Object.prototype.toString.call(str) === '[object String]'...
JavaScript常用工具函数库汇总
10-14
ction dateFormat(date, beforeHyphen = '-', afterHyphen = ':') { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart...
JavaScript学习笔记_js常用函数封装_js包.zip
11-04
本压缩包“JavaScript学习笔记_js常用函数封装_js包.zip”包含了对JavaScript基础及进阶技巧的学习资料，特别关注了函数封装和模块化开发实践。 首先，`tool.js`可能是一个实用工具函数集合，封装了一些常见的...
javaScript常用工具函数
08-05
工作积累总结
工作工具之-函数封装-http篇
庚中
02-25 186
http /* let url = 'http://demo.com/api' 例: ajax({ url: url, success: function(data) { } }) */ function ajax(setting){ //设置参数的初始值 ...
常用工具封装成的头文件 C++
08-18
常用工具封装成的头文件 C++
前端基础向~从项目出手封装工具函数
军火库
11-11 625
在项目开始初期，往往都是有组里的“大佬”为我们搭建或者说改造一个项目使用的前端项目框架，通常都会包含一些常用的库和函数：比如 router 路由、store 数据共享、登录和异常页、动态路由和按钮权限处理等等。但是在项目进行过程中，都需要大家一起参与！不管是小白也好、大佬也好，在处理一些基础的表单表格的时候，基本思路和代码逻辑应该都是差不多的。所以为了统一和复用这部分功能的代码，来减少代码量、降低“小白”们编写代码时会花费的时间，我们都会创建一个Utils工具函数目录，用来存放我们抽离出来的所有工具函数。
JavaScript前端实用的工具函数封装
不定时分享最优质的网络技术与教程，满满的干货。
12-10 2024
导入默认图片// // 注册自定义指令 v2方法// }//注册自定义指令 v3方法// 浏览器提供 IntersectionObserver// 图片加载失败就显示默认图片}// 不在监听dom}},{})// 监听dom}})}}
w3cschool脚本算法编程实战课程
weixin_30278311的博客
03-01 123
部分源码==》https://github.com/calamus0427/commonJS 翻转字符串算法挑战 function reverseString(str) { str = str.split("").reverse().join("") return str; } reverseString("hello"); 阶乘算法挑战 function fact...
uniapp小程序封装常用工具函数
最新发布
2303_76218115的博客
04-19 1984
类似的工具函数还有很多，这里暂时不一一列举了，上面提到的银行卡校验，还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话，可以联系我，由于JSON数据太大，没办法全部放在这里。
如何封装自己的工具函数库并发布npm包
guxin_duyin的博客
10-03 3589
工具函数库 发布npm包 typescript rollup npm login
函数封装
weixin_36541969的博客
11-29 663
函数封装是一种函数的功能，它把一个程序员写的一个或者多个功能通过函数、类的方式封装起来，对外只提供一个简单的函数接口。当程序员在写程序的过程中需要执行同样的操作时，程序员（调用者）不需要写同样的函数来调用，直接可以从函数库里面调用。程序员也可以从网络上下载的功能函数，然后封装到编译器的库函数中，当需要执行这一功能的函数时，直接调用即可。而程序员不必知道函数内部如何实现的，只需要知道这个函数或者类提
C++基础（13）——函数高级用法:封装
bigData1994pb的博客
07-14 6812
目录 1.封装的意义 1.1封装的意义一： 1.2 封装的意义二 2.struct和class区别 3.成员属性私有化 4.示例1 5.示例2 1.封装的意义 封装是C++面向对象三大特征之一 将属性和行为作为一个整体，表现生活中的事物 将属性和行为加以权限控制 1.1封装的意义一： 将属性和行为作为一个整体，表现生活中的事物 语法：class 类名{访问权限：属性/行为}; 专业术语： 类中的属性和行为统一称为成员，类中的属性称为成员属性和成员变量 类中的行为成为成员...
vue一些常用的工具函数封装
likang1314520的博客
09-06 1140
一些常用的工具函数封装
微信小程序工具函数封装详解
微信小程序工具函数封装是指在微信小程序开发中对常用工具函数的封装，以便于复用和提高开发效率。这种封装可以将常用的函数抽象出来，方便在不同的页面和组件中调用。 在微信小程序工具函数封装中，我们可以看到几...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值