JavaScript代码片段

A. 技巧类

过滤数组空值

                        
    // 过滤 空字符串 null undefined 0 false
    let arr = ['apple', null, 'milk', undefined, 'bread', '', 0, false];
    let list = arr.filter(Boolean);

数组结构获取第一项的属性值

                        
    // 获取下标为0的age
    let people = [
        { name: "a", age: 20},
        { name: "b", age: 22},
        { name: "c", age: 60}
    ];
    let [{age}] = people;
    // 20

快速获取时间戳

                        
    //以下5种方法等价

    +new Date();

    +new Date;

    new Date() * 1;

    new Date().valueOf();

    new Date().getTime();

取整

                        
    ~~2.33;  //2
    2.33 | 0; //2
    2.33 >> 0; //2

保留2位小数不进行四舍五入

                        
    Number(parseFloat(2.345).toFixed(3).slice(0, -1)); //2.34

两个整数交换数值

                        
    var a = 1, b = 2;
    a ^= b;
    b ^= a;
    a -= b;

获取随机布尔值

                        
    const randomBoolean = () => Math.random() >= 0.5;

对象深拷贝

                        
    // 方法1 有缺陷 方法等会丢失
    newObj = JSON.parse(JSON.stringify(obj));

    // 方法2
    function clone (obj) {
        if(obj === null) return null;
        if(typeof obj !== 'object') return obj;
        if(obj.constructor === Date) return new Date(obj);
        if(obj.constructor === RegExp) return new RegExp(obj);
        var newObj = new obj.constructor ();  //保持继承链
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
                var val = obj[key];
                newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
            }
        }
        return newObj;
    }

判断对象的属性是否存在

                        
    // 方法1
    console.log(!!myObj['someProperty']); // true 但无法判断 {}、[]

    // 方法2
    console.log('someProperty' in myObj); // true  但原型链上也会判断

    // 方法3
    console.log(myObj.hasOwnProperty('someProperty')); // true 继承自Object，不考虑原型链

合并对象

                        
    // ES5
    const obj = Object.assgin({}, obj1, obj2);

    // ES6
    const obj = {...obj1, ...obj2};

合并数组

                        
    // ES5
    const arr = arrA.concat(arrB);

    // ES6
    const arr = [...new Set([...arrA, ...arrB])];

取随机字符串

                        
    Math.random().toString(16).substring(2); // 13位
    Math.random().toString(36).substring(2); // 11位

反转字符串

                        
    str.split('').reverse().join('');

字符串替换成星号

                        
    '风起云涌'.replace(/.(?=.)/g, '*');  //***涌

    phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"); //131****5678

手机号格式

                        
    /**
    * [手机号格式化]
    * @param  {string | number} phone 手机号
    * @param  {string} symbol 分隔符，默认 -
    * 13012345678 => 130-1234-5678
    */
    let formatMobile = (phone, symbol = '-') => {
        if (typeof phone === 'number') {
            phone = phone.toString();
        }
        
        return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1'+ symbol +'$2'+ symbol + '$3');
    }

数字格式化

                        
    // 4位分隔 1234 5678 9123 123
    val.replace(/\s/, '').replace(/([0-9]{4})(?=[0-9])/g, '$1 ');

匿名函数自执行

                        
    ( function() {}() );
    ( function() {} )();
    [ function() {}() ];

    ~ function() {}();
    ! function() {}();
    + function() {}();
    - function() {}();

    delete function() {}();
    typeof function() {}();
    void function() {}();
    new function() {}();
    new function() {};

    var f = function() {}();

    1, function() {}();
    1 ^ function() {}();
    1 > function() {}();

数组去重

                        
    // 方法1
    [...new Set([1, "1", 2, 1, 1, 3])];  //[1, "1", 2, 3]

    // 方法2
    function unique (arr) {
        let map = new Map();
        let arr1 = [];
        for (let i = 0, len = arr.length; i < len; i++) {
            if (map.has(arr[i])) { // 判断是否存在该key值
                map.set(arr[i], true);
            } else {
                map.set(arr[i], false);
                arr1.push(arr[i]);
            }
        }
        return arr1;
    }

取出两个数组中不同元素

                        
    function getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function(v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v);
        });
    }

取出两个数组中相同元素

                        
    function getArrEqual(arr1, arr2) {
        let newArr = [];
            for (let i = 0; i < arr2.length; i++) {
                for (let j = 0; j < arr1.length; j++) {
                    if(arr1[j] === arr2[i]){
                        newArr.push(arr1[j]);
                    }
            }
        }
        return newArr;
    }

去掉两个数组中相同元素，得到新数组

                        
    var arr1 = [a, b, c,];
    var arr2 = [a, b, c, d];
    let list = arr2.filter(items => {
        if (!arr1.includes(items)) {
            return items;
        }
    })

取出一个数组中的最大值和最小值

                        
    var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    Math.max.apply(Math, numbers);  //122205
    Math.min.apply(Math, numbers);  //-85411

数组中两个值交换位置

                        
    function swapArr(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
    }

数组中将某个值置顶

                        
    function toFirst(fieldData, index) {
        if (index != 0) {
            fieldData.unshift(fieldData.splice(index, 1)[0]);
        }
    }

数组中将某个值上移一个位置

                        
    function upGo(fieldData, index) {
        if(index != 0) {
            fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0];
        } else {
            fieldData.push(fieldData.shift());
        }
    }

数组中将某个值下移一个位置

                        
    function downGo(fieldData, index) {
        if (index != fieldData.length - 1) {
            fieldData[index] = fieldData.splice(index + 1, 1, fieldData[index])[0];
        } else {
            fieldData.unshift( fieldData.splice(index, 1)[0]);
        }
    }

判断数组中是否有重复元素

                        
    // 方法1 正则
    // 验证重复元素，有重复返回true；否则返回false
    function isRepeat(a) {
        return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f"+a.join("\x0f\x0f") +"\x0f");
    }

    // 方法2 通过字符串查找
    function isRepeat() {
        var ary = new Array("111", "22", "33", "111");
        var s = ary.join(",") + ",";
        for (var i = 0; i < ary.length; i++) {
            if (s.replace(ary[i] + ",", "").indexOf(ary[i] + ",") > -1) {
                alert("数组中有重复元素：" + ary[i]);
                break;
            }
        }
    }

    // 方法3 通过数组排序，比较临近元素
    function isRepeat() {
        var ary = new Array("111", "22", "33", "111");
        var nary = ary.sort();
        for (var i = 0; i < ary.length; i++) {
            if (nary[i] == nary[i + 1]) {
                alert("数组重复内容：" + nary[i]);
            }
        }
    }

    // 方法4 通过哈希（推荐）
    function isRepeat(arr) {
        var hash = {};
        for (var i in arr) {
            if (hash[arr[i]]){
                return true; 
            }
            hash[arr[i]] = true;
        }
        return false;
    }

数据合并

                        
    // 根据某个字段合并，比如userid
    function mergeData(list) {
        let map = [];
        let dest = [];

        let arr = list;

        // 根据userid合并数据
        for (let i = 0; i < arr.length; i++){
            let ai = arr[i];
            if (!map[ai.userid]) {
                dest.push({
                    userid: ai.userid,
                    name: ai.name
                });
                map[ai.userid] = ai;
            } else {
                for (let j = 0; j < dest.length; j++){
                    let dj = dest[j];
                }
            }
        }
        return dest;
    }

合并数组中重复的值

                        
    function mergeArr(arr) {
        var newArr = [];
        arr.forEach((item) => {
            var dataItem = item;
            if (newArr.length > 0) {
                var filterValue = newArr.filter((v) => {
                    return v.type === dataItem.type;
                });
                if (filterValue.length > 0) {
                    newArr.forEach((n) => {
                        if (n.type === filterValue[0].type) {
                            n.num = filterValue[0].num + dataItem.num;
                        }
                    });
                } else {
                    newArr.push(dataItem);
                }
            } else {
                newArr.push(dataItem);
            }
        });
        return newArr;
    }

数值边界判断

                        
    //判断 index 是否小于0，小于则赋值为 0
    var index = 0;

    //简化前
    index--;
    if (index < 0) {
        index = 0;
    }

    //简化后
    index = Math.max(0, --index);
                        
                    
                        
    //判断 index 是否大于 len，大于则赋值为 len 的值
    var imgs = [1, 2, 3];
    var index = 0,
    len = imgs.length;

    //简化前
    index++;
    if (index > len) {
        index = len;
    }

    //简化后
    index = Math.min(len, ++index);

运行耗时计时

                        
    console.time('Timer'); //Timer是计时器名称，随便起
    var arr = [];
    for (var i = 0; i < 50; i++) {
      arr.push(i);
    }
    console.timeEnd('Timer');

输入框非空判断

                        
    // ES5
    if (value !== null && value !== undefined && value !== '') {
        //...
    }

    // ES6
    if (value??'' !== '') {
        //...
    }

判断给定的日期是否是工作日

                            
    const isWeekday = (date) => date.getDay() % 6 !== 0;

滚动到页面顶部

                            
    const goToTop = () => window.scrollTo(0, 0);
    goToTop();

B. 公共函数

Ajax封装

                        
    /**
     * [ajax Ajax方法]
     * @param  {object} opts [ajax配置]
     */
    ajax: function(opts) {
        var me = this;
        var o = $.extend({}, {
            url: '',
            type: 'GET',
            data: {},
            dataType: 'json',
            cache: false,
            async: false,
            success: function(response) {
                //200 成功
                if (response.code == '200') {
                    o.callback(response);
                } else {
                    if (typeof o.fail == 'function') {
                        o.fail(response);
                    } else {
                        me.toast(response.msg);
                    }
                }
            },
            fail: function(response) {
                me.toast(response.msg);
            }
        }, opts);

        return $.ajax({
            url: api + o.url,
            type: o.type,
            data: o.data,
            dataType: o.dataType,
            cache: o.cache,
            async: o.async,
            contentType: o.contentType,
            success: o.success
            fail: o.fail
        });
    }

获取url中参数

                        
    /**
     * [getQueryString 获取url中参数]
     * @param  {string} name [键名]
     * @return {string}      [键值]
     */
    getQueryString: function(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            if (r[2].indexOf("%u") < 0) {
                r[2] = decodeURIComponent(r[2]).replace(/\\/g, "%");
            }
            return unescape(r[2]);
        }
        return null;
    }

截取字符串

                        
    /**
     * [substring 截取字符串]
     * @param  {string} str  [待处理字符串]
     * @param  {number} len  [截取长度]
     * @param  {string} flow [超过截取长度显示符号]
     * @return {string}      [处理后字符串]
     */
    substring: function(str, len, flow) {
        str = $.trim(str);
        if (!str) return '';

        str = str.toString();
        var newStr = "",
            strLength = str.replace(/[^\x00-\xff]/g, "**").length,
            flow = typeof(flow) == 'undefined' ? '…' : flow;
        if (strLength <= len + (strLength % 2 == 0 ? 2 : 1)) return str;
        for (var i = 0, newLength = 0, singleChar; i < strLength; i++) {
            singleChar = str.charAt(i).toString();
            if (singleChar.match(/[^\x00-\xff]/g) != null) newLength += 2;
            else newLength++;

            if (newLength > len) break;
            newStr += singleChar;
        }

        if (strLength > len) newStr = $.trim(newStr) + flow;
        return newStr;
    }

HTML标签过滤

                        
    /**
     * [htmlFilter HTML标签过滤]
     * @param  {string} str [待处理字符串]
     * @return {string}     [处理后字符串]
     */
    htmlFilter: function(str) {
        str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
        str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
        str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
        str = str.replace(/ /ig, '');//去掉 
        return str;
    }

HTML属性过滤

                        
    /**
     * [htmlAttrFilter HTML属性过滤]
     * @param  {string} str [待处理字符串]
     * @return {string}     [处理后字符串]
     */
    htmlAttrFilter: function(str) {
        str = str.replace(/style\=([\\]\")*[a-zA-Z0-9\s\-\:\;\'\,\#\u4e00-\u9fa5]+([\\]*\")*/g, ''); //过滤style属性
        return str;
    }

去掉所有的HTML标记

                        
    /**
     * [delHtmlTag 去掉所有的HTML标记]
     * @param  {string} str [待处理字符串]
     * @return {string}     [处理后字符串]
     */
    delHtmlTag: function(str) {
        var str = str.replace(/ /g, '');
            str = str.replace(//g, '...');
            str = str.replace(/<[\w\/"'=\s\.\(\)\{\}\-\+\\,\!:;&#%，。！？\u4e00-\u9fa5]*>/g, '');

        return str;
    }

时间转换日期

                        
    /**
     * [timeToDate 时间转换日期]
     * @param  {time|string} time 	[时间戳或其他时间格式]
     * @param  {string} 	 flag 	[格式化输出，默认ymd，[ymd|ymdhis|y|md]]
     * @param  {string} 	 symbol [分隔符号，默认 - ]
     * @return {string}      		[格式化时间]
     */
    timeToDate: function(time, flag, symbol) {
        symbol = symbol || '-';

        if (typeof time == 'string' && time.length == 10) {
            time = (time + '000') * 1
        }

        var date = new Date(time);

        var y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate(),
            h = date.getHours(),
            i = date.getMinutes(),
            s = date.getSeconds();

            m = m < 10 ? '0' + m : m;
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            i = i < 10 ? '0' + i : i;
            s = s < 10 ? '0' + s : s;

        switch(flag) {
            case 'ymdhis':
                return y + symbol + m + symbol + d + ' ' + h +':' + i + ':' + s;

            case 'ymdhi':
                return y + symbol + m + symbol + d + ' ' + h +':' + i;

            case 'ymd':
                return y + symbol + m + symbol + d;

            case 'y':
                return y;

            case 'md':
                return m + symbol + d;

            case 'mdhi':
                return m + symbol + d + ' ' + h +':' + i;

            case 'dmy':
                return d + symbol + m + symbol + y;

            case 'his':
                return h +':' + i + ':' + s;

            case 'hi':
                return h +':' + i;

            default:
                return y + symbol + m + symbol + d;

        }
    }

补零

                        
    // 方法1
    /**
     * [zero 补零]
     * @param  {number} num  [值]
     * @return {string}      [补零后值]
     */
    zero: function(num) {
        return num < 10 ? '0' + num : num;
    }

    // 方法2
    let h = '8';
    `00${h}`.slice(-2)

设置/读取cookie

                        
    /**
     * [cookieHelper 设置cookie 读取cookie]
     * @param  {string} name    [键名]
     * @param  {string|number|boolean} value   [键值]
     * @param  {object} options [object]
     */
    cookieHelper: function(name, value, options) {
        if (typeof value != 'undefined') {
            options = options || {};
            if (value === null) {
                value = '';
                options.expires = -1;
            }
            var expires = '';
            if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == 'number') {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = '; expires=' + date.toUTCString();
            }
            var path = options.path ? '; path=' + options.path : '',
                domain = options.domain ? '; domain=' + options.domain : '',
                secure = options.secure ? '; secure' : '';
            document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
        } else {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    }

设置本地数据

                        
    /**
     * [设置本地数据] 使用localStorage，如不支持用Cookie
     * @param  {[string]} key   [键名]
     * @param  {[object]} value [键值]
     */
    setStorage: function(key, value) {
        if (window.localStorage) {
            localStorage.setItem(key, JSON.stringify(value));
        } else {
            document.cookie = key + '=' + JSON.stringify(value);
        }
    }

获取本地数据

                        
    /**
    * [获取本地数据] 使用localStorage，如不支持用Cookie
    * @param  {[string]} key [键名]
    * @return {[object]}     [json对象]
    */
    getStorage: function(key) {
        var value;
        if (window.localStorage) {
            value = localStorage.getItem(key);
        } else {
            var name = key + '=';
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) !== -1) {
                    value = c.substring(name.length, c.length);
                }
            }
        }
        return JSON.parse(value);
    }

删除本地数据

                        
    /**
     * [删除本地数据] 使用localStorage，如不支持用Cookie
     * @param  {string} key [键名]
     */
    removeStorage: function(key) {
        if (window.localStorage) {
            localStorage.removeItem(key);
        } else {
            var oDate = new Date();
            oDate.setDate(oDate.getDate() - 1);
            document.cookie = key + ' = ' + '1' + ' ;expires = ' + oDate;
        }
    }

数据类型判断

                        
    /**
     * [JS数据类型判断]
     * @param  {string|number|boolean|object|array|regexp|null|undefined}
     */
    typeDetection: function(n) {
        if (typeof n === 'object') {
            return Object.prototype.toString.call(n);
        } else {
            return typeof n;
        }
    }

    typeDetection('vic');         //string
    typeDetection(123);           //number
    typeDetection(1.5);           //number
    typeDetection(-1.5);          //number
    typeDetection(NaN);           //number
    typeDetection(Infinity);      //number
    typeDetection(true);          //boolean
    typeDetection(false);         //boolean
    typeDetection(function(){});  //function
    typeDetection(undefined);     //undefined
    typeDetection(null);          //[object Null]
    typeDetection({});            //[object Object]
    typeDetection({a:'1', b:2});  //[object Object]
    typeDetection([]);            //[object Array]
    typeDetection(new Array());   //[object Array]
    typeDetection(new Date());    //[object Date]
    typeDetection(new RegExp());  //[object RegExp]
    typeDetection(/^a-z$/);       //[object RegExp]

base64转路径

                        
    /**
     * [base64转路径] 
     */
    function h5base64ToPath(base64) {
        base64 = base64.split(',');
        let type = base64[0].match(/:(.*?);/)[1];
        let str = atob(base64[1]);
        let n = str.length;
        let array = new Uint8Array(n);
        while (n--) {
            array[n] = str.charCodeAt(n);
        }
        return (window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type }));
    }

图片下载

                        
function download(url, name) {
    // 不跨域时下载
    var link = document.createElement('a');
    link.download = ''; // 设置下载的文件名
    link.style.display = 'none';
    link.href = url; // 设置下载路径
    document.body.appendChild(link); // 触发点击
    link.click();
    document.body.removeChild(link); // 移除节点
}

跨域图片下载

                        
function download(url, name) {
    // 跨域时下载
    const img = new Image;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    img.onload = function() {
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);

        const elt = document.createElement('a');
        elt.setAttribute('href', canvas.toDataURL('image/png'));
        elt.setAttribute('download', name);
        elt.style.display = 'none';
        document.body.appendChild(elt);
        elt.click();
        document.body.removeChild(elt);
    };
    img.crossOrigin = 'anonymous';
    img.src = url;
}

C. 验证类

手机号验证

                        
    /**
     * [checkMobile 手机号验证]
     * @param  {string|number} val [待验证手机号]
     * @return {boolean}     [true | false]
     */
    checkMobile: function(val) {
        return /^(1[3456789][0-9])\d{8}$/.test(val);
    }

QQ号验证

                        
    /**
     * [checkQQ QQ号验证]
     * @param  {string|numver} val [待验证QQ号]
     * @return {boolean}     [true | false]
     */
    checkQQ: function(val) {
        return /^[1-9]\d{4,10}$/.test(val);
    }

微信号验证

                        
    /**
     * [checkWechat 微信号验证]
     * @param  {string} val [待验证微信号]
     * @return {boolean}     [true | false]
     */
    checkWechat: function(val) {
        return /^[a-zA-Z][\w\-]{5,19}$/.test(val);
    }

电子邮箱验证

                        
    /**
     * [checkEmail 电子邮箱验证]
     * @param  {string} val [待验证邮箱]
     * @return {boolean}     [true | false]
     */
    checkEmail: function(val) {
        return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+\.+([\w.])*[a-zA-Z]{1,3}$/.test(val);
    }

身份证号验证

                        
    /**
     * [checkCardNo 身份证号验证]
     * @param  {string} val [待验证身份证号]
     * @return {boolean}     [true | false]
     */
    checkCardNo: function(val) {
        return /^[1-8](\d{16})[0-9xX]$/.test(val);
    }

id验证

                        
    /**
     * [checkId id验证]
     * @param  {string|number} val [待验证id]
     * @return {boolean}     [true | false]
     */
    checkId: function(val) {
        return /^[1-9]+\d*$/.test(val);
    }

中文验证

                        
    /**
     * [checkZh 中文验证]
     * @param  {string|number} val [待验证id]
     * @return {boolean}     [true | false]
     */
    checkZh: function(val) {
        return /\u4e00-\u9fa5/.test(val);
    }

图片类型验证

                        
    /**
     * [checkImageType 图片类型验证]
     * @param  {string|number} val [待验证图片类型]
     * @return {boolean}     [true | false]
     */
    checkImageType: function(val) {
        return /^image\/jpe?g|png$/i.test(val);
    }

身份证严格验证

                        
    /**
     * [身份证严格验证]
     * @param  {string} val [18位身份证号码]
     * @return {boolean}     [true|false]
     */
    strictIdNumber: function (val) {
        var str,
            result = 0;

        val = val.toUpperCase();

        if (val.length === 18) {
            var map1 = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            var map2 = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];

            str = val + '';
            for (var i = 0, len = str.length; i < (len - 1); i++) {
                result += str[i] * map1[i];
            }

            if (map2[(result % 11)] !== str[len - 1]) {
                return false;
            } else {
                return true;
            }
        } else {
            return false;
        }
    }

D. 业务类

弹窗操作

                        
    // 弹窗操作
    tools: function() {
        // 关闭消息框
        $('body').on('click', '.mask-alert .btn-close', function() {
            $(this).closest('.mask').remove();
        });

        // 关闭确认框
        $('body').on('click', '.mask-confirm .btn-cancel', function() {
            $(this).closest('.mask').remove();
        });
    }

当前遮罩层统计

                        
    /**
     * [countMaskNum 当前遮罩层统计]
     */
    countMaskNum: function() {
        return ($('.mask').length) + 15000 + 1;
    }

toast 提示框

                        
    /**
     * [toast 提示框]
     * @param  {string} msg   [提示消息]
     * @param  {number} times [消失时间，毫秒]
     */
    toast: function(msg, times) {
        var id = this.countMaskNum(),
            times = times || 2000,
            html = `<div id="maskToast${id}" class="mask-toast" style="z-index:${id};">'${msg}</div>`;

        $('body').append(html);

        setTimeout(function() {
            $('body').find('#maskToast' + id).remove();
        }, times);
    }

alert 消息框

                        
    /**
     * [alert 消息框]
     * @param  {string} msg [消息内容]
     */
    alert: function(msg) {
        var id = this.countMaskNum();
        var html = `<div class="mask" style="z-index:${id};">
                        <section class="mask-alert">
                            <div class="alert-title">系统消息<a class="iconfont btn-close"></a></div>
                            <div class="alert-content">${msg}</div>
                            <div class="alert-btns">
                                <a class="btn btn-confirm btn-close">确定</a>
                            </div>
                        </section>
                    </div>`;

        $('body').append(html);
    }

confirm 确认框

                        
    /**
     * [confirm 确认框]
     * @param  {string}   msg      [消息内容]
     * @param  {Function} callback [回调函数]
     */
    confirm: function(msg, callback) {
        var id = this.countMaskNum();
        var html = `<div class="mask" style="z-index:${id};">
                        <section class="mask-confirm">
                            <div class="alert-title">系统消息<a class="iconfont btn-cancel"></a></div>
                            <div class="alert-content">${msg}</div>
                            <div class="alert-btns">
                                <a class="btn btn-cancel">取消</a>
                                <a class="btn btn-confirm">确定</a>
                            </div>
                        </section>
                    </div>`;

        $('body').append(html);

        // 确认确认框
        $('body').off('click.confirm');
        $('body').on('click.confirm', '.mask-confirm .btn-confirm', function() {
            $(this).closest('.mask').remove();
            callback();
        });
    }

图片等比缩放

                        
    /**
     * [imgRevision 图片等比缩放]
     * @param  {jQ Object} $img   [img对象]
     */
    imgRevision: function($img) {
        $img.load(function(){
            var width = $(this).width(),
                height = $(this).height(),
                w = $(this).parent().width(),
                h = $(this).parent().height();

            if (width/height > w/h) {
                $(this).width(w);
                $(this).css('margin-top', -1/2 * ($(this).height() - h));
            } else {
                $(this).height(h);
                $(this).css('margin-left', -1/2 * ($(this).width() - w));
            }
        });
    }

countdown 倒计时

                        
    /**
     * [countdown 倒计时]
     * @param  {jQ Object}  $btn   [按钮]
     * @param  {Number} 	time   [倒计时秒数]
     * @param  {String} 	txt    [倒计时结束文案]
     */
    countdown: function($btn, time, txt) {
        var t = time || 60;
            txt = txt || '再次发送';

        var timer = setInterval(function() {
            t--;
            if (t < 0) {
                clearInterval(timer);
                $btn.html(txt).removeClass('disabled');
                return;
            }

            $btn.html(t + '秒');
        }, 1000);
    }

数据比较 返回有修改的数据

                        
    // 编辑数据比较，返回真正修改的数据
    _diffData (data, oldData) {
        let newData = {};
        for (let key in data) {
            for (let k in oldData) {
                if (key == k) {
                    if (this.data[key] != this.oldData[k]) {
                        newData[key] = this.data[key];
                    }
                }
            }
        }
        return newData;
    }