【JavaScript】将常用的功能封装成函数

最新推荐文章于 2022-11-18 20:59:00 发布

墨霁青玉

最新推荐文章于 2022-11-18 20:59:00 发布

阅读量605

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_30604453/article/details/84766942

版权

JavaScript 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

5. DataType.js 数据类型判断

6. Function.js 常用工具函数

7. Http.js 请求函数封装

8. WXHttp.js 微信请求函数封装

1. 常用的正则判断

/** 正则检验 */
function isPhoneNumber(str) {
  /** 中国大陆手机号 [0086]11位 */
  let reg = /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/
  /** 中国香港手机号 [00852]8位 （8位开头5/6/9手机号，2/3座机号）*/
  let reg1 = /^(00852)?(5|6|9)\d{7}$/
  return reg.test(str) || reg1.test(str)
}

function isChineseName(str) {
  /** 中文姓名 */
  return /^([\u4e00-\u9fa5·]{2,16})$/.test(str)
}

function isEnglishName(str) {
  /** 英文姓名 */
  return /(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/.test(str)
}

function isBankCardNumber(str) {
  /** 银行卡号16位或19位 */
  return /^([1-9]{1})(\d{15}|\d{18})$/.test(str)
}

function isCarNumber(str) {
  /** 新能源车牌号 */
  let reg = /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/
  /** 非新能源车牌号 */
  let reg1 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
  return reg.test(str) || reg1.test(str)
}

function isEmail(str) {
  return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(str)
}

function isIDCardNumber(str) {
  /** 一代身份证号15位数字 */
  let reg = /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/
  /** 二代身份证号18位数字，最后一位可能为X */
  let reg1 = /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/
  return reg.test(str) || reg1.test(str)
}

function isPassportNumber(str) {
  /** 护照 */
  return /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/.test(str)
}

2. 常用的日期格式化

/** 日期 & 时间 */

function formatDate(date, formatString) {
  /** @formatString 格式化日期 yyyy-MM-dd hh:mm:ss */
  let mydate = new Date(date)
  let dateObj = {
    y: mydate.getFullYear(),
    m: (mydate.getMonth() + 1 < 10)?'0'+(mydate.getMonth() + 1):mydate.getMonth() + 1,
    d: (mydate.getDate() < 10)?'0'+mydate.getDate():mydate.getDate(),
    h: (mydate.getHours() < 10)?'0'+mydate.getHours():mydate.getHours(),
    min: (mydate.getMinutes() < 10)?'0'+mydate.getMinutes():mydate.getMinutes(),
    s: (mydate.getSeconds() < 10)?'0'+mydate.getSeconds():mydate.getSeconds()
  }
  let res = formatString.replace(/yyyy/g, dateObj.y)
  res = res.replace(/MM/g, dateObj.m)
  res = res.replace(/dd/g, dateObj.d)
  res = res.replace(/hh/g, dateObj.h)
  res = res.replace(/mm/g, dateObj.min)
  res = res.replace(/ss/g, dateObj.s)
  return res
}


function formatDateToChineseDesc(date) {
  /** @return 语义化的时间描述：'n月前'/'n周前'/'n天前'/'n小时前'/'n分钟前'/'刚刚' */
  let mydate = Math.round(new Date(date).getTime()/1000)
  let min = 60, hour = min*60, day = hour * 24, month = day * 30, year = month * 12
  let diffVal = Math.round(new Date().getTime()/1000) - mydate
  let diffMonth = diffVal/month, 
      diffWeek = diffVal/(7*day),
      diffDay = diffVal/day,
      diffHour = diffVal/hour,
      diffMinute = diffVal/min
  if(diffMonth > 3) {
    return `${mydate.getFullYear()}-${mydate.getMonth() + 1}-${mydate.getDate()}`
  }
  if(diffMonth > 1) {
    return `${parseInt(diffMonth)}月前`
  }
  if(diffWeek > 1) {
    return `${parseInt(diffWeek)}周前`
  }
  if(diffDay > 1) {
    return `${parseInt(diffDay)}天前`
  }
  if(diffHour > 1) {
    return `${parseInt(diffHour)}小时前`
  }
  if(diffMinute > 1) {
    return `${parseInt(diffMinute)}分钟前`
  }
  return '刚刚'
}

3. Dom.js 常用DOM操作

const Dom = {
  loadScript: function (url) { /*动态加载js脚本*/
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
  },
  loadScriptString: function (code) { /*动态加载js代码*/
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
      script.appendChild(document.createTextNode(code));
    } catch (ex) {
      script.text = code;
    }
    document.body.appendChild(script);
  },
  loadStyles: function (url) { /*动态加载样式*/
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
  },
  loadStylesString: function (css) {  /*动态加载样式代码*/
    var style = document.createElement("style");
    style.type = "text/css";
    try {
      style.appendChild(document.createTextNode(css));
    } catch (ex) {
      style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
  },
};
export default Dom;

4. Bom.js 常用BOM操作

const Bom = {
  /*
    解析当前url，获得查询字符串参数
    例如 http://baidu.com/web?num=1&age=19&job=engineer
    返回args
    args["num"] //  1
    args["job"]  // engineer
  */
  getQueryString: function (){ //获取当前页面的请求参数
    var qs = (location.search.length > 0 ? location.search.substring(1) : "");
    var args = {};
    var items = qs.length ? qs.split("&") : [];
    var item = null;
    var name = null;
    var value = null;
    len = items.length;
    for (var i = 0; i < len; i++) {
      item = items[i].split("=");
      name = decodeURIComponent(item[0]);
      value = decodeURIComponent(item[1]);
      if (name.length) {
        args[name] = value;
      }
    }
    return args;
  },
  /*
    检测滚动条是否滚动到底部
    返回true 表示滚动到底部
    返回false 表示未滚动到底部
    调用方法： $(document).scroll(function() {  scrollBottom(); });
  */
  isScrollBottom: function () { //检测滚动条是否滚动到底部
    if (document.body.scrollHeight - document.body.scrollTop <= window.screen.availHeight) {
      return true;
    }
    return false;
  },
  /*
    检测浏览器是否装有特定插件
    例如检测浏览器是否有Flash插件
    hasPlugin("Flash")
    返回true 表示有
    返回false 表示没有
  */
  hasPlugin: function (name) { //检测浏览器是否装有特定插件
    name = name.toLowerCase();
    for (var i = 0; i < navigator.plugins.length; i++) {
      if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
        return true;
      }
    }
    return false;
  },
  /*
    检测IE中的插件
    在IE中检测插件的唯一方式是使用专有的ActiveXObject类型，并尝试插件一个特定插件的实例
    传入参数必须是插件的COM标识符，例如Flash的标识符是ShockwaveFlash.ShockwaveFlash
  */
  hasIEPlugin: function (name) {  //检测IE中的插件
    try {
      new ActiveXObject(name);
      return true;
    } catch (ex) {
      return false;
    }
  },
}
export default Bom;

5. DataType.js 数据类型判断


/**************************  变量类型检测  **************************/
export const DataType = {
  isNumber:function(value){
    return Object.prototype.toString.call(value) == '[object Number]';
  },
  isString:function(value){
    return Object.prototype.toString.call(value) == '[object String]';
  },
  isArray: function (value) { 
    return Object.prototype.toString.call(value) == '[object Array]';
  },
  isBoolean: function (value) { 
    return Object.prototype.toString.call(value) == '[object Boolean]';
  },
  isUndefined: function (value) { 
    return value === undefined;
  },
  isNull: function (value) { 
    return value === null;
  },
  isFunction: function (value) { 
    return Object.prototype.toString.call(value) == '[object Function]';
  },
  isSymbol: function (value) { 
    return Object.prototype.toString.call(value) == '[object Symbol]';
  },
  isObject:function(value){
    return (Object.prototype.toString.call(value) == '[object Object]'
      ||
      // if it isn't a primitive value, then it is a common object
      (
        !isNumber(value) &&
        !isString(value) &&
        !isBoolean(value) &&
        !isArray(value) &&
        !isNull(value) &&
        !isFunction(value) &&
        !isUndefined(value) &&
        !isSymbol(value)
      )
    );
  },
  isEmptyArray:function(array){
    if (!isArray(array)) {
      return false;
    }
    return array.length > 0 ? false : true;
  },
  isEmptyObject:function(obj){
    if (!isObject(obj)) {
      return false;
    }
    for (let key in obj) {
      return false;
    }
    return true;
  }
};
/**************************  变量类型检测  *************************/

6. Function.js 常用工具函数

/** 函数节流 */
function throttle(fn, delay) {
  /** 有个需要频繁触发的函数fn，出于性能优化的角度，在规定时间delay内，只让函数触发的第一次生效，后面不生效 
   * 一个函数执行一次后，只有大于设定的执行周期后才会执行第二次
  */
  var lastTime = 0
  return function() {
    let nowTime = Date.now()
    if(nowTime - lastTime > delay) {
      fn.call(this)
      lastTime = nowTime
    }
  }
}


/** 防抖函数 */
function debounce(fn, delay) {
  /** 一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面不生效 */
  var timer = null
  return function() {
    clearTimeout(timer)
    timer = setTimeout(function() {
      fn.apply(this)
    }, delay)
  }
}

7. Http.js 请求函数封装

import axios from 'axios';
axios.defaults.baseURL = "http://****/api";

const Http = {
  get:function(url,data){
    if(localStorage.token){
      axios.defaults.headers.common['token'] = localStorage.token;
    }
    return new Promise((resolve,reject)=>{
      axios.get(url, {params:data})
      .then(function(res){
        if(res.data.code===200){
          resolve(res.data.data);
        }else{
          reject(res.data.message);
        }
      })
      .catch(function(err){
        alert(err);
      })
    })
  },
  post:function(url,data){
    return new Promise((resolve,reject)=>{
      axios.post(url,data)
      .then(function (res) {
        if (res.data.code === 200) {
          resolve(res.data.data);
        } else {
          reject(res.data.message);
        }
      })
      .catch(function (err) {
        alert(err);
      })
    })
  },
  put:function(url,data){
    return new Promise((resolve,reject)=>{
      axios.put(url, data)
      .then(function (res) {
        if (res.data.code === 200) {
          resolve(res.data.data);
        } else {
          reject(res.data.message);
        }
      })
      .catch(function (err) {
        alert(err);
      })
    })
  },
  delete:function(url,data){
    return new Promise((resolve,reject)=>{
      axios.delete(url, data)
      .then(function (res) {
        if (res.data.code === 200) {
          resolve(res.data.data);
        } else {
          reject(res.data.message);
        }
      })
      .catch(function (err) {
        alert(err);
      })
    })
  }
};
export default Http;

8. WXHttp.js 微信请求函数封装

const baseURL = 'http://****/api/';
const WXHttp = {
    get:function(url,data,isLoading){
        let token = wx.getStorageSync('token');
        let header = {
            'content-type': 'application/json'
        };        
        if(token){  //请求头是否携带token
            header['token'] = token;
        }
        if (isLoading){  //是否显示加载中圆圈
            wx.showLoading({
                title: '加载中',
            })  
        }
        return new Promise((resolve,reject)=>{
            wx.request({
                url: baseURL+url,
                header:header,
                method:'GET',
                data:data,
                success:function(res){
                    if (isLoading) {
                        wx.hideLoading();
                    }
                    if (res.data.code==200){
                        resolve(res.data.data);
                    }else{
                        console.log(res.data);
                        reject(res.data.message);
                    }
                },
                fail:function(err){
                    reject(err);
                }
            });
        }).catch(function(err){
            if (isLoading) {
                wx.hideLoading();
            }
            wx.showToast({
                title: err,
                icon: 'none',
                duration: 2000
            })
        })
    },
    post:function(url,data,isLoading){
        let token = wx.getStorageSync('token');
        let header = {
            'content-type': 'application/json'
        };
        if (token) {  //请求头是否携带token
            header['token'] = token;
        }
        if (isLoading) {  //是否显示加载中圆圈
            wx.showLoading({
                title: '加载中',
            })
        }
        return new Promise((resolve, reject) => {
            wx.request({
                url: baseURL + url,
                header: header,
                method: 'POST',
                data: data,
                success: function (res) {
                    if (isLoading) {
                        wx.hideLoading();
                    }
                    if (res.data.code == 200) {
                        resolve(res.data.data);
                    } else {
                        console.log(res.data);
                        reject(res.data.message);
                    }
                },
                fail: function (err) {
                    reject(err);
                }
            });
        }).catch(function (err) {
            if (isLoading) {
                wx.hideLoading();
            }
            wx.showToast({
                title: err,
                icon: 'none',
                duration: 2000
            })
        })
    },
    put:function(url,data,isLoading){
        let token = wx.getStorageSync('token');
        let header = {
            'content-type': 'application/json'
        };
        if (token) {  //请求头是否携带token
            header['token'] = token;
        }
        if (isLoading) {  //是否显示加载中圆圈
            wx.showLoading({
                title: '更新中',
            })
        }
        return new Promise((resolve, reject) => {
            wx.request({
                url: baseURL + url,
                header: header,
                method: 'PUT',
                data: data,
                success: function (res) {
                    if (isLoading) {
                        wx.hideLoading();
                    }
                    if (res.data.code == 200) {
                        resolve(res.data.data);
                    } else {
                        console.log(res.data);
                        reject(res.data.message);
                    }
                },
                fail: function (err) {
                    reject(err);
                }
            });
        }).catch(function (err) {
            if (isLoading) {
                wx.hideLoading();
            }
            wx.showToast({
                title: err,
                icon: 'none',
                duration: 2000
            })
        })
    },
    delete:function(url,data,isLoading){
        let token = wx.getStorageSync('token');
        let header = {
            'content-type': 'application/json'
        };
        if (token) {  //请求头是否携带token
            header['token'] = token;
        }
        if (isLoading) {  //是否显示加载中圆圈
            wx.showLoading({
                title: '删除中',
            })
        }
        return new Promise((resolve, reject) => {
            wx.request({
                url: baseURL + url,
                header: header,
                method: 'DELETE',
                data: data,
                success: function (res) {
                    if (isLoading) {
                        wx.hideLoading();
                    }
                    if (res.data.code == 200) {
                        resolve(res.data.data);
                    } else {
                        console.log(res.data);
                        reject(res.data.message);
                    }
                },
                fail: function (err) {
                    reject(err);
                }
            });
        }).catch(function (err) {
            if (isLoading) {
                wx.hideLoading();
            }
            wx.showToast({
                title: err,
                icon: 'none',
                duration: 2000
            })
        })
    }
};
export default WXHttp;

墨霁青玉

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】将常用的功能封装成函数

目录1. 常用的正则判断2. 常用的日期格式化3. Dom.js 常用DOM操作4. Bom.js 常用BOM操作5. DataType.js 数据类型判断6. Function.js 常用工具函数7. Http.js 请求函数封装8. WXHttp.js 微信请求函数封装1. 常用的正则判断/** 正则检验 */function isP...
复制链接

扫一扫

专栏目录