promise加载文件

1：

loadScript: function(url, id) {
  if (document.getElementById(id)) {
    return 1;
  } else {
    return new Promise(function(resolve, reject) {
      var script = document.createElement('script');
      script.id = id;
      script.src = url;
      if (document.all) {
        script.onreadystatechange = function() {
          if (script.readyState === 'loaded' || res.readyState === 'complete') {
            resolve();
          }
        };
      } else {
        script.onload = function() {
          resolve();
        };
        script.onerror = function(e) {
          reject(e);
        };
      }
      document.body.appendChild(script);
    });
  }
}

2：使用

Promise.all([e.loadScript('./js/jquery.min.js', 'add-jquery'), e.loadScript('./js/echarts.min.js',
    'add-echart'), getGradeList()]).then(function(result) {
    console.log(result);
    var list = result[2];
    e.bindAnalysis(list);
    console.log(list);
  }).catch(function(err) {
    console.log(err);
    e.$message.error("文件加载异常，请稍后再试");
    e.loading = !1;
  });

通过a标签获取链接参数对象，hash值，文件名等

https://j11y.io/javascript/parsing-urls-with-the-dom/

1:

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^/])/,'/$1'),
        relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^//,'').split('/')
    };
}

2:使用

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

js监听标签页是否隐藏与显示

http://www.yduba.com/qianduan-1491588986.html 可用于离开页面是停止播放视频和进入页面时自动播放视频

window.onbeforeunload = (e) => {
      if (this.$tool.getToken()) {
        this.saveExam();
        e = e || window.event;
        if (e) {
          e.returnValue = '正在考试中确定要离开吗？';
        }
        return '正在考试中确定要离开吗？';
      }
    };

js操作cookie

1:

var xl = {};

xl._setCookie = function(e, t, n) {
    var r = e + "=" + encodeURIComponent(t);
    if (n) {
        if (n.expires && "session" != n.expires) {
            var i = new Date;
            n.expires instanceof Date ? i = n.expires : isNaN(n.expires) ? "hour" == n.expires ? i.setHours(i.getHours() + 1) : "day" == n.expires ? i.setDate(i.getDate() + 1) : "week" == n.expires ? i.setDate(i.getDate() + 7) : "year" == n.expires ? i.setFullYear(i.getFullYear() + 1) : "forever" == n.expires ? i.setFullYear(i.getFullYear() + 120) : i = n.expires : i.setTime(i.getTime() + n.expires),
                r += "; expires=" + i.toGMTString()
        }
        r += n.path ? "; path=" + n.path : "; path=/",
            r += n.domain ? "; domain=" + n.domain : "; domain=*",
        n.secure && (r += "; secure=" + n.secure)
    }
    document.cookie = r
}
    ,
    xl.setCookie = function(e, t) {
        xl._setCookie(e, t, {
            expires: ""
        })
    }
    ,
    xl.delCookie = function(e) {
        xl.setCookie(e, "", {
            expires: new Date(0)
        })
    }
    ,
    xl.getCookie = function(e) {
        for (var t = document.cookie.split("; "), n = 0; n < t.length; n++) {
            var r = t[n].split("=");
            if (r[0] == e)
                return decodeURIComponent(r[1])
        }
        return null
    }


//设置cookies
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/";
}
//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return (encodeURI(arr[2]));
    else
        return null;
}
//删除cookies
function delCookie(name)
{
    //var exp = new Date();
    //exp.setTime(exp.getTime() - 1);
    //var cval=getCookie(name);
    //if(cval!=null)
    //    document.cookie= name + "="+cval+";expires="+exp.toGMTString()+";path=/";
    xl.delCookie(name);
}

class操作

export const hasClass = function(obj, cls) {
  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
};

export const addClass = function(obj, cls) {
  if (!hasClass(obj, cls)) obj.className += ' ' + cls;
};

export const removeClass = function(obj, cls) {
  if (hasClass(obj, cls)) {
    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    obj.className = obj.className.replace(reg, ' ');
  }
};

export const toggleClass = function(obj, cls) {
  if (hasClass(obj, cls)) {
    removeClass(obj, cls);
  } else {
    addClass(obj, cls);
  }
};

日期增加月

function addMonth(d,m){
   var ds=d.split('-'),_d=ds[2]-0;
   var nextM=new Date( ds[0],ds[1]-1+m+1, 0 );
   var max=nextM.getDate();
   d=new Date( ds[0],ds[1]-1+m,_d>max? max:_d );
   return d.toLocaleDateString().match(/\d+/g).join('-')
}

js阻止默认行为

  if (e.preventDefault) {
      e.preventDefault();
  } else {
      window.event.returnValue == false;
  }

拖动排序

var node = document.getElementById('drag-table');
var draging = null;
//使用事件委托，将li的事件委托给ul
node.ondragstart = function (event) {
    //console.log("start");
    //firefox设置了setData后元素才能拖动！！！！
    event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
    //event.dataTransfer.setData("self", event.target);
    draging = event.target;
}
node.ondragover = function (event) {
    //console.log("onDrop over");
    event.preventDefault();
    var target = event.target;
    //因为dragover会发生在ul上，所以要判断是不是li
    if (target.className == 'drage-icon') {
        var targetRect = target.getBoundingClientRect();
        var dragingRect = draging.parentElement.parentElement.getBoundingClientRect();
        if (target) {
            if (target.animated) {
                return;
            }
        }
        if (_index(draging.parentElement.parentElement) < _index(target.parentElement.parentElement)) {
            target.parentNode.parentNode.parentNode.insertBefore(draging.parentElement.parentElement, target.parentElement.parentElement.nextSibling);
        } else {
            target.parentNode.parentNode.parentNode.insertBefore(draging.parentElement.parentElement, target.parentElement.parentElement);
        }
        _animate(dragingRect, draging.parentElement.parentElement);
        _animate(targetRect, target);
    }
}
//获取元素在父元素中的index
function _index(el) {
    var index = 0;

    if (!el || !el.parentNode) {
        return -1;
    }

    while (el && (el = el.previousElementSibling)) {
        //console.log(el);
        index++;
    }

    return index;
}

function _animate(prevRect, target) {
    var ms = 300;

    if (ms) {
        var currentRect = target.getBoundingClientRect();

        if (prevRect.nodeType === 1) {
            prevRect = prevRect.getBoundingClientRect();
        }

        _css(target, 'transition', 'none');
        _css(target, 'transform', 'translate3d(' +
            (prevRect.left - currentRect.left) + 'px,' +
            (prevRect.top - currentRect.top) + 'px,0)'
        );

        target.offsetWidth; // 触发重绘
        //放在timeout里面也可以
        // setTimeout(function() {
        //     _css(target, 'transition', 'all ' + ms + 'ms');
        //     _css(target, 'transform', 'translate3d(0,0,0)');
        // }, 0);
        _css(target, 'transition', 'all ' + ms + 'ms');
        _css(target, 'transform', 'translate3d(0,0,0)');

        clearTimeout(target.animated);
        target.animated = setTimeout(function () {
            _css(target, 'transition', '');
            _css(target, 'transform', '');
            target.animated = false;
        }, ms);
    }
}
//给元素添加style
function _css(el, prop, val) {
    var style = el && el.style;

    if (style) {
        if (val === void 0) {
            if (document.defaultView && document.defaultView.getComputedStyle) {
                val = document.defaultView.getComputedStyle(el, '');
            } else if (el.currentStyle) {
                val = el.currentStyle;
            }

            return prop === void 0 ? val : val[prop];
        } else {
            if (!(prop in style)) {
                prop = '-webkit-' + prop;
            }

            style[prop] = val + (typeof val === 'string' ? '' : 'px');
        }
    }
}

拖动改变位置

var moveStar = false;
var disT, disR, mouseX, mouseY;
var $analysisBox;
$('.analysis-box').on('mousedown', function (e) {
    $analysisBox = $(this);
    moveStar = true;
    disT = $(this).css('top').replace('px', '') * 1;
    disR = $(this).css('right').replace('px', '') * 1;
    mouseX = e.clientX;
    mouseY = e.clientY;

    document.onmousemove = function (e) {
        if (moveStar) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                window.event.returnValue == false;
            }
            var moveX = mouseX - e.clientX;
            $analysisBox.css('right', disR + moveX);
            var moveY = e.clientY - mouseY;
            $analysisBox.css('top', disT + moveY);
        }
    };
    document.onmouseup = function () {
        moveStar = false;
        document.onmousemove = null;
        document.onmouseup = null;
    };
});