@setProp
class User {}

function setProp(target) {
 target.age = 30
}

console.log(User.age)

@setProp(20)
class User {}

function setProp(value) {
 return function (target) {
  target.age = value
 }
}

console.log(User.age)

class User {
 @readonly
 getName() {
  return 'Hello World'
 }
}

// readonly修飾函數(shù)，對方法進(jìn)行只讀操作
function readonly(target, name, descriptor) {
 descriptor.writable = false
 return descriptor
}

let u = new User()
// 嘗試修改函數(shù)，在控制臺(tái)會(huì)報(bào)錯(cuò)
u.getName = () => {
 return 'I will override'
}

descriptor.value = 'function (){ console.log('Hello decorator') }'

class Pack {
 @log('讀取package.json文件')
 step1() {
  // do something...
  // 沒有修飾器之前，我們通常把console.log放到這里寫
  // 放到函數(shù)里面寫會(huì)有兩個(gè)壞處
  //  1.console和業(yè)務(wù)無關(guān)，會(huì)破壞函數(shù)單一性原則
  //  2.如果要?jiǎng)h除所有的console，那我們只能深入到每一個(gè)方法中
 }
 @log('合并webpack配置文件')
 step2() {
  // do something...
 }
}

function log(value) {
 return function (target, name, descriptor) {
  // 在這里，我們還可以拿到函數(shù)的參數(shù)，打印更加詳細(xì)的信息
  console.log(value)
 }
}

let pack = new Pack()
pack.step1()
pack.step2()

class User {
 // 獲取已登錄用戶的用戶信息
 @checkLogin
 getUserInfo() {
  /**
   * 之前，我們都會(huì)這么寫：
   *  if(checkLogin()) {
   *   // 業(yè)務(wù)代碼
   *  }
   * 這段代碼會(huì)在每一個(gè)需要登錄的方法中執(zhí)行
   * 還是上面的問題，執(zhí)行的前提和業(yè)務(wù)又混到了一起
   */
  console.log('獲取已登錄用戶的用戶信息')
 }
 // 發(fā)送消息
 @checkLogin
 sendMsg() {
  console.log('發(fā)送消息')
 }
}

// 檢查用戶是否登錄，如果沒有登錄，就跳轉(zhuǎn)到登錄頁面
function checkLogin(target, name, descriptor) {
 let method = descriptor.value

 // 模擬判斷條件
 let isLogin = true

 descriptor.value = function (...args) {
  if (isLogin) {
   method.apply(this, args)
  } else {
   console.log('沒有登錄，即將跳轉(zhuǎn)到登錄頁面...')
  }
 }
}
let u = new User()
u.getUserInfo()
u.sendMsg()