經常使用工具函數封裝

一、封裝的函數：

 

二、函數庫

 

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

 

 

 

三、函數庫使用

//注意路徑 假設上面的js名稱爲wenger.js
import $ from '@/utils/wenger'

//使用vue的mixin
mixins: [$], mounted() { //使用
    console.log($.tail([1, 2, 3]), '8989') }