var eventUtil = {
  addHandler: function(element, type , handler){
    if(element.addEventlistener){
      element.addEventlistene(type,handler,false);
    }else if(element.attachEvent){
      element.attachEvent('on'+type,handler);
    }else{
      element['on'+type] = handler
    }
  }
}

var eventUtil={
  // 添加句柄
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
      element.attachEvent('on'+type,handler);
    }else{
      element['on'+type]=handler;
    }
  },
  // 删除句柄
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
      element.detachEvent('on'+type,handler);
    }else{
      element['on'+type]=null;
    }
  },
  
  getEvent:function(event){
    return event?event:window.event;
  },

  getType:function(event){
    return event.type;
  },
  
  getElement:function(event){
    return event.target || event.srcElement;
  },

  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
       event.returnValue=false;
      }
    },

  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
}

var frag = document.createDocumentFragment();
var li = document.createElement("li");
li.innerHTML = "List item ";
frag.appendChild(li);
document.getElementById("list-node").appendChild(frag)

var containerElement = document.getElementById("container");
containerElement.nodeType == Node.ELEMENT_NODE
containerElement.nodeType == 1
containerElement.nodeName == 'div'
containerElement.nodeValue == 'Falldown'
containerElement.attributes[0]
containerElement.childNodes[0]
document.doctype

var testDiv = document.createElement("div");
var isElement = function (obj) {
if (obj && obj.nodeType === 1) {
  //先过滤最简单的
  if (window.Node && obj instanceof Node) {
    //如果是IE9,则判定其是否Node的实例
    return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
  }
  try {
    //最后以这种效率非常差但肯定可行的方案进行判定
    testDiv.appendChild(obj);
    testDiv.removeChild(obj);
  } catch (e) {
    return false;
  }
    return true;
  }
  return false;
};
isElement(document.getElementByID("test"));

var testDiv = document.createElement('div');
var isElement = function (obj) {
if (obj && obj.nodeType === 1) {//先过滤最简单的
  if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例
    return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
  }
  try {//最后以这种效率非常差但肯定可行的方案进行判定
    testDiv.appendChild(obj);
    testDiv.removeChild(obj);
  } catch (e) {
    return false;
  }
  return true;
}
  return false;
}

var isHTMLElement(el){
  if(isElement){
    return isXML(el.ownerDocument);
  }
  return false;
}

//Sizzle, jQuery自带的选择器引擎
var isXML = function (elem) {
var documentElement =
  elem && (elem.ownerDocument || elem).documentElement;
  return documentElement ? documentElement.nodeName !== "HTML" : false;
};
console.log(isXML(document.getElementById("test")));

//但这样不严谨，因为XML的根节点，也可能是HTML标签，比如这样创建一个XML文档
try {
  var doc = document.implementation.createDocument(null, "HTML", null);
  console.log(doc.documentElement);
  console.log(isXML(doc));
} catch (e) {
  console.log("不支持creatDocument方法");
}

//我们看看mootools的slick选择器引擎的源码：
var isXML = function (document) {
return (
  !!document.xmlVersion || !!document.xml || toString.call(document) == "[object XMLDocument]" || (document.nodeType == 9 && document.documentElement.nodeName != "HTML"));
};

//精简版
var isXML = window.HTMLDocument
? function (doc) {
  return !(doc instanceof HTMLDocument);
} : function (doc) {
  return "selectNodes" in doc;
};

var isXML = function (doc) {
  // 判断返回大小写区分 xml 和 html
  return (doc.createElement("p").nodeName !== doc.createElement("P").nodeName);
};

 var pNode = document.getElementById("p-node");
 var cNode = document.getElementById("c-node").childNodes[0];
 alert(pNode.contains(cNode));

 function fixContains(a, b) {
	try {
	  while ((b = b.parentNode)){
	    if (b === a){
	      return true;
	    }
	  }
	  return false;
	} catch (e) {
	    return false;  
   }
}
var pNode = document.getElementById("p-node");
var cNode = document.getElementById("c-node").childNodes[0];
alert(fixContains(pNode, cNode));

window.onload

function myReady(fn){
  //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
  if ( document.addEventListener ) {
      document.addEventListener("DOMContentLoaded", fn, false);
  } else {
      IEContentLoaded(fn);
  }

  //IE模拟DOMContentLoaded
  function IEContentLoaded (fn) {
      var d = window.document;
      var done = false;

      //只执行一次用户的回调函数init()
      var init = function () {
          if (!done) {
              done = true;
              fn();
          }
      };

      (function () {
          try {
              // DOM树未创建完之前调用doScroll会抛出错误
              d.documentElement.doScroll('left');
          } catch (e) {
              //延迟再试一次~
              setTimeout(arguments.callee, 50);
              return;
          }
          // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
          init();
      })();

      //监听document的加载状态
      d.onreadystatechange = function() {
          // 如果用户是在domReady之后绑定的函数，就立马执行
          if (d.readyState == 'complete') {
              d.onreadystatechange = null;
              init();
          }
      }
  }
}

goBack() {
  window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
    { path: '/user/:username/post/:post_id', component: User }
  ]
})

// 接受参数
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
this.$route.params.id

watch: {
  $route(to, from) {
    // 对路由变化作出响应...
  }
  // 导航守卫
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User, name:'user',}
  ]
})

// 传值
this.$router.push({
  name:"'user'",//这个name就是你刚刚配置在router里边的name
  params:{
    userId:"10011"
  }
})

// 取值
this.$route.params.userId

//  传值
this.$router.push({
  path:"/user",//这个path就是你在router/index.js里边配置的路径
  query:{
    userId:"10011"
  }
})

// 取值
this.$router.currentRoute.query.userId
this.$route.query.userId

0 == false // true 
0 === false // false 
2 == "2" // true 
2 === "2" // false 

// example 
const val = "123"; 
if (val === 123) { 
  console.log(val); 
  // it cannot not be reached 
} 
if (val === "123") { 
  console.log(val); 
  // it can be reached
}

// 不推荐
let daysSLV = 10;
let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
  ok = true;
}

//  推荐
const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();
...
const isUserOlderThanAllowed = user.age > MAX_AGE;

// 不要添加一些额外且不必要的词汇到你的变量名称中。

let nameValue;
let theProduct;

// 推荐
let name; 
let product;

function Person(name) {
  this.name = name;
}  


function Student(name) {  
  Person.call(this, name);
}

Student.prototype = Object.create(Person.prototype);
//  Student 的原型会被设置为 Person。

// 实际上想要将 Student 的原型设置为 Student。
// 需要这么写
Student.prototype.constructor = Student;

// 或者
class Student extends Person {
}

<script id="worker" type="javascript/worker">
  self.onmessage = (e) => {
    self.postMessage('msg');
  };
</script>
<script>
  const blob = new Blob([
    document.querySelector('#worker').textContent
  ]);

  const worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = (e) => {
    console.log(e.data);
  }
  worker.postMessage("hello");
</script>

//  不要这么写
['1','2','3'].map(parseInt)

// 可以
['1','2','3'].map(Number)
['1','2','3'].map(num => parseInt(num, 10))

// 当 x === 1 返回 false 不想调用 doSomethingElse 时
x === 1 ? doSomething() : doSomethingElse();

// 可以
x === 1 && doSomething();

yarn cache clear

const el = document.getElementById('foo');
el.textContent = 'foo';

const tool = {
  //base64转file
  dataURLtoFile (dataurl, filename) {
    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {type: mime})
  },

  // 压缩图片
  compress (img) {
    let originWidth = img.width, // 压缩后的宽
      originHeight = img.height,
      maxWidth = 600, maxHeight = 600,
      quality = 0.8, // 压缩质量
      canvas = document.createElement('canvas'),
      drawer = canvas.getContext('2d');
    // 目标尺寸
    let targetWidth = originWidth,
      targetHeight = originHeight
    // 图片尺寸超过300x300的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > maxWidth / maxHeight) {
        // 更宽，按照宽度限定尺寸
        targetWidth = maxWidth
        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
        targetHeight = maxHeight
        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
    }
    canvas.width = targetWidth
    canvas.height = targetHeight
    drawer.clearRect(0, 0, canvas.width, canvas.height)
    drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
    let base64 = canvas.toDataURL('image/jpeg', quality) // 压缩后的base64图片
    let file = this.dataURLtoFile(base64, Date.parse(Date()) + '.jpg')
    file = {content: base64, file: file}
    console.log(file)//压缩后的file
    return file
  },
}
export default tool

1. 可以直接把base64数据转为File对象，如下：
// dataUrl数据转为File对象，dataUrl表示图片的base64数据
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length; var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}
2. 或者你想把上文 方法返回的blob对象转为File对象，可以这样写：
/**
 * Blob对象转为File对象
 * @param {object} blob 二进制对象
 * @param {string} fileName 文件名称
 * @return {object} blob改造后的file文件对象。
 * 注意：file对象就是一个特殊的blob对象
 */
function blobToFile(blob, fileName){
  blob.lastModifiedDate =new Date();
  blob.name = fileName;
  return blob;
}