打造自己的javascript库

Posted 2020-10-24 mhxy13867806343

　　作为一线程序猿，要想少加班、抽空把妹，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，可以定义自己的*.js文件或发布到 npm，以提高开发效率。

    // 1，获取滚动条至顶部的距离
    // 返回num

1 function getScrollTop(){
2         return (document.documentElement &&
3                 document.documentElement.scrollTop) ||
4                 document.body.scrollTop
5     }

    // 2,随机生成颜色
    // 返回str

1    function randomColor(){
2         return  ‘#‘ +    
3         (function(color){    
4             return (color +=  ‘0123456789abcdef‘[Math.floor(Math.random()*16)])    
5               && (color.length == 6) ?  color : arguments.callee(color);    
6           })(‘‘);    
7     }

// 3，获取浏览器类型和版本
    // 返回str

 1  function getExplore() {   
 2         var sys = {},
 3                 ua = navigator.userAgent.toLowerCase(),
 4                 s;
 5                 (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
 6                 (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
 7                 (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
 8                 (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
 9                 (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
10                 (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
11                 (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
12             
13                 // 根据关系进行判断
14                 if(sys.ie) return (‘IE: ‘+ sys.ie)
15                 if (sys.edge) return (‘EDGE: ‘ + sys.edge)
16                 if (sys.firefox) return (‘Firefox: ‘ + sys.firefox)
17                 if (sys.chrome) return (‘Chrome: ‘ + sys.chrome)
18                 if (sys.opera) return (‘Opera: ‘ + sys.opera)
19                 if (sys.safari) return (‘Safari: ‘+ sys.safari)
20                 return ‘Unkonwn‘
21     }

1   //4 指定范围随机数
2     //返回num
3     function randomNum(min, max) {
4         return Math.floor(min + Math.random() * (max - min));
5     } 

1 // 5判断是否为邮箱地址
2     // 返回true/false
3     function isEmail(str) {
4         return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
5     }

1    // 6判断是否为省份证
2     // 返回true/false
3     function isIdCard(str) {
4     return /^(^[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])$)$/.test(str)
5     }

1     // 7判断是否为手机号
2      // 返回true/false
3     function isPhoneNum(str) {
4         return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
5     }

1    // 8判断是否为url地址
2     // 返回true/false
3     function isUrl(str) {
4            return /[[email protected]:%._\+~#=]{2,256}\.[a-z]{2,6}\b([[email protected]:%_\+.~#?&//=]*)/i.test(str);
5     }

 1   // 9现金转大写
 2     // 返回str
 3     function digitUppercase(n) {
 4         var fraction = [‘角‘, ‘分‘];
 5         var digit = [‘零‘, ‘壹‘, ‘贰‘, ‘叁‘, ‘肆‘,‘伍‘, ‘陆‘, ‘柒‘, ‘捌‘, ‘玖‘];
 6         var unit = [[‘元‘, ‘万‘, ‘亿‘],[‘‘, ‘拾‘, ‘佰‘, ‘仟‘]];
 7         var head = n < 0 ? ‘欠‘: ‘‘;
 8         var n = Math.abs(n);
 9         var s = ‘‘;
10         for (var i = 0; i < fraction.length; i++) {
11                 s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ‘‘);
12            }
13         s = s || ‘整‘;
14         n = Math.floor(n);
15         for (var i = 0; i < unit[0].length && n > 0; i++) {
16             var p = ‘‘;
17             for (var j = 0; j < unit[1].length && n > 0; j++) {
18                 p = digit[n % 10] + unit[1][j] + p;
19                    n = Math.floor(n / 10);
20                }
21                s = p.replace(/(零.)*零$/, ‘‘).replace(/^$/, ‘零‘) + unit[0][i] + s;
22             }
23     
24         return head + s.replace(/(零.)*零元/, ‘元‘).replace(/(零.)+/g, ‘零‘).replace(/^整$/, ‘零元整‘);
25     };

 1  // 10，序列化对象
 2         function stringfyQueryString(obj) {
 3             if (!obj) return ‘‘;
 4             var pairs = [];
 5             for (var key in obj) {       
 6                 var value = obj[key];
 7                 if (value instanceof Array) {
 8                     for (var i = 0; i < value.length; ++i) {
 9                         pairs.push(encodeURIComponent(key + ‘[‘ + i + ‘]‘) + ‘=‘ + encodeURIComponent(value[i]));
10                     }
11                 
12                     continue;
13                 }
14                 pairs.push(encodeURIComponent(key) + ‘=‘ + encodeURIComponent(obj[key]));
15             }
16             return pairs.join(‘&‘);
17         }

   // 11,数组转字符串
        function arrayToString(arr){
            var string=arr.join(‘,‘);
            return string;
        }

1     // 12,字符串转数组
2         function stringToArray(str){
3             var array = str.split(‘,‘);
4             return array;
5         }

 1      //13,在min和max之间取出n个随机不重复的数
 2         function getNum(n,min,max){
 3             for(var i=0,arr=[];i<n;i++){
 4                 var r=Math.floor(Math.random()*(max-min+1)+min);
 5                 if(arr.indexOf(r)==-1){
 6                     arr.push(r);
 7                 }else{
 8                     i--;
 9                 }
10             }
11             return arr;
12         }

 1         //14,在min和max之间取出n个不重复的随机数
 2         function get(n,min,max){
 3             for(var i=0,arr=[];i<n;i++){
 4                 arr[i]=Math.floor(Math.random()*(max-min+1)+min);
 5                 for(var j=0;j<i;j++){
 6                     if(arr[i]==arr[j]){
 7                         i--;
 8                     
 9                     }
10                 }
11             }
12             return arr;
13         }

 1         //原生js仿jq中ajax(）请求
 2 
 3         //支持跨域
 4 
 5         function ajax(obj) {
 6             var xmlhttp, type, url, async, dataType, data;
 7             if (typeof(obj) != ‘object‘)  return false;
 8             
 9             type = obj.type == undefined ? ‘POST‘ : obj.type.toUpperCase();
10             url = obj.url == undefined ? window.location.href : obj.url;
11             async = obj.async == undefined ? true : obj.type;
12             dataType = obj.dataType == undefined ? ‘html‘ : obj.dataType.toUpperCase();
13             data = obj.data == undefined ? {} : obj.data;
14 
15 
16             var formatParams = function () {
17                 if (typeof(data) == "object") {
18                     var str = "";
19                     for (var pro in data) {
20                         str += pro + "=" + data[pro] + "&";
21                     }
22                     data = str.substr(0, str.length - 1);
23                 }
24                 if (type == ‘GET‘ || dataType == ‘JSONP‘) {
25                     if (url.lastIndexOf(‘?‘) == -1) {
26                         url += ‘?‘ + data;
27                     } else {
28                         url += ‘&‘ + data;
29                     }
30                 }
31             }
32             if (window.XMLHttpRequest) {
33                 xmlhttp = new XMLHttpRequest();
34             } else {
35                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
36             }
37 
38 
39             if (dataType == ‘JSONP‘) {
40                 if (typeof(obj.beforeSend) == ‘function‘)obj.beforeSend(xmlhttp);
41                 var callbackName = (‘jsonp_‘ + Math.random()).replace(".", "");
42                 var oHead = document.getElementsByTagName(‘head‘)[0];
43                 data.callback = callbackName;
44                 var ele = document.createElement(‘script‘);
45                 ele.type = "text/javascript";
46                 ele.onerror = function () {
47                     console.log(‘请求失败‘);
48                     obj.error && obj.error("请求失败");
49                 };
50 
51                 oHead.appendChild(ele);
52                 window[callbackName] = function (json) {
53                     oHead.removeChild(ele);
54                     window[callbackName] = null;
55                     obj.success && obj.success(json);
56                 };
57                 formatParams();
58                 ele.src = url;
59 
60 
61                 return ;
62             } else {
63                 formatParams();
64                 xmlhttp.open(type, url, async);
65                 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
66                 if (typeof(obj.beforeSend) == ‘function‘)obj.beforeSend(xmlhttp);
67                 xmlhttp.send(data);
68                 xmlhttp.onreadystatechange = function () {
69 
70                     if (xmlhttp.status != 200) {
71                         console.log(xmlhttp.status + ‘错误‘);
72                         obj.error && obj.error(xmlhttp.status + ‘错误‘);
73                         return ;
74                     }
75 
76                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
77 
78                         if (dataType == ‘JSON‘) {
79                             try {
80                                 res = JSON.parse(xmlhttp.responseText);
81                             } catch (e) {
82                                 console.log(‘返回的json格式不正确‘);
83                                 obj.error(‘返回的json格式不正确‘);
84                             }
85 
86                         } else if (dataType == ‘XML‘) {
87                             res = xmlhttp.responseXML;
88                         } else {
89                             res = xmlhttp.responseText;
90                         }
91 
92                         obj.success && obj.success(res);
93 
94                     }
95                 }
96             }
97         };

来源:前端大视界