[[357980]]

前言

本文總結了項目開發過程中常用的js函數和正則，意在提高大家平時的開發效率，具體內容如下：

1. 常用的正則校驗
2. 常用的設備檢測方式
3. 常用的日期時間函數
4. 跨端事件處理
5. js移動端適配方案
6. xss預防方式
7. 常用的js算法(防抖，截流，去重，排序，模板渲染，觀察者...)

代碼

1.正則

// 匹配郵箱 
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$ 
 
// (新)匹配手機號 
let reg = /^1[0-9]{10}$/; 
 
// (舊)匹配手機號 
let reg = /^1(3|4|5|7|8)[0-9]{9}$/; 
 
// 匹配8-16位數字和字母密碼的正則表達式 
let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/; 
 
// 匹配國內電話號碼 0510-4305211 
let reg = /\d{3}-\d{8}|\d{4}-\d{7}/; 
 
// 匹配身份證號碼 
let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
 
// 匹配騰訊QQ號 
let reg = /[1-9][0-9]{4,}/; 
 
// 匹配ip地址 
let reg = /\d+\.\d+\.\d+\.\d+/; 
 
// 匹配中文 
let reg = /^[\u4e00-\u9fa5]*$/; 

2.檢測平臺(設備)類型

let isWechat = /micromessenger/i.test(navigator.userAgent), 
    isWeibo = /weibo/i.test(navigator.userAgent), 
    isQQ = /qq\//i.test(navigator.userAgent), 
    isIOS = /(iphone|ipod|ipad|ios)/i.test(navigator.userAgent), 
    isAndroid = /android/i.test(navigator.userAgent); 

3.常用的日期時間函數

// 時間格式化 
function format_date(timeStamp) { 
    let date = new Date(timeStamp); 
    return date.getFullYear() + "年" 
        + prefix_zero(date.getMonth() + 1) + "月" 
        + prefix_zero(date.getDate()) + "日 " 
        + prefix_zero(date.getHours()) + ":" 
        + prefix_zero(date.getMinutes()); 
} 
 
// 數字格式化 
function prefix_zero(num) { 
    return num >= 10 ? num : "0" + num; 
} 
 
// 倒計時時間格式化 
function format_time(timeStamp) { 
    let day = Math.floor(timeStamp / (24 * 3600 * 1000)); 
    let leave1 = timeStamp % (24 * 3600 * 1000); 
    let hours = Math.floor(leave1 / (3600 * 1000)); 
    let leave2 = leave1 % (3600 * 1000); 
    let minutes = Math.floor(leave2 / (60 * 1000)); 
    let leave3 = leave2 % (60 * 1000); 
    let seconds = Math.floor(leave3 / 1000); 
    if (day) return day + "天" + hours + "小時" + minutes + "分"; 
    if (hours) return hours + "小時" + minutes + "分" + seconds + "秒"; 
    if (minutes) return minutes + "分" + seconds + "秒"; 
    if (seconds) return seconds + "秒"; 
    return "時間到！"; 
} 

5.跨端事件處理

(function (doc, win) { 
    var docEl = doc.documentElement, 
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
        recalc = function () { 
            var clientWidth = docEl.clientWidth; 
            var fontSize = 20; 
            docEl.style.fontSize = fontSize + 'px'; 
            var docStyles = getComputedStyle(docEl); 
            var realFontSize = parseFloat(docStyles.fontSize); 
            var scale = realFontSize / fontSize; 
            console.log("realFontSize: " + realFontSize + ", scale: " + scale); 
            fontSize = clientWidth / 667 * 20; 
            if(isIphoneX()) fontSize = 19; 
            fontSize = fontSize / scale; 
            docEl.style.fontSize = fontSize + 'px'; 
        }; 
    // Abort if browser does not support addEventListener 
    if (!doc.addEventListener) return; 
    win.addEventListener(resizeEvt, recalc, false); 
    doc.addEventListener('DOMContentLoaded', recalc, false); 
 
    // iphoneX判斷 
    function isIphoneX(){ 
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375) 
    } 
 
})(document, window); 

6.xss預防方式

// 敏感符號轉義 
function entities(s) { 
    let e = { 
        '"': '"', 
        '&': '&', 
        '<': '&lt;', 
        '>': '&gt;' 
    } 
    return s.replace(/["<>&]/g, m => { 
        return e[m] 
    }) 
} 

7.常用的js算法

/** 
 * 節流函數--規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。 
 */ 
function throttle(fun, delay) { 
    let last, deferTimer 
    return function (args) { 
        let that = this 
        let _args = arguments 
        let now = +new Date() 
        if (last && now < last + delay) { 
            clearTimeout(deferTimer) 
            deferTimer = setTimeout(function () { 
                last = now 
                fun.apply(that, _args) 
            }, delay) 
        }else { 
            last = now 
            fun.apply(that,_args) 
        } 
    } 
} 
 
/** 
 * 防抖函數--在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時 
 */ 
 function debounce(fun, delay) { 
    return function (args) { 
        let that = this 
        clearTimeout(fun.id) 
        fun.id = setTimeout(function () { 
            fun.call(that, args) 
        }, delay) 
    } 
} 
 
// 觀察者模式 
let Observer = (function(){ 
  let t __messages = {}; 
  return { 
    regist: function(type, fn) { 
      if(typeof __messages[type] === 'undefined') { 
        messages[type] = [fn]; 
      }else { 
        __messages[type].push(fn); 
      } 
    }, 
    fire: function(type, args) { 
      if(!__messages[type]){ 
        return 
      } 
      let events = { 
        type: type, 
        args: args || {} 
      }, 
      i = 0, 
      len = __messages[type].length; 
      for(;i<len;i++){ 
        __messages[type][i].call(this, events); 
      } 
    }, 
    remove: function(type, fn) { 
      if(__messages[type] instanceof Array){ 
        let i = __messages[type].length -1; 
        for(;i>=0;i--){ 
          __messages[type][i] === fn && __messages[type].splice(i, 1) 
        } 
      } 
    } 
  } 
})(); 
 
 // 模板渲染方法 
 function formatString(str, data) { 
   return str.replace(/\{\{(\w+)\}\}/g, function(match, key) { 
     return typeof data[key] === undefined ? '' : data[key] 
   }) 
 } 
  
 // 冒泡排序 
function bubbleSort(arr) { 
    for (let i = arr.length - 1; i > 0; i--) { 
      for (let j = 0; j < i; j++) { 
        if (arr[j] > arr[j + 1]) { 
          swap(arr, j, j + 1); 
        } 
      } 
    } 
    return arr; 
} 
 
// 置換函數 
function swap(arr, indexA, indexB) { 
    [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]]; 
} 
 
// 數組去重 
function distinct(arr = testArr) { 
    return arr.filter((v, i, array) => array.indexOf(v) === i) 
} 

后期會繼續總結更多工作中遇到的經典函數，也作為自己在工作中的一點總結。我們當然也可以直接使用lodash或ramda這些比較流行的函數式工具庫，在這里僅做學習參考使用。

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。