第九章----客户端检测

这一章节主要讲了三大块，浏览器能力检测、浏览器怪癖检测和浏览器类型检测。

一、浏览器能力检测
这其实是一种很重要的习惯，同时也可以培养自我编程的严谨性。比如，当我们需要做一个事件注册函数时，我们会怎么写？

1、未进行浏览器能力检测

// 事件注册函数 未进行能力检测
const addEvent = function(el, type, handler) {
  el.addEventListener(type, handler)
}

2、进行浏览器能力检测

// 事件注册函数 进行能力检测
const addEvent = function (el, type, handler) {
  // 检测是否支持DOM2事件
  if (el.addEventListener) {
    el.addEventListener(type, handler)
    return ''
  } 

  // 检测是否支持IE绑定事件
  if (el.attachEvent) {
    el.attachEvent('on' + type, handler)
    return ''
  }

  // 检测是否支持DOM1事件
  if(document.getElementById) {
    el['on' + type] = handler
    return ''
  }
  return 'No way to banding event!'
}

二、浏览器怪癖检测
就是针对某些浏览器中遗留的某些bug进行针对性的检测处理。

三、浏览器类型检测
通过正则截取相应头部中user-agent属性中的浏览器名称或操作系统等特殊字符段来进行浏览器的区分判断。

四、在编写函数处理中，对传入参数格式是否有效检测较于能力检测更为重要。比如

const parse = (obj, str) => {
  const checkReg = /^[a-zA-Z0-9]+(\.[a-zA-Z0-9]+|\[[a-zA-Z0-9]+\])*$/g

  // 验证是否为键值对对象
  if (obj instanceof Object) {
    const [objType] = obj.constructor.toString().match(/\w+(?=\(\))/g)
    if (objType !== 'Object') {
      return '请输入数据源为对象'
    }
  } else {
    return '请输入数据源为对象'
  }

  // 验证索引字符串是否格式有效
  if (!checkReg.test(str)) {
    return '请输入有效格式'
  }

  // 检索并获取所对应值
  const [firstIndex] = str.match(/^[a-zA-Z0-9]+(?=[\.\[])/g)
  const childrenIndexsArr = str.match(/(?<=[\.\[])[a-zA-Z0-9]+/g)
  const indexsArr = childrenIndexsArr ? [firstIndex, ...childrenIndexsArr] : [firstIndex]
  let currentValue = obj // 储存目前节点值
  indexsArr.forEach(item => {
    if (currentValue[item]) {
      currentValue = currentValue[item]
    } else {
      return currentValue[item]
    }
  })

  return currentValue
}