JS 技巧

vue 实现 Bootstrap 样式自定义消息提示框

部分UI框架没有消息提示框比如bootstrap，用两个方法来实现

/**
 * 弹出消息框
 * @param msg 消息内容
 * @param type 消息框类型（参考bootstrap的alert）
 */
alert: function (msg, type) {
    if (typeof (type) == "undefined") { // 未传入type则默认为success类型的消息框
        type = "success";
    }
    // 创建bootstrap的alert元素
    var divElement = $("<div></div>").addClass('alert').addClass('alert-' + type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
    let top = document.documentElement.clientTop + document.documentElement.scrollTop + 60
    // 消息框的定位样式
    divElement.css({
        "position": "absolute",
        "top": top + "px",
        "z-index": "999999",
        "opacity": '.9'
    });
    divElement.text(msg); // 设置消息框的内容
    // 消息框添加可以关闭按钮
    var closeBtn = $('<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>');
    $(divElement).append(closeBtn);
    // 消息框放入到页面中
    $('body').append(divElement);
    return divElement;
}

/**
 * 短暂显示后上浮消失的消息框
 * @param msg 消息内容
 * @param type 消息框类型
 */
message: function (msg, type) {
    var divElement = this.alert(msg, type); // 生成Alert消息框
    var isIn = false; // 鼠标是否在消息框中

    divElement.on({ // 在setTimeout执行之前先判定鼠标是否在消息框中
        mouseover: function () { isIn = true; },
        mouseout: function () { isIn = false; }
    });

    // 短暂延时后上浮消失
    setTimeout(function () {
        var IntervalMS = 20; // 每次上浮的间隔毫秒
        var floatSpace = 60; // 上浮的空间(px)
        var nowTop = divElement.offset().top; // 获取元素当前的top值
        var stopTop = nowTop - floatSpace;    // 上浮停止时的top值
        divElement.fadeOut(IntervalMS * floatSpace); // 设置元素淡出

        var upFloat = setInterval(function () { // 开始上浮
            if (nowTop >= stopTop) { // 判断当前消息框top是否还在可上升的范围内
                divElement.css({ "top": nowTop-- }); // 消息框的top上升1px
            } else {
                clearInterval(upFloat); // 关闭上浮
                divElement.remove();    // 移除元素
            }
        }, IntervalMS);

        if (isIn) { // 如果鼠标在setTimeout之前已经放在的消息框中，则停止上浮
            clearInterval(upFloat);
            divElement.stop();
        }

        divElement.hover(function () { // 鼠标悬浮时停止上浮和淡出效果，过后恢复
            clearInterval(upFloat);
            divElement.stop();
        }, function () {
            divElement.fadeOut(IntervalMS * (nowTop - stopTop)); // 这里设置元素淡出的时间应该为：间隔毫秒*剩余可以上浮空间
            upFloat = setInterval(function () { // 继续上浮
                if (nowTop >= stopTop) {
                    divElement.css({ "top": nowTop-- });
                } else {
                    clearInterval(upFloat); // 关闭上浮
                    divElement.remove();    // 移除元素
                }
            }, IntervalMS);
        });
    }, 1500);
}

判断URL格式

isURL(url) {
    var strRegex = '^((https|http|ftp|rtsp|mms)?://)'
        + '?(([0-9a-z_!~*\'().&=+$%-]+: )?[0-9a-z_!~*\'().&=+$%-]+@)?' //ftp的user@ 
        + '(([0-9]{1,3}.){3}[0-9]{1,3}' // IP形式的URL- 199.194.52.184 
        + '|' // 允许IP和DOMAIN（域名） 
        + '([0-9a-z_!~*\'()-]+.)*' // 域名- www. 
        + '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' // 二级域名 
        + '[a-z]{2,6})' // first level domain- .com or .museum 
        + '(:[0-9]{1,4})?' // 端口- :80 
        + '((/?)|' // a slash isn't required if there is no file name 
        + '(/[0-9a-zA-Z_!~*\'().;?:@&=+$,%#-]+)+/?)$';
    var re = new RegExp(strRegex);
    return re.test(url);
}

html下js相互引入

require需要node支持，浏览器不支持es6的import语法，这就为html下js之间调用制造了困难，解决方式是采用原生方式，在html文档中动态增加<script>元素实现

onLoadScript: function () {
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', './static/js/common.js');
    document.body.appendChild(script);
}