JS（二十一）JS函数库封装（持续更新）

喜欢ヅ旅行 2022-06-07 09:11 285阅读 0赞

1、数字转化为千分位分割符格式

2、函数节流和去抖

3、计算两个日期相差的日期年月日等

/* 计算两日期相差的日期年月日等 */
        Date.prototype.dateDiff = function (objDate2, interval) {
            var d = this, i = {}, t = d.getTime(), t2 = objDate2.getTime();
            i['y'] = objDate2.getFullYear() - d.getFullYear();
            i['q'] = i['y'] * 4 + Math.floor(objDate2.getMonth() / 4) - Math.floor(d.getMonth() / 4);
            i['m'] = i['y'] * 12 + objDate2.getMonth() - d.getMonth();
            i['ms'] = objDate2.getTime() - d.getTime();
            i['w'] = Math.floor((t2 + 345600000) / (604800000)) - Math.floor((t + 345600000) / (604800000));
            i['d'] = Math.floor(t2 / 86400000) - Math.floor(t / 86400000);
            i['h'] = Math.floor(t2 / 3600000) - Math.floor(t / 3600000);
            i['n'] = Math.floor(t2 / 60000) - Math.floor(t / 60000);
            i['s'] = Math.floor(t2 / 1000) - Math.floor(t / 1000);
            return i[interval];
        };

\-----------------------------------------------------------------------------------------------------------------------------------------------------------

2017.12.15 更新

4、获取url中的参数

/* 获取URL查询参数 */
        window.getQueryString = function (param) {
            var sQuery = window.location.search;
            if (sQuery && sQuery.length > 0) {
                var arr = sQuery.substr(1).split('&');
                for (var i in arr) {
                    var pair = arr[i].split('=');
                    if (param && param.toLowerCase() === pair[0].toLowerCase() && pair[1]) {
                        return pair[1];
                    }
                }
            }
            return '';
        };

5、封装jquery的ajax方法

6、js断言函数

var assert = function(value, desc){
        var li = document.createElement('li');
        li.className = value ? 'pass' : 'fail';
        li.appendChild(document.createTextNode(desc));
        document.getElementById('result').appendChild(li);
    }

分配一个pass或者fail的样式，该样式却绝育断言参数的值value，并将新元素附加到body内的列表元素上。

\----------------------------------------------------------------

2018.3.27更新

8、js替换换行符和回车符

//替换所有的回车换行    
    var TransferString = function(content) {    
        var string = content;    
        try{    
            string=string.replace(/\r\n/g,"<br>")    
            string=string.replace(/\n/g,"<br>");    
        }catch(e) {    
            alert(e.message);    
        }    
        return string;    
    }

2018.10.16更新

9、去除对象多余属性（使用loadsh）

let model = {
        edb: null,
        cloud: null
    };
    param = _.pick(dataParam, _.keys(model));

model中是用户想要保存下来的属性，dataParam是要处理的对象。

10、判断变量类型

function type(obj) {
        if (obj == null) return String(obj)
        return typeof obj === 'object' ? class2type[ Object.prototype.toString.call(obj) ] || 'object' : typeof obj
    }

11、公共函数jquery封装

/*
     * @Description: In User Settings Edit
     * @Author: thluo
     * @Date: 2019-08-09 17:49:43
     * @LastEditTime: 2019-08-14 08:47:37
     * @LastEditors: Please set LastEditors
     */
    (function (window) {
        'use strict';
    
        window.delay = function (func, wait) {
            var args = Array.prototype.slice.call(arguments, 2);
            return setTimeout(function () {
                return func.apply(null, args);
            }, wait);
        };
    
        window.debounce = function (func, wait, immediate) {
            var timeout;
            return function () {
                var context = this, args = arguments;
                var later = function () {
                    timeout = null;
                    if (!immediate) {
                        func.apply(context, args);
                    }
                };
                if (immediate && !timeout) {
                    func.apply(context, args);
                }
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        };
    
        window.throttle = function (func, wait) {
            var context, args, timeout, throttling, more, result;
            var whenDone = debounce(
                function () {
                    more = throttling = false;
                }, wait);
            return function () {
                context = this;
                args = arguments;
                var later = function () {
                    timeout = null;
                    if (more) {
                        func.apply(context, args);
                    }
                    whenDone();
                };
                if (!timeout) {
                    timeout = setTimeout(later, wait);
                }
                if (throttling) {
                    more = true;
                } else {
                    result = func.apply(context, args);
                }
                whenDone();
                throttling = true;
                return result;
            };
        };
    
        /* 获取URL查询参数 */
        window.getQueryString = function (param) {
            var sQuery = window.location.search;
            if (sQuery && sQuery.length > 0) {
                var arr = sQuery.substr(1).split('&');
                for (var i in arr) {
                    var symbolIndex = arr[i].indexOf('=');
                    var key = arr[i].substr(0, symbolIndex);
                    var val = arr[i].substr(symbolIndex + 1);
    
                    if (param && param.toLowerCase() === key.toLowerCase() && val) {
                        return val;
                    }
                }
            }
            return '';
        };
    
        /* 得到日期年月日等加数字后的日期 */
        Date.prototype.dateAdd = function (number, interval) {
            var d = this;
            var k = {
                'y': 'FullYear',
                'q': 'Month',
                'm': 'Month',
                'w': 'Date',
                'd': 'Date',
                'h': 'Hours',
                'n': 'Minutes',
                's': 'Seconds',
                'ms': 'MilliSeconds'
            };
            var n = {'q': 3, 'w': 7};
            eval('d.set' + k[interval] + '(d.get' + k[interval] + '()+' + ((n[interval] || 1) * number) + ')');
            return d;
        };
    
        /* 计算两日期相差的日期年月日等 */
        Date.prototype.dateDiff = function (objDate2, interval) {
            var d = this, i = {}, t = d.getTime(), t2 = objDate2.getTime();
            i['y'] = objDate2.getFullYear() - d.getFullYear();
            i['q'] = i['y'] * 4 + Math.floor(objDate2.getMonth() / 4) - Math.floor(d.getMonth() / 4);
            i['m'] = i['y'] * 12 + objDate2.getMonth() - d.getMonth();
            i['ms'] = objDate2.getTime() - d.getTime();
            i['w'] = Math.floor((t2 + 345600000) / (604800000)) - Math.floor((t + 345600000) / (604800000));
            i['d'] = Math.floor(t2 / 86400000) - Math.floor(t / 86400000);
            i['h'] = Math.floor(t2 / 3600000) - Math.floor(t / 3600000);
            i['n'] = Math.floor(t2 / 60000) - Math.floor(t / 60000);
            i['s'] = Math.floor(t2 / 1000) - Math.floor(t / 1000);
            return i[interval];
        };
    
        /*
         * 转换数字为千分位分割格式
         * num: 待转换的数字
         */
        window.convertThousands = function (num) {
            var prefix, suffix, sign;
            if (isNaN(Number(num))) {
                return num;
            }
    
            sign = (num >= 0) ? '' : '-';
            num = (Math.abs(num) || 0).toString();
            if (num.indexOf('.') >= 0) {
                prefix = num.split('.')[0];
                suffix = num.split('.')[1];
            }
            else {
                prefix = num;
            }
    
            var result = '';
            while (prefix.length > 3) {
                result = ',' + prefix.slice(-3) + result;
                prefix = prefix.slice(0, prefix.length - 3);
            }
            if (prefix) {
                result = sign + prefix + result;
            }
    
            if (suffix) {
                result = result + '.' + suffix;
            }
            return result;
        };
    
        /*
         * 转换日期型数据为8位数字
         * date: 待转换的日期
         */
        window.convertDate2Number = function (date) {
            if (typeof(date) === 'object') {
                try {
                    return Number(date.getFullYear().toString()
                        + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1).toString()
                        + (date.getDate() >= 10 ? date.getDate().toString() : '0' + date.getDate()));
                }
                catch (ex) {
                    return null;
                }
            }
        };
    
        /*
         * 转换8位数字为日期型数据
         * num: 待转换的数字
         */
        window.convertNumber2Date = function (num) {
            if (num && (/^\d{8}$/).test(num)) {
                num = '' + num;
                try {
                    var d = new Date();
                    d.setFullYear(Number(num.substr(0, 4)));
                    d.setMonth(Number(num.substr(4, 2)) - 1);
                    d.setDate(Number(num.substr(6, 2)));
    
                    return d.toLocaleDateString();
                }
                catch (e) {
                    return null;
                }
            }
            return null;
        };
        window.DoubleFormat = function(numValue, digit, hidden) {
            return NumberFormat(numValue, digit, hidden);
        };
        
        //格式化数字（保留小数点num位，添加千分位分隔符）
        var NumberFormat = function(strNum, num, hidden) {
            hidden = false;
            if (strNum !== null) {
                strNum = (strNum / 1).toFixed(num).toString();
                var oprate = "";
                if (strNum.substring(0, 1) === "-" || strNum.substring(0, 1) === "+") {
                    oprate = strNum.substring(0, 1);
                    strNum = strNum.substr(1);
                }
                var dotposion = strNum.indexOf(".") > -1 ? strNum.indexOf(".") : strNum.length;
                var left = strNum.substring(0, dotposion);
                var right = strNum.substring(dotposion);
                var pos = left.length % 3;
                var result = left.substring(0, pos);
                while (pos + 3 <= left.length) {
                    if (result !== "") {
                        result += ",";
                    }
                    result += left.substring(pos, pos + 3);
                    pos += 3;
                }
                if (right.length > 1 && num > 0) {
                    if (parseInt(right.substr(1), 10) === 0 && hidden) {
                        if (parseInt(result) === 0)
                            return result;
                        else
                            return oprate + result;
                    }
                    else
                        return oprate + result + right;
                }
                else {
                    if (result === "0") {
                        return result;
                    }
                    return oprate + result;
                }
            }
            else
                return NullValueString;
        };
    
        window.UUID = function(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;
    
            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
            } else {
                // rfc4122, version 4 form
                var r;
    
                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
    
    
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random()*16;
                        uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
    
            return uuid.join('');
        };
        /**
         * 全角转换为半角
         * **/
        window.ToDBC = function(txtstring){ 
            var tmp = ""; 
            var regx = /[/\,/\./\+/\//\\/\!/\@/\#/\$/\%/\^/\&/\*()/\_/\+/\-/\=/\{/\}/\[/\]/\:/\"/\;/\'/\</\>/\?/\~]/;
            for(var i = 0; i < txtstring.length; i++){ 
                if(regx.test(txtstring[i])){
                    if(txtstring.charCodeAt(i)==32){ 
                        tmp= tmp+ String.fromCharCode(12288); 
                    } 
                    if(txtstring.charCodeAt(i)<127){ 
                        tmp=tmp+String.fromCharCode(txtstring.charCodeAt(i)+65248); 
                    } 
                }else{
                    tmp += txtstring[i];
                }
            } 
            return tmp; 
        }
        /**
         * 判断文本中是否包含中文
         * @param {String} str 文本
         * @returns {boolean} 包含中文返回True
         */
        window.isChinese = function(str){
            return !!/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi.exec(str);
        };
        /**
         * 判断变量类型，可判断所有变量类型
         * **/
        window.getVarType = function(target){
            var classToType = {};
            'Array Date RegExp Object Error'.split(' ').forEach(function(item){
                classToType['[object ' + item + ']'] = item.toLowerCase();
            });
    
            function type(target){
                if(target === null){
                    return String(target);
                }
                return typeof target === 'object' ? classToType[object.prototype.toString.call(target)] || 'object' : typeof target;
            }
            return type(target);
        }
    })(window);

12、excel函数导出封装

define(['jquery', 'echarts', 'datatable'], function ($, echarts) {
        'use strict';
    
        var excelTemplate = function ($el, fileName, lan) {
            var sheetsInfo = "",
                sheetsDate = "",
                picsDate = "";
            $.each($el, function (indexInArray, valueOfElement) {
                var table, sheetname;
                if (valueOfElement.tagName === "TABLE") {
                    if($(valueOfElement).attr('id')==='e-m-t'){
                        sheetname = lan ==='en'?'Monthly Data':'月度数据'
                    }else{
                        sheetname = lan === 'en' ? $(valueOfElement).attr('data-name-en') : $(valueOfElement).attr('data-name');
                    }              
                    if ($.fn.DataTable.isDataTable($el)) {
                        table = getDataTable(valueOfElement).html().replace(/=/g, '=3D').replace(/null/g, '');
                    } else {
                        var isMonth = $(valueOfElement).attr("id") === "e-m-t" ? true : false;
                        table = getNormalTable(valueOfElement, isMonth).html().replace(/=/g, '=3D');
                        if (sheetname === "") {
                            sheetname = $(valueOfElement).siblings('.eco-event-title').find('span').text();
                        }
                    }
                } else if (getChartData(valueOfElement) !== null) {
                    table = getChartTable(getChartData(valueOfElement), valueOfElement, indexInArray, fileName, lan).html().replace(/=/g, '=3D').replace(/null/g, '').replace(/undefined/g, '');
                    sheetname = fileName;
                    // 图片BASE64
                    //var picInfo = $(valueOfElement).find('canvas')[0].toDataURL(['image/png', 1]).slice(22);
                    const divWidth = 1188/window.devicePixelRatio;
                    const divHeight = 378/window.devicePixelRatio;
                    var $div = $('<div id="clonecharts" style="width:'+divWidth+'px;height:'+divHeight +'px"></div>')  
                    var mychart = echarts.init($(valueOfElement)[0]);
                    var myoptions = $.extend(true,{},mychart.getOption());
                    myoptions.animation =false;
                    var copycharts = echarts.init($div[0]);
                    copycharts.setOption(myoptions);
                    var picInfo=copycharts.getDataURL().slice(22);
    
                    var picDate = '\r\n' +
                        '\r\n------WIND----' +
                        '\r\nContent-Transfer-Encoding: base64' +
                        '\r\nContent-Location: file:///C:/MimeExcel/picture' + indexInArray +
                        '\r\nContent-Type: image/png' +
                        '\r\n' +
                        '\r\n' + picInfo;
                    picsDate = picsDate + picDate
                } else if (getChartData(valueOfElement) === null) {
                    return true;
                }
                // 单页头信息
                var sheetInfo = '\r\n<x:ExcelWorksheet>' +
                    '\r\n<x:Name>' + sheetname.replace(/:/g, '-') + '</x:Name>' +
                    '\r\n<x:WorksheetSource HRef=3D"MimeExcel/sheet' + indexInArray + '"/>' +
                    '\r\n</x:ExcelWorksheet>';
                //单页数据信息
                var sheetDate = '\r\n' +
                    '\r\n------WIND----' +
                    '\r\nContent-Location: file:///C:/MimeExcel/sheet' + indexInArray +
                    '\r\nContent-Transfer-Encoding: quoted-printable' +
                    '\r\nContent-Type: text/html; charset="utf-8"' +
                    '\r\n' +
                    '\r\n<html xmlns:o=3D"urn:schemas-microsoft-com:office:office"xmlns:x=3D"urn:schemas-microsoft-com:office:excel"xmlns=3D"http://www.w3.org/TR/REC-html40">' +
                    '\r\n' +
                    '\r\n<head>' +
                    '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
                    '\r\n<xml>' +
                    '\r\n<x:WorksheetOptions>' +
                    '\r\n<x:ProtectContents>False</x:ProtectContents>' +
                    '\r\n<x:ProtectObjects>False</x:ProtectObjects>' +
                    '\r\n<x:ProtectScenarios>False</x:ProtectScenarios>' +
                    '\r\n</x:WorksheetOptions>' +
                    '\r\n</xml>' +
                    '\r\n</head>' +
                    '\r\n<body>' +
                    '\r\n<table style=3D"width: 1200px">' +
                    table +
                    '\r\n</table>' +
                    '\r\n</body>' +
                    '\r\n</html>'
                //组合成多页
                sheetsInfo = sheetsInfo + sheetInfo;
                sheetsDate = sheetsDate + sheetDate;
            });
            //MIME框架模板
            var template = 'MIME-Version: 1.0' +
                '\r\nX-Document-Type: Workbook' +
                '\r\nContent-Type: multipart/related; boundary="----WIND----"' +
                '\r\n' +
                '\r\n------WIND----' +
                '\r\nContent-Location: file:///C:/MimeExcel.xml' +
                '\r\nContent-Transfer-Encoding: quoted-printable' +
                '\r\nContent-Type: text/html; charset="utf-8"' +
                '\r\n' +
                '\r\n<html xmlns:o=3D"urn:schemas-microsoft-com:office:office"xmlns:x=3D"urn:schemas-microsoft-com:office:excel"xmlns=3D"http://www.w3.org/TR/REC-html40">' +
                '\r\n' +
                '\r\n<head>' +
                '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
                '\r\n  <xml>' +
                '\r\n   <x:ExcelWorkbook>' +
                '\r\n    <x:ExcelWorksheets>' +
                sheetsInfo +
                '\r\n    </x:ExcelWorksheets>' +
                '\r\n   </x:ExcelWorkbook>' +
                '\r\n  </xml>' +
                '\r\n</head>' +
                '\r\n</html>' +
                sheetsDate +
                picsDate +
                '\r\n' +
                '\r\n------WIND------';
            return template;
        }
    
        var saveFile = function ($el, fileName, lan) {
            var urlObject = window.URL || window.webkitURL || window;
            var exportBlob = new Blob([excelTemplate($el, fileName, lan)]);
            var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
            saveLink.href = urlObject.createObjectURL(exportBlob);
            saveLink.download = fileName.toUpperCase() + '.xls';
            var ev = document.createEvent("MouseEvents");
            ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            saveLink.dispatchEvent(ev);
            urlObject.revokeObjectURL(saveLink.href);
        }
        /**
         * 获取echarts配置
         * @param {echarts所在DIV} chartsDiv 
         */
        var getChartData = function (chartsDiv) {
            var option = {};
            var myChart = echarts.init(chartsDiv);
            var chartOption = myChart.getOption();
            if (chartOption) {
                option.title = chartOption.title[0].text;
                option.xAxisData = chartOption.xAxis[0].data;
                option.series = [];
                $.each(chartOption.series, function (index, value) {
                    var seriesData = {};
                    seriesData.name = value.name;
                    seriesData.data = value.data;
                    option.series.push(seriesData);
                });
            } else {
                option = null;
            }
            return option;
        }
        /**
         * 将echarts图与数据拼接
         * @param {echats配置信息} option 
         * @param {echarts所在DIV} picDiv 
         * @param {单页图片索引} picIndex 
         */
        var getChartTable = function (option, chartsDiv, picIndex, fileName, lan) {
            if (option) {
                var table = $('<table><thead><tr style="height:40px;font-size:15pt"><td colspan="6">' + fileName + '</td></tr><tr style="height:' + $(chartsDiv).outerHeight(true) + 'px"><td colspan="6"><img src="picture' + picIndex + '"/></td></tr></thead><tbody></tbody></table>');
                table.find('thead').append('<tr class="series"><th>' + (lan === 'en' ? 'Date of publication' : '公布时间') + '</th></tr>');
                $.each(option.series, function (index, value) {
                    table.find('thead tr.series').append('<th>' + value.name + '</th>')
                });
                $.each(option.xAxisData, function (i, v) {
                    table.find('tbody').append('<tr data-index="' + i + '"><td x:str="\'' + v + '" style="text-align:center">' + v + '</td></tr>');
                    $.each(option.series, function (index, value) {
                        table.find('tbody tr[data-index="' + i + '"]').append('<td>' + value.data[i] + '</td>')
                    });
                });
                table.find('tr').removeAttr('class').removeAttr('data-index');
                return table;
            }
        }
        /**
         * 获取DataTable转换table
         * @param {table标签} tableTag 
         */
        var getDataTable = function (tableTag) {
            var initTable = $(tableTag).DataTable();
            var table = $('<table></table>');
            table.append(initTable.table().header().outerHTML).append('<tbody></tbody>');
            $.each(initTable.data(), function (indexInArray, valueOfElement) {
                table.find('tbody').append('<tr data-index="' + indexInArray + '"></tr>');
                $.each(valueOfElement, function (i, v) {
                    table.find('tbody tr[data-index="' + indexInArray + '"]').append('<td>' + v + '</td>')
                });
            });
            table.find('th').removeAttr('class').removeAttr('data-index');
            return table;
        }
    
        var getNormalTable = function (tableTag, isMonth) {
            var tableHTML = $('<table></table>');
            tableHTML.append($(tableTag).html());
            tableHTML.find('tr[style]').removeAttr('style');
            tableHTML.find('.export-del').remove();
            tableHTML.find('.text-center').attr('style', 'text-align:center;');
            tableHTML.find('[href]').removeAttr('href');
            tableHTML.find('[data-temp]').each(function (index, element) {
                // element == this
                $(this).text($(this).attr('data-temp'))
            });
            if (isMonth) {
                tableHTML.find('td.month-table-td').attr('style', 'height:200px;width:200px;');
                tableHTML.find('div.col-date').attr('style', 'text-align:right;vertical-align:top;font-weight:700;');
                tableHTML.find('.event-top,.event-title').attr('style', 'text-align:left;');
            }
            return tableHTML;
        }
    
    
        return {
            'saveFile': saveFile
        }
    
    });

13、去掉首尾空格

String.prototype.trim = function()
    {
        // 用正则表达式将前后空格
        // 用空字符串替代。
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }