// 三元运算符使用的场景：条件赋值、递归等
// 条件赋值
const ageResult = (age) => {
  return age >= 18 ? '成年' : '未成年'
}
const printContent = ageResult(18) // 成年

// 递归
// 求整数和(0-n之间)
let sum = 0
const toSum = (n) => {
  sum += n
  return n >= 2 ? toSum(n - 1) : sum
}
console.log(toSum(5)) // 15

// 逻辑或运算使用：如果左边的判断为true，则返回左边式子的值；
// 否则返回右边式子的值。
// 优化之前的代码
let sum
const num1 = 1
const num2 = 2
if (num1) {
  sum = num1
} else {
  sum = num2
}

// 优化之后的代码
const sum = num1 || num2

// 代码没有改造之前，使用if-else语句
let answer
const val = '2'
if (val === '1') {
  answer = 'a'
} else if (val === '2') {
  answer = 'b'
} else {
  answer = 'c'
}
console.log(answer) // 'b'

// 代码被改造后，使用switch语法
let answer
const val = '2'
switch (val) {
  case '1':
    answer = 'a'
    break
  case '2':
    answer = 'b'
    break
  default:
    answer = 'c'
}
console.log(answer) // 'b'

// 对象配置
const val = '2'
let result = {
   1: 'a',
   2: 'b',
  default: 'c',
}
console.log(result[val]) // 'b'

// 策略模式
// 举一个例子：公司的年终奖根据员工的工资基数和绩效等级来发放的。
// 例如，绩效为A的人年终奖有4倍工资，绩效为B的有3倍，绩效为C的只有2倍。
// 代码没有改造之前
const calculateBonus = (performanceLevel, salary) => { 
  if (performanceLevel === 'A'){
      return salary * 4
  }
  if (performanceLevel === 'B'){
      return salary * 3
  }
  if (performanceLevel === 'C'){
      return salary * 2
  }
}
calculateBonus('A', 10000) // 输出：40000

// 代码改造之后之使用策略模式
let strategies = new Map([
    ['A', 4],
    ['B', 3],
    ['C', 2]
])
const calculateBonus = (performanceLevel, salary) => { 
    return strategies.get(performanceLevel) * salary
}
calculateBonus('A', 10000) // 输出：40000

// 创建策略对象，这个策略对象中包含了不同的计算策略，其实也是对象的方法；
// 我们将不同的计算方法放到了一起作为对象的方法，就相当于把他们组合放置
// 在一个篮子里，之后需要哪个就去拿哪个
const strategies = {
  A: function (salary) {
    return salary * 4
  },
  B: function (salary) {
    return salary * 3
  },
  C: function (salary) {
    return salary * 2
  },
}
// 创建一个计算函数
// 相比使用类的方式，使用策略模式会更清晰明了。再相比最开始直接使用
// if-else的方法，省去了条件判断，增加了程序的弹性、易扩展。
function calculateBouns (performanceLevel, salary) {
  return strategies[performanceLevel](salary);
}
console.log(calculateBouns('A', 10000)) // 40000

// 对上面我们还可以使用隐藏在策略模式下的高阶函数
const s1 = (salary) => {
  return salary * 4
}
const s2 = (salary) => {
  return salary * 3
}
const s3 = (salary) => {
  return salary * 2
}
const calculateBonus = (func, salary) => {
  return func(salary)
}
calculateBonus(s1, 10000) // 40000

<form action="http://xxx.com" id="registerForm" method="post">
    输入用户名：<input type="text" name="userName" />
    输入密码：<input type="text" name="password" />
    输入手机号码：<input type="text" name="phoneNumber" />
    <button>提交</button>
</form>

// 传统方式验证表单，可以看到验证算法通过if语句来实现，直接包含在表单提交方法里，
// 如果后期增加规则的话，还要来改动表单提交方法中的表单验证这一段代码，扩展性极差
const registerForm = document.getElementById('registerForm');
registerForm.onsubmit = () => {
  if (registerForm.userName.value === '') {
    alert('用户名不能为空');
    return false;
  }
  if (registerForm.password.value.length < 6) {
    alert('密码长度不能少于6 位');
    return false;
  }
  if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
    alert('手机号码格式不正确');
    return false;
  }
}

// 接下来我们通过策略模式来优化代码
// 将验证规则封装成策略对象
const strategies = {
  isNonEmpty: (value, errorMsg) => { // 不为空
    if (value === '') {
      return errorMsg;
    }
  },
  minLength: (value, length, errorMsg) => { // 限制最小长度
    if (value.length < length) {
      return errorMsg;
    }
  },
  isMobile: (value, errorMsg) => { // 手机号码格式
    if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  }
}

// Validator仅仅负责用户的请求，并将它委托给strategies策略对象
class Validator {
    constructor() {
        this.cache = [] // 保存校验规则
    }
    add(dom, rule, errorMsg) {
      const ary = rule.split(':')
      this.cache.push(() => {
        const strategy = ary.shift()
        // 把input的value添加进参数列表
        ary.unshift(dom.value)
        ary.push(errorMsg)
        return strategies[strategy].apply(dom, ary)
      })
    }
    start() {
      for (let i = 0; i < this.cache.length; i++) {
        const validatorFunc = this.cache[i]
        const msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
        if (msg) { // 如果有确切的返回值，说明校验没有通过
          return msg;
        }
      }
    }
}

const validataFunc = function () {
  const validator = new Validator()
  validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空')
  validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位')
  validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确')
  const errorMsg = validator.start() // 获得校验结果
  return errorMsg; // 返回校验结果
}

const registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
  // 如果errorMsg 有确切的返回值，说明未通过校验
  const errorMsg = validataFunc()
  if (errorMsg) {
    alert(errorMsg)
    return false // 阻止表单提交
  }
}