JS开发过程中常用工具函数(持续更新。。。)

15 篇文章 0 订阅
3 篇文章 0 订阅

获取数据类型

/**
 * return Function、Number、String、Object、Array等
 */
function getDataType(value) {
    return Object.prototype.toString.call(value).slice(8, -1)
}
getDataType(() => {}) // Function
getDataType([1, 2]) // Array
getDataType({id: 1, name: '1'}) // Object
getDataType(1) // Number
getDataType('1') // String

判断数据是不是Object类型的数据

/**
 * return true 或 false
 */
function isObject(value) {
    return Object.prototype.toString.call(value) === '[object Object]'
}
isObject({id: 1, name: '1'}) // true
isObject(1) // false

判断数据是不是数组类型的数据

/**
 * return true 或 false
 */
function isArray(value) {
    return Object.prototype.toString.call(value) === '[object Array]'
}
isObject({id: 1, name: '1'}) // true
isObject(1) // false
// 将isArray挂载到Array上
Array.isArray = Array.isArray || isArray;

判断数据是不是正则对象

/**
 * return true 或 false
 */
function isRegExp(value) {
    return Object.prototype.toString.call(value) === '[object RegExp]'
}
isRegExp(/[\u4e00-\u9fa5]/gm) // true
isRegExp(1) // false

判断数据是不是时间对象

/**
 * return true 或 false
 */
function isDate(value) {
    return Object.prototype.toString.call(value) === '[object Date]'
}
isDate(new Date()) // true
isDate(1) // false

判断 value 是不是函数

/**
 * return true 或 false
 */
function isFunction(value) {
    return Object.prototype.toString.call(value) === '[object Function]'
}
isFunction(() => {}) // true
isFunction(1) // false

下划线转驼峰

/**
 * return 驼峰字符串
 */
function toHump(name) {
  return name.replace(/_(\w)/g, function(_, letter){
    return letter.toUpperCase();
  });
}
toHump('first_name') // firstName

驼峰转下划线

/**
 * return 下划线字符串
 */
function toLine(name) {
  return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}
toLine('firstName') // first_name

字符串首位大写

/**
 * return 首字符大写字符串
 */
function capitalize(str){
  return str.charAt(0).toUpperCase() + str.slice(1)
}
capitalize('firstName') // FirstName

识别各种浏览器及平台

//运行环境是浏览器
let inBrowser = typeof window !== 'undefined';
//运行环境是微信
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
//浏览器 UA 判断
let UA = inBrowser && window.navigator.userAgent.toLowerCase();
let isIE = UA && /msie|trident/.test(UA);
let isIE9 = UA && UA.indexOf('msie 9.0') > 0;
let isEdge = UA && UA.indexOf('edge/') > 0;
let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
let isChrome = UA && /chrome/d+/.test(UA) && !isEdge;

获取浏览器信息

function getExplorerInfo() {
    let t = navigator.userAgent.toLowerCase();
    return 0 <= t.indexOf("msie") ? { //ie < 11
        type: "IE",
        version: Number(t.match(/msie ([d]+)/)[1])
    } : !!t.match(/trident/.+?rv:(([d.]+))/) ? { // ie 11
        type: "IE",
        version: 11
    } : 0 <= t.indexOf("edge") ? {
        type: "Edge",
        version: Number(t.match(/edge/([d]+)/)[1])
    } : 0 <= t.indexOf("firefox") ? {
        type: "Firefox",
        version: Number(t.match(/firefox/([d]+)/)[1])
    } : 0 <= t.indexOf("chrome") ? {
        type: "Chrome",
        version: Number(t.match(/chrome/([d]+)/)[1])
    } : 0 <= t.indexOf("opera") ? {
        type: "Opera",
        version: Number(t.match(/opera.([d]+)/)[1])
    } : 0 <= t.indexOf("Safari") ? {
        type: "Safari",
        version: Number(t.match(/version/([d]+)/)[1])
    } : {
        type: t,
        version: -1
    }
}

检测是否为PC端浏览器模式

/**
 * return true 或 false
 */
function isPCBroswer() {
    let e = navigator.userAgent.toLowerCase()
        , t = "ipad" == e.match(/ipad/i)
        , i = "iphone" == e.match(/iphone/i)
        , r = "midp" == e.match(/midp/i)
        , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
        , a = "ucweb" == e.match(/ucweb/i)
        , o = "android" == e.match(/android/i)
        , s = "windows ce" == e.match(/windows ce/i)
        , l = "windows mobile" == e.match(/windows mobile/i);
    return !(t || i || r || n || a || o || s || l)
}

获取Url参数,返回一个对象

/**
 * return 参数对象
 */
function getUrlParam(url){
    // let url = document.location.toString();
    let arrObj = url.split("?");
    let params = Object.create(null)
    if (arrObj.length > 1){
        arrObj = arrObj[1].split("&");
        arrObj.forEach(item=>{
            item = item.split("=");
            params[item[0]] = item[1]
        })
    }
    return params;
}
getUrlParam('http://192.168.0.1:8080?id=1&name=2') // {id: '1', name: '2'}

全屏

function toFullScreen(){
    let elem = document.body;
    elem.webkitRequestFullScreen
    ? elem.webkitRequestFullScreen()
    : elem.mozRequestFullScreen
    ? elem.mozRequestFullScreen()
    : elem.msRequestFullscreen
    ? elem.msRequestFullscreen()
    : elem.requestFullScreen
    ? elem.requestFullScreen()
    : alert("浏览器不支持全屏");
}

退出全屏

function exitFullscreen(){
    let elem = parent.document;
    elem.webkitCancelFullScreen
    ? elem.webkitCancelFullScreen()
    : elem.mozCancelFullScreen
    ? elem.mozCancelFullScreen()
    : elem.cancelFullScreen
    ? elem.cancelFullScreen()
    : elem.msExitFullscreen
    ? elem.msExitFullscreen()
    : elem.exitFullscreen
    ? elem.exitFullscreen()
    : alert("切换失败,可尝试Esc退出");
}

禁止某些键盘事件

document.addEventListener('keydown', function(event){
    return !(
        112 == event.keyCode || //F1
        123 == event.keyCode || //F12
        event.ctrlKey && 82 == event.keyCode || //ctrl + R
        event.ctrlKey && 78 == event.keyCode || //ctrl + N
        event.shiftKey && 121 == event.keyCode || //shift + F10
        event.altKey && 115 == event.keyCode || //alt + F4
        "A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签
    ) || (event.returnValue = false)
});

禁止右键、选择、复制

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(event){
        return event.returnValue = false
    })
});
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZwLemon

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值