// fill with the template
"12".padStart(3, "000") // '012'
"12".padEnd(3, "000") // '120'

// fill with space
"12".padStart(4) // '  12'

let str = "    string    "

// str.trimLeft()
str.trimStart() // 'string    '

// str.trimRight()
str.trimEnd() // '    string'

const fs = require("fs")
const path = require("path")
fs.readFile(path.join(__dirname, "./1.txt"), "utf-8", (err, dataStr) => {
  if (err) throw err
  console.log(dataStr)
})

// class factory
function classFactory(phone) {
  return class {
    getName() {
      return phone
    }
  }
}

let _187 = classFactory("18720128815")
console.log(new _187().getName())

class User {
  ["say" + "Hi"]() {
    console.log("hi")
  }
}

new User()["sayHi"]

// class field
class User {
  name = "Edward" // is not at the prototype
}

const user = new User()
console.log(user.name) // Edward
console.log(User.prototype.name) // undefined

let animal = {
  name: "Animal",
  eat() {
    console.log(this.name + " eat")
  },
}

let rabbit = {
  __proto__: animal, // extends animal
  eat() {
    super.eat()
  },
}

let err = {
  __proto__: rabbit, // extends rabbit
  name: "err obj",
  eat() {
    super.eat()
  },
}

// super.eat() -> [[Rabbit.prototype]].eat
// -> super.eat -> [[Animal.prototype]].eat
// this -> err
err.eat()

class Animal {}
class Rabbit extends Animal {}
console.log(Rabbit.__proto__ === Animal) // class extends link
console.log(Rabbit.prototype.__proto__ === Animal.prototype) // prototype extends link

let user = {
  name: "Edward",
  hello(name) {
    console.log(`hi ${this.name}, this is ${name}`)
  },
}

Function.prototype.defer = function (ms) {
  let f = this
  return function (...arg) {
    setTimeout(() => f.apply(this, arg), ms)
  }
}

user.hello = user.hello.defer(1000)
user.hello("Ejklfj") // will delay 1000ms

class Animal {
  static [Symbol.hasInstance](obj) {
    if (obj.canEat) return true
  }
}

let obj = { canEat: true }
console.log(obj instanceof Animal) // it will find from the [[Prototype]]

class User {
  static staticMethod() {
    console.log(this === User)
  }
}

class Article {
  constructor(title, date) {
    this.title = title
    this.date = date
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date
  }
}

let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("Css", new Date(2019, 0, 1)),
]

articles.sort(Article.compare)
console.log(articles)

var EventUtil = {
  addHandler: function (element, type, handler) {
    //添加事件
    if (element.addEventListener) {
      element.addEventListener(type, handler, false) //使用DOM2级方法添加事件
    } else if (element.attachEvent) {
      //使用IE方法添加事件
      element.attachEvent("on" + type, handler)
    } else {
      element["on" + type] = handler //使用DOM0级方法添加事件
    }
  },

  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) {
    //使用这个方法跨浏览器取得event对象
    return event ? event : window.event
  },

  getTarget: function (event) {
    //返回事件的实际目标
    return event.target || event.srcElement
  },

  preventDefault: function (event) {
    //阻止事件的默认行为
    if (event.preventDefault) {
      event.preventDefault()
    } else {
      event.returnValue = false
    }
  },

  stopPropagation: function (event) {
    //立即停止事件在DOM中的传播
    //避免触发注册在document.body上面的事件处理程序
    if (event.stopPropagation) {
      event.stopPropagation()
    } else {
      event.cancelBubble = true
    }
  },

  getRelatedTarget: function (event) {
    //获取mouseover和mouseout相关元素
    if (event.relatedTarget) {
      return event.relatedTarget
    } else if (event.toElement) {
      //兼容IE8-
      return event.toElement
    } else if (event.formElement) {
      return event.formElement
    } else {
      return null
    }
  },

  getButton: function (event) {
    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    if (document.implementation.hasFeature("MouseEvents", "2.0")) {
      return event.button
    } else {
      switch (
        event.button //将IE模型下的button属性映射为DOM模型下的button属性
      ) {
        case 0:
        case 1:
        case 3:
        case 5:
        case 7:
          return 0 //按下的是鼠标主按钮
        case 2:
        case 6:
          return 2 //按下的是中间的鼠标按钮
        case 4:
          return 1 //鼠标次按钮
      }
    }
  },

  getWheelDelta: function (event) {
    //获取表示鼠标滚轮滚动方向的数值
    if (event.wheelDelta) {
      return event.wheelDelta
    } else {
      return -event.detail * 40
    }
  },

  getCharCode: function (event) {
    //以跨浏览器取得相同的字符编码，需在keypress事件中使用
    if (typeof event.charCode == "number") {
      return event.charCode
    } else {
      return event.keyCode
    }
  },
}