接口介绍

使用构造函数法定义一个接口模拟类，在内部用this关键字指代实例对象，使用prototype对象添加类的属性和方法。
原文链接：Caiqm的笔记

1. 新建api.js文件，同时定义一个接口模拟类，从第二步开始为添加类方法

/**
 * 接口模拟类
 * @constructor
 */
function Api() {
    this.appVersion = '1.0.1';
    this.description = 'js常用方法归类';
}

2. 简单输出信息

/**
 * 输出信息
 * @param arg 要输出的内容
 */
Api.prototype.console = function (arg) {
    console.log(arg);
};

3. 设置页面标题

/**
 * 设置页面标题
 * @param title 更换标题
 */
Api.prototype.setNavigationTitle = function (title) {
    let titleTag = document.getElementsByTagName('title')[0];
    titleTag.innerText = title;
};

4. 页面跳转

/**
 * 页面跳转
 * @param url 跳转的链接
 * @param time 跳转等待的时间
 */
Api.prototype.hrefTo = function (url, time) {
    if (time === 0) {
        window.location.href = url;
    } else {
        setTimeout("api.hrefTo('" + url + "', 0)", time);
    }
};

5. 土司弹框

/**
 * 土司弹框
 * @param msg 提示内容
 * @param duration 提示时间
 */
Api.prototype.toast = function (msg, duration) {
    // 检测是手机或者PC
    let sUserAgent = navigator.userAgent.toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    let box = '';
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        box = {width: '60%', height: '35px', fontsize: '12px', padding: '0 10px'};
    } else {
        box = {width: '80%', height: '75px', fontsize: '35px', padding: '0 20px'};
    }
    duration = isNaN(duration) ? 1500 : duration;
    let m = document.createElement('div');
    let m_span = document.createElement('span');
    m.appendChild(m_span);
    m.style.cssText = "width: 100%;position: absolute;top: 60%;right: 0;bottom: 0;left: 0;margin: auto;";
    m_span.style.cssText = "max-width: "+box.width+";display: table;margin: 0 auto;padding: "+ box.padding +";box-sizing: border-box;opacity: 0.5;overflow: hidden;height: "+box.height+";color: rgb(255, 255, 255);line-height: "+box.height+";text-align: center;border-radius: 5px;z-index: 9999;background: rgb(0, 0, 0);font-size: "+box.fontsize+";";
    m_span.innerHTML = msg;
    document.body.appendChild(m);
    setTimeout(function() {
        let d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
        setTimeout(function() { document.body.removeChild(m) }, d * 1000);
    }, duration);
};

6. 对话框弹框

/**
 * 弹框
 * @param object 对象信息
 */
Api.prototype.dialog = function (object) {
    // 检测是手机或者PC
    let sUserAgent = navigator.userAgent.toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    let box = '';
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        box = {width: '300px', height: '150px', fontsize: ''};
    } else {
        box = {width: '80%', height: '30%', fontsize: '40px'};
    }
    let cssText = "<style>.dv_dialog_box{\n" +
        "   top: 0;\n" +
        "   left: 0;\n" +
        "   width: 100%;\n" +
        "   height: 100%;\n" +
        "   z-index: 9999;\n" +
        "   position: fixed;\n" +
        "   background-color: rgba(0,0,0,0.6);\n" +
        "}\n" +
        ".dv_dialog{\n" +
        "   max-width: 80%;\n" +
        "   width: "+ box.width +";\n" +
        "   height: "+ box.height +";\n" +
        "   position: absolute;\n" +
        "   top: 0;\n" +
        "   left: 0;\n" +
        "   right: 0;\n" +
        "   bottom: 0;\n" +
        "   margin: auto;\n" +
        "   background-color: #fff;\n" +
        "   border-radius: 6px;\n" +
        "   font-size: "+ box.fontsize +";\n" +
        "   color: #333;\n" +
        "}\n" +
        ".dv_title{\n" +
        "   width: 100%;\n" +
        "   height: 25%;\n" +
        "   text-align: center;\n" +
        "   display: flex;\n" +
        "   justify-content: center;\n" +
        "   align-items: center;\n" +
        "}\n" +
        ".dv_content{\n" +
        "   width: 100%;\n" +
        "   min-height: 50%;\n" +
        "   text-align: center;\n" +
        "   padding: 5px;\n" +
        "   box-sizing: border-box;\n" +
        "   display: flex;\n" +
        "   justify-content: center;\n" +
        "   align-items: center;\n" +
        "   background-color: #fff;\n" +
        "}\n" +
        ".dv_btn{\n" +
        "   width: 100%;\n" +
        "   height: 24%;\n" +
        "   display: flex;\n" +
        "   border-top: 1px solid #ececec;\n" +
        "}\n" +
        ".dialog_btn{\n" +
        "   height: 100%;\n" +
        "   display: flex;\n" +
        "   border: 0;\n" +
        "   background-color: #fff;\n" +
        "   flex: 1;\n" +
        "   justify-content: center;\n" +
        "   border-bottom-left-radius: 6px;\n" +
        "   border-bottom-right-radius: 6px;\n" +
        "   font-size: "+ box.fontsize +";\n" +
        "   color: #333;\n" +
        "}" +
        ".dialog_btn:first-child{\n" +
        "   border-right: 1px solid #ececec;\n" +
        "}</style>\n";
    // 创建div
    let m = document.createElement('div');
    // 添加class名称
    m.classList.add("dv_dialog_box");
    let t = '<div class="dv_dialog">';
    t += '<div class="dv_title">'+ (object.title ? object.title : '提示') +'</div>';
    t += '<div class="dv_content">'+ (object.content ? object.content : '暂无数据') +'</div>';
    t += '<div class="dv_btn">';
    // 判断是否显示取消按钮
    if (object.showCancel && object.showCancel === true) {
        t += '<button class="dialog_btn">取消</button>';
    }
    t += '<button class="dialog_btn">确定</button>';
    t += '</div>';
    t += cssText;
    m.innerHTML = t;
    // 将弹框添加到body
    document.body.appendChild(m);
    // 获取按钮
    let dialogBtn = document.getElementsByClassName('dialog_btn');
    for (let i = 0; i < dialogBtn.length; i++) {
        dialogBtn[i].onclick = function () {
            // 清除掉弹框
            document.body.removeChild(m);
            // 确定按钮和取消按钮回调
            if (object.showCancel && object.showCancel === true && i == 1 && object.callback) {
                object.callback();
            } else if (object.showCancel && object.showCancel === true && i == 0 && object.cancelCallback) {
                object.cancelCallback();
            } else if (!object.showCancel && i == 0 && object.callback) {
                object.callback();
            }
        };
    }
};

7. 输出当前时间或者更换输入时间分割符

/**
 * 输出当前时间或者更换输入时间分割符
 * @param date 时间字符串
 * @param separate 日期分割符
 * @returns {string}
 */
Api.prototype.formatTime = function (date, separate) {
    // 时间判断
    if (date) {
        let dateSplit = date.split(/[^0-9]/);
        date = new Date(dateSplit[0], dateSplit[1] - 1, dateSplit[2], dateSplit[3], dateSplit[4], dateSplit[5]);
    } else {
        date = new Date();
    }
    // 日期分割符
    separate = separate ? separate : '/';
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hour = date.getHours();
    const minute = date.getMinutes();
    const second = date.getSeconds();
    return [year, month, day].map(api.formatNumber).join(separate) + ' ' + [hour, minute, second].map(api.formatNumber).join(':');
};

8. 数字格式化，小于9补0

/**
 * 数字格式化，小于9补0
 * @param n 数字
 * @returns {any}
 */
Api.prototype.formatNumber = function (n) {
    n = n.toString();
    return n[1] ? n : '0' + n
};

9. 时间倒计时

/**
 * 倒计时
 * @param expireTime 结束日期字符串
 * @param marking 天数标识
 * @returns {*}
 */
Api.prototype.countDown = function (expireTime, marking) {
    // 转换日期格式  
    let a = expireTime.split(/[^0-9]/);
    // 截止日期：日期转毫秒
    let expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
    // 倒计时毫秒  
    let duringMs = expireMs.getTime() - (new Date()).getTime();
    // 渲染倒计时时钟  
    let duringDate = '';
    // 格式化日期，marking不存在显示“天时分秒”，否则显示“时分秒”
    if (!marking) {
        const days = api.formatNumber(parseInt(duringMs / 1000 / 60 / 60 / 24, 10)).toString(); //计算剩余的天数
        const hours = api.formatNumber(parseInt(duringMs / 1000 / 60 / 60 % 24, 10)).toString(); //计算剩余的小时
        const minutes = api.formatNumber(parseInt(duringMs / 1000 / 60 % 60, 10)).toString();//计算剩余的分钟
        const seconds = api.formatNumber(parseInt(duringMs / 1000 % 60, 10)).toString();//计算剩余的秒数
        duringDate = days + ":" + hours + ":" + minutes + ":" + seconds;
    } else {
        const hours = api.formatNumber(parseInt(duringMs / 1000 / 60 / 60, 10)).toString(); //计算剩余的小时
        const minutes = api.formatNumber(parseInt(duringMs / 1000 / 60 % 60, 10)).toString();//计算剩余的分钟
        const seconds = api.formatNumber(parseInt(duringMs / 1000 % 60, 10)).toString();//计算剩余的秒数
        duringDate = hours + ":" + minutes + ":" + seconds;
    }
    // 判断是否已经结束
    if (duringMs <= 0) {
        // timeout则跳出递归
        return '倒计时已完成';
    }
    // setTimeout(function () {
    //     // 放在最后--
    //     api.countDown(expireTime);
    // }, 1000);
    return duringDate;
};

10. 验证手机号码

/**
 * 验证手机号码
 * @param phone 手机号码
 * @returns {boolean} 返回true|false
 */
Api.prototype.phoneVerify = function (phone) {
    let reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
    return reg.test(phone);
};

11. 验证邮箱

/**
 * 验证邮箱
 * @param email 邮箱地址
 * @returns {boolean}
 */
Api.prototype.emailVerify = function (email) {
    let reg = /^[a-z0-9][a-z\.0-9-_]+@[a-z0-9_-]+(?:\.[a-z]{0,3}\.[a-z]{0,2}|\.[a-z]{0,3}|\.[a-z]{0,2})$/i;
    return reg.test(email);
};

12. 验证身份证

/**
 * 验证身份证
 * @param idcard 身份证号码
 * @returns {boolean}
 */
Api.prototype.idcardVerify = function (idcard) {
    let reg = /(^d{15}$)|(^d{17}([0-9]|X|x)$)/;
    return reg.test(idcard);
};

13. 验证中文

/**
 * 验证中文
 * @param chinese
 * @returns {boolean}
 */
Api.prototype.chineseVerify = function (chinese) {
    let reg = /[u4e00-u9fa5]/;
    return reg.test(chinese);
};

14. 添加新数组数据到旧数组

/**
 * 添加新数据到旧数组
 * @param orgArr 旧数组
 * @param addFile 新数组
 * @returns {*}
 */
Api.prototype.addNewToArr = function (orgArr, addFile) {
    if (!addFile) {
        return orgArr;
    }
    for (let i = 0; i < addFile.length; i++) {
        orgArr.push(addFile[i]);
    }
    return orgArr;
};

15. 检测参数是否为空

/**
 * 检测参数是否为空
 * @param checkObj 检测对象内容
 * @param showWord 提示文字
 * @param isTip 提示方式
 * @returns {boolean}
 */
Api.prototype.checkIsNull = function (checkObj, showWord, isTip) {
    if (!checkObj) {
        if (!isTip) {
            api.dialog({ content: showWord });
        } else {
            api.toast(showWord);
        }
        return false;
    }
    return true;
};

16. 获取对象、数组的长度、元素长度个数

/**
 * 获取对象、数组的长度、元素长度个数
 * @param obj 要计算长度的元素，可以为object、array、string
 * @returns {*}
 */
Api.prototype.getLength = function (obj) {
    let objType = typeof obj;
    if(objType === "string"){
        return obj.length;
    }else if(objType === "object"){
        let objLen = 0;
        for (let i in obj) {
            objLen++;
        }
        return objLen;
    }
    return false;
};

17. 限制字符串长度（字节）

/**
 * 字节限制字符串长度
 * @param val 字符串
 * @param max 最长个数
 * @returns {string}
 */
Api.prototype.getByteVal = function (val, max) {
    let returnValue = '';
    let byteValLen = 0;
    for (let i = 0; i < val.length; i++) {
        if (val[i].match(/[^x00-xff]/ig) != null) {
            byteValLen += 2;
        } else {
            byteValLen += 1;
        }
        if (byteValLen > max) {
            break;
        }
        returnValue += val[i];
    }
    return returnValue;
};

18. 去除一维数组重复值

/**
 * 去除一维数组重复值
 * @param arr 去重数组
 * @returns {Array}
 */
Api.prototype.unique = function (arr) {
    let temp = [];
    for (let i = 0; i < arr.length; i++) {
        if (temp.indexOf(arr[i]) === -1) {
            temp.push(arr[i]);
        }
    }
    return temp;
};

19. 禁止移动端浏览器页面滚动

/**
 * 禁止移动端浏览器页面滚动
 */
Api.prototype.stopBrowseScroll = function () {
    document.addEventListener('touchmove', function(event) {
        event.preventDefault();
    });
};

20. 判断是否微信浏览器

/**
 * 判断是否微信浏览器
 * @returns {boolean}
 */
Api.prototype.isWeiXinClient = function () {
    let ua = navigator.userAgent.toLowerCase();
    return (ua.match(/MicroMessenger/i) == "micromessenger") ? true : false;
};

重要的一点是实例化类，不然调用不了定义的方法或属性

类实例化赋值
$api = api = new Api();

使用方法

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript" src="js/api.js"></script>
    <script type="text/javascript">
        // 打印api版本号
        api.console(api.appVersion);
        // 设置title标题
        api.setNavigationTitle('我的js插件');
        // 土司弹框
        api.toast('我是土司我是土司我是土司', 99999);
        // 对话框
        api.dialog({content: '我的内容', showCancel: true });
    </script>
</body>
</html>

浏览器查看效果

目前归类的常用js方法有二十多种，可以放到一个.js文件进行使用。因为是通过原生javascript编辑，所以不需要引入JQuery文件，兼容PC和手机浏览器。

© 2018 All by Caiqm.