前言
本文總結了專案開發過程中常用的js函式和正則，意在提高大家平時的開發效率，具體內容如下：
- 常用的正則校驗
- 常用的裝置檢測方式
- 常用的日期時間函式
- 跨端事件處理
- js移動端適配方案
- xss預防方式
- 常用的js演算法(防抖，截流，去重，排序，模板渲染，觀察者...)
程式碼
- 正則
// 匹配郵箱
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]*$/;
複製程式碼- 檢測平臺（裝置）型別
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);
複製程式碼- 常用的日期時間函式
// 時間格式化
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 "時間到！";
}
複製程式碼- 跨端事件處理
// 是否支援觸控事件
let isSupportTouch = ("ontouchstart" in document.documentElement) ? true : false;
//禁用Enter鍵表單自動提交
document.onkeydown = function(event) {
let target, code, tag;
if (!event) {
event = window.event; //針對ie瀏覽器
target = event.srcElement;
code = event.keyCode;
if (code == 13) {
tag = target.tagName;
if (tag == "TEXTAREA") { return true; }
else { return false; }
}
}
else {
target = event.target; //針對遵循w3c標準的瀏覽器，如Firefox
code = event.keyCode;
if (code == 13) {
tag = target.tagName;
if (tag == "INPUT") { return false; }
else { return true; }
}
}
};
複製程式碼- 移動端適配方案
(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);
複製程式碼- xss預防方式
// 敏感符號轉義
function entities(s) {
let e = {
'"': '"',
'&': '&',
'<': '<',
'>': '>'
}
return s.replace(/["<>&]/g, m => {
return e[m]
})
}
複製程式碼- 常用的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這些比較流行的函式式工具庫，在這裡僅做學習參考使用。
附錄 lodash API中文翻譯思維導圖
歡迎關注下方公眾號，讓我們一起探討前端的邊界：