JS功能封装

最新推荐文章于 2022-12-05 09:18:55 发布
置顶 最新推荐文章于 2022-12-05 09:18:55 发布
阅读量363 收藏
点赞数 1
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46218968/article/details/108060553
版权

适配rem

    /*适配rem*/
    //使用方式很简单，比如效果图上，有张图片。宽高都是100px;
    //样式写法就是
    // img{
    //     width:1rem;
    //     height:1rem;
    // }
    //这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
    //比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;
    getFontSize: function() {
        var doc = document,
            win = window;
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
                if (clientWidth > 750) {
                    clientWidth = 750
                }
                //设置根元素font-size大小
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        //屏幕大小改变，或者横竖屏切换时，触发函数
        win.addEventListener(resizeEvt, recalc, false);
        //文档加载完成时，触发函数
        doc.addEventListener('DOMContentLoaded', recalc, false);
    },

判断是否是微信浏览器

function isWechat() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

判断是否是PC/WAP端

function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

URL参数

    /*设置，获取URL参数*/
    //获取url参数
    //getUrlPrmt('segmentfault.com/write?draftId=122000011938')
    //Object{draftId: "122000011938"}
    getUrlPrmt: function(url) {
        url = url ? url : window.location.href;
        let _pa = url.substring(url.indexOf('?') + 1),
            _arrS = _pa.split('&'),
            _rs = {};
        for (let i = 0, _len = _arrS.length; i < _len; i++) {
            let pos = _arrS[i].indexOf('=');
            if (pos == -1) {
                continue;
            }
            let name = _arrS[i].substring(0, pos),
                value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
            _rs[name] = value;
        }
        return _rs;
    },
    //设置url参数
    //setUrlPrmt({'a':1,'b':2})
    //a=1&b=2
    setUrlPrmt: function(obj) {
        let _rs = [];
        for (let p in obj) {
            if (obj[p] != null && obj[p] != '') {
                _rs.push(p + '=' + obj[p])
            }
        }
        return _rs.join('&');
    },

判断是否为空

function isEmpty(val){
    if(typeof val == "undefined" || val == null || val == ""){
        return true;
    } else {
        return false;
    }
}

设置、获取、删除、清除sessionStorage（localStorage也是同样操作）

function setSessionStorage(key, value) {
  sessionStorage.setItem(key, value)//设置
}

function getSessionStorage(key) {
  return sessionStorage.getItem(key)//获取
}

function delSessionStorage(key) {
  sessionStorage.removeItem(key) //清除单个
}

function clearSessionStorage() {
  sessionStorage.clear()//清除全部
}
//

数组方法封装

// 数组最小值
function arrayMin(arr) {
  return Math.min.apply(null, arr)
}
// 数组并集
function arrayUnion(arr1, arr2) {
  return [...new Set([...arr1, ...arr2])]
}
// 数组交集
function arrayIntersect(arr1, arr2) {
  // let arr3 = [...arr1].filter(value => arr2.includes(value))
  // return [...new Set([...arr3])]
  return [...new Set([...arr1].filter(value => arr2.includes(value)))]
}
// 数组差集
function arrayDiff(arr1, arr2) {
  return [...new Set([...arr1].filter(value => !arr2.includes(value)))]
}
// 数组去重
function arrayUnique(arr) {
  return Array.from(new Set(arr))
}

正则匹配

      /*检测字符串*/
      //checkType('165226226326','phone')
      //false
      //大家可以根据需要扩展
      var checkType = function(str, type) {
          switch (type) {
              case 'email'://邮箱
                  return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
              case 'phone'://手机
                  return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
              case 'tel'://座机？
                  return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
              case 'number'://数字
                  return /^[0-9]$/.test(str);
              case 'english'://英语
                  return /^[a-zA-Z]+$/.test(str);
              case 'chinese'://中文
                  return /^[\u4E00-\u9FA5]+$/.test(str);
              case 'lower'://小写
                  return /^[a-z]+$/.test(str);
              case 'upper'://大写
                  return /^[A-Z]+$/.test(str);
              default:
                  return true;
          }
      }
  //身份证格式验证
  function checkIdCard (idCard) {
    var regIdCard = /^(^[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])$)$/
    //如果通过该验证，说明身份证格式正确，但准确性还需计算
    if (regIdCard.test(idCard)) {
      if (idCard.length == 18) {
        var idCardWi = new Array(7,  9,  10,  5,  8,  4,  2,  1,  6,  3,  7,  9,  10,  5,  8,  4,  2)  //将前17位加权因子保存在数组里
        var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2) //这是除以11后，可能产生的11位余数、验证码，也保存成数组
        var idCardWiSum = 0 //用来保存前17位各自乖以加权因子后的总和
        for (var i = 0; i < 17; i++) {
          idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i]
        }
        var idCardMod = idCardWiSum % 11 //计算出校验码所在数组的位置
        var idCardLast = idCard.substring(17) //得到最后一位身份证号码
        //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
        if (idCardMod == 2) {
          if (idCardLast == 'X' || idCardLast == 'x') {
            return true
          } else {
            return false
          }
        } else {
          //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
          if (idCardLast == idCardY[idCardMod]) {
            return true
          } else {
            return false
          }
        }
      }
    } else {
      return false
    }
  }

检测密码强度

    /*检测密码强度*/
    //checkPwd('12asdASAD')
    //3(强度等级为3)
    var checkPwd = function(str) {
        var nowLv = 0;
        if (str.length < 6) {
            return nowLv
        };
        if (/[0-9]/.test(str)) {
            nowLv++
        };
        if (/[a-z]/.test(str)) {
            nowLv++
        };
        if (/[A-Z]/.test(str)) {
            nowLv++
        };
        if (/[\.|-|_]/.test(str)) {
            nowLv++
        };
        return nowLv;
    }

日期格式化

//格式如：2020-08-17 16:11:18
var curentTime = function (time) {
var d = time ? new Date(time) : new Date();
var localTime = d.getTime();
var localOffset = d.getTimezoneOffset() * 60000; //获得当地时间偏移的毫秒数
var utc = localTime + localOffset + 3600000 * 8;
var now = new Date(utc);

var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //秒

var clock = year + "-";

if (month < 10)
clock += "0";

clock += month + "-";

if (day < 10)
clock += "0";

clock += day + " ";

if (hh < 10)
clock += "0";

clock += hh + ":";

if (mm < 10)
clock += "0";

clock += mm + ":";

if (ss < 10)
clock += "0";

clock += ss;

return (clock);
}
//格式如 2020年08月17日 16:19:54
    var getDates = function(data) {
        var str = ""; //存储时间的字符串
        //获取年
        var year = dt.getFullYear();
        //获取月
        var month = dt.getMonth() + 1;
        //获取日
        var day = dt.getDate();
        //获取小时
        var hour = dt.getHours();
        //获取分钟
        var min = dt.getMinutes();
        //获取秒
        var sec = dt.getSeconds();
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
        return str;
    }

去除空格

    //  type 1-所有空格  2-前后空格  3-前空格 4-后空格
    var trim = function(str, type) {
        switch (type) {
            case 1:
                return str.replace(/\s+/g, "");
            case 2:
                return str.replace(/(^\s*)|(\s*$)/g, "");
            case 3:
                return str.replace(/(^\s*)/g, "");
            case 4:
                return str.replace(/(\s*$)/g, "");
            default:
                return str;
        }
    }

字符串处理

    /*type
    1:首字母大写   
    2：首页母小写 其他大写
    3：大小写转换
    4：全部大写
    5：全部小写
     */
    //changeCase('asdasd',1)
    //Asdasd
    changeCase: function(str, type) {
        function ToggleCase(str) {
            var itemText = ""
            str.split("").forEach(
                function(item) {
                    if (/^([a-z]+)/.test(item)) {
                        itemText += item.toUpperCase();
                    } else if (/^([A-Z]+)/.test(item)) {
                        itemText += item.toLowerCase();
                    } else {
                        itemText += item;
                    }
                });
            return itemText;
        }

        switch (type) {
            case 1:
                return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
                    return v1.toUpperCase() + v2.toLowerCase();
                });
            case 2:
                return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
                    return v1.toLowerCase() + v2.toUpperCase();
                });
            case 3:
                return ToggleCase(str);
            case 4:
                return str.toUpperCase();
            case 5:
                return str.toLowerCase();
            default:
                return str;
        }
    },

返回数组（字符串）出现最多的元素和次数

    /*返回数组（字符串）出现最多的元素和次数*/
    //arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])默认情况，返回所有元素出现的次数
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)传参（rank=3），只返回出现次数排序前三的
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)传参（ranktype=1,rank=null），升序返回所有元素出现次数
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)传参（rank=3，ranktype=1），只返回出现次数排序（升序）前三的
    var getCount = function(arr, rank,ranktype) {
        var obj = {};
        var k, arr1 = [];
        //记录每一元素出现的次数
        for (var i = 0, len = arr.length; i < len; i++) {
            k = arr[i];
            if (obj[k]) {
                obj[k]++;
            } else {
                obj[k] = 1;
            }
        }
        //保存结果{el-'元素'，count-出现次数}
        for (var o in obj) {
            arr1.push({
                el: o,
                count: obj[o]
            });
        }
        //排序（降序）
        arr1.sort(function(n1, n2) {
            return n2.count - n1.count
        });
        //如果ranktype为1，则为升序，反转数组
        if (ranktype === 1) {
            arr1 = arr1.reverse();
        }
        var rank1 = rank || arr1.length;
        return arr1.slice(0, rank1);
    }

随机返回一个范围内的数字

    /*随机返回一个范围内的数字*/
    randomNumber: function(n1, n2) {
        //randomNumber(5,10)
        //返回5-10的随机整数，包括5，10
        if (arguments.length === 2) {
            return Math.round(n1 + Math.random() * (n2 - n1));
        }
        //randomNumber(10)
        //返回0-10的随机整数，包括0，10
        else if (arguments.length === 1) {
            return Math.round(Math.random() * n1)
        }
        //randomNumber()
        //返回0-255的随机整数，包括0，255
        else {
            return Math.round(Math.random() * 255)
        }
    },

现金汉字大写转换

    /*现金额大写转换*/
    //upDigit(168752632)
    //"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
    //upDigit(1682)
    //"人民币壹仟陆佰捌拾贰元整"
    //upDigit(-1693)
    //"欠人民币壹仟陆佰玖拾叁元整"
    upDigit: function(n) {
        var fraction = ['角', '分', '厘'];
        var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        var unit = [
            ['元', '万', '亿'],
            ['', '拾', '佰', '仟']
        ];
        var head = n < 0 ? '欠人民币' : '人民币';
        n = Math.abs(n);
        var s = '';
        for (var i = 0; i < fraction.length; i++) {
            s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        s = s || '整';
        n = Math.floor(n);
        for (var i = 0; i < unit[0].length && n > 0; i++) {
            var p = '';
            for (var j = 0; j < unit[1].length && n > 0; j++) {
                p = digit[n % 10] + unit[1][j] + p;
                n = Math.floor(n / 10);
            }
            //s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')+ unit[0][i] + s; 
            s = p + unit[0][i] + s;
        }
        return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
    },

生成六位不重复验证码函数

 function methods() {
                //定义存储6位验证码的字符串
                var a = "";
                //定义计数器
                var count = 0;
                while(true) { //生成验证码
                    var y = parseInt(Math.random() * 10);
                    //不重复判断，将生成的验证码y和最后的a去对比
                    if(a.indexOf(y) == -1) {
                        a = a + y;
                        count++;
                    }
                    if(count == 6) //判断验证码是不是6位
                    {
                        break;
                    }
                }
                return a;
            }

   console.log(methods());

获取验证码流程

    var _code = "";
    var isClick = true;
    function GetCode(ele) {

        var phone = $("#phone").val();

        if (phone == "") {
            window.wxc.xcConfirm("请输入手机号！", { title: "提示:" });
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            window.wxc.xcConfirm("手机号不合法！", { title: "提示:" });
            return;
        }

        if (isClick) {
            isClick = false;
            var timer;
            var n = 60;
            if (n == 60) {
                clearInterval(timer)
            };
            var that = ele;
            timer = setInterval(function () {
                n--;
                if (n == 0) {
                    clearInterval(timer);
                    that.innerHTML = "重新获取";
                    isClick = true;
                    n = 60;
                } else {
                    n >= 10 ? that.innerHTML = n + 's后重发' : that.innerHTML = '0' + n + 's后重发';
                }
            }, 1000);
        }
    }

防抖，节流

//节流
function throttle(fn, interval = 500) {
                let run = true;
                return function() {
                    if(!run) return;
                    run = false;
                    setTimeout(() => {
                        fn.apply(this, arguments);
                        run = true;
                    }, interval);
                };
  }
//防抖
 function debounce(fn, interval = 500) {
              let timeout = null;
            
              return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                  fn.apply(this, arguments);
                }, interval);
              };
   }

获取设备号，安卓，ios，web

function getDeviceType() {
  var deviceType = 'WEB' //其他
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 
  if (isAndroid) {
    deviceType = 'ANDROID'
  } else if (isiOS) {
    deviceType = 'IOS'
  }
  return deviceType
}
自救丶
关注
专栏目录
JS的DLL封装及调用
06-27
将JS脚本封装到DLL中，然后在前台调用。这样做的好处，即可以提高代码的可重用性，又可以提高代码的安全性，防止他人恶意修改。
JS一些功能封装
陈坚泓的博客
10-11 3932
Vue项目中一些功能封装 src/utils/index.js // 返回context父实例componentName const findUpwardComponent = (context, componentName) => { let parent = context.$parent let name = parent.$options.name while (pare...
js封装方法
qq_42063254的博客
03-10 573
1、输入一个值，返回其数据类型** function type(para) { return Object.prototype.toString.call(para) } 2、数组去重 function unique1(arr) { return [...new Set(arr)] } function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele]) {
优雅封装js功能块
aithena的博客
02-13 474
1、基础函数 简单明了，适用于片段代码。 function hello(){ // some code } 2、匿名函数 封闭性，不会烦扰区域块以外的代码，适合进行中小项目开发时的区分功能模块。 (function(){ // some code })(); 3、封装对象 如果开发一些js组件的时候，可以先创建一个对象，给这个对象属性和方法，让这个对象能够单独操作和可以和...
自己封装的js工具
Paul73500的博客
08-13 181
1 // 封装函数insertAfter;功能类似insertBefore(); 2 3 var div = document.getElementsByTagName("div")[0]; 4 var span = document.createElement("span"); 5 var a = document.getElementsByTagName(...
javascript封装的sqlite操作类实例
10-23
在前端JavaScript中操作SQLite数据库，主要依赖于浏览器端的SQLite API或者是在Node.js环境中利用一些封装好的库，例如sqlite3等。 在本文中，首先介绍了一个封装好的javascript操作类，它的目的是为了在JavaScript...
纯js封装的ajax功能函数与用法示例
10-18
在HTML页面中，需要引入我们封装的AJAX函数（如"ds.js"），然后通过JavaScript脚本调用这个函数。用户触发的事件（比如点击按钮）会调用封装好的AJAX函数，实现与服务器的数据交互，并根据返回结果执行相应的操作。 ...
微信js-sdk分享功能接口常用逻辑封装示例
10-21
本文将详细介绍如何使用微信JS-SDK进行分享功能的逻辑封装。 首先，微信JS-SDK提供了五个分享接口，分别是分享到朋友圈、发送给朋友、分享到QQ空间、分享到腾讯微博以及分享到QQ。需要注意的是，由于腾讯微博的市场...
JavaScript 原生的 tab 切换功能封装
最新发布
06-19
“JavaScript 原生的 tab 切换功能封装，能够兼容 IE6 及更高版本、谷歌浏览器、火狐浏览器、360 浏览器等所有
基于cropper.js封装vue实现在线图片裁剪组件功能
10-18
根据给定的文件信息，这里将详细介绍如何基于cropper.js封装Vue实现在线图片裁剪组件功能的相关知识点。 ### 知识点一：什么是cropper.js？ cropper.js是一个基于jQuery的图像裁剪插件，它允许用户通过鼠标拖拽...
两个封装好了的js组件，可以直接传参使用
09-02
两个封装好了的js组件（右键功能，搜索引擎），可以直接传参使用。
js常用功能封装整理(仿jQuery完成整合)(更新ing)
weixin_43659627的博客
03-21 308
仿jQuery完成之前自己的小插件整合 要查看我的其他小插件，可以点击https://blog.csdn.net/weixin_43659627 ;(function(global,obj,otherFunc){ global.$=global.JBest=obj||''; otherFunc(); })(this,{ /** *post请求默认发送FormDat...
js 常用功能函数封装
qq_34870529的博客
09-01 149
/** * 获取文件后缀名 * @param {*} filename * @returns */ function getExt(filename) { if (typeof filename =='string') { return filename .split('.') .pop() .toLowerCase() } else { throw new Error('f.
js:工作中封装好的一些方法(封装,常用功能)
weixin_34355559的博客
01-13 695
倒计时 &lt;script&gt; // 时间字符串 // var targetDate = '2019/11/11 00:00:00' // 将字符串格式化为日期对象 // var d = new Date(targetDate) // Mon Nov 11 2019 00:00:00 GMT+0800 (中国标准时间) // va...
把一个Js功能块封装到一个JS对象中
你我本如初见
02-03 4867
现在有个需求，我要把 XX 改变这个节点的值并给他添加点击动作（仅为测试用），这里我写怎么把这个功能封装成js类 我们的结果是： var t = new test({ object:jQuery("#main"), text:"我要修改的内容", click:function(){ alert("弹出内容"); } }); t.init(); 引入
js封装和作用域
xuexiaodong2009的专栏
07-01 2325
在编写web软件时，遇到一些可以共用js的情况，于是就想着如何封装js代码。    基本需求很简单，其实就是根据不同的情况封装js代码。基本的代码如下 var text="test"; var t=new functionTest(text); function functionTest(text) { va
js封装原理
从简的博客
10-27 3087
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。 function test1() { alert("外部引入") } 2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。 var obj={}; obj.a=function () { alert("对象调用") } 3、使用工厂模式,将代...
33个常用JavaScript功能已封装成方法
huang714的专栏
12-05 372
33个常用JavaScript功能
如何理解JS中的封装和继承？
麻球科技
10-18 533
封装：通过将一个方法或者属性声明为私用的，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束，这样可以是代码更可靠，更易于调试。封装是面向对象的设计的基石。 　　尽管JavaScript是一门面向对象的语言，可它并不具备将成员声明为公用或私用的任何内部机制，所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析，介绍什么是私有
JavaScript拖拽封装详解：功能与实现策略
本文档深入探讨了基于JavaScript的拖拽类封装，它提供了一种实用的方法来实现网页元素的旋转、缩放和平移功能。通过详细的示例代码和封装策略，本文旨在帮助开发者理解和应用这一技术，提升开发效率。 首先，文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值