(深入浅出)全面理解Vue2源码(一)

269 阅读3分钟

1.判断一个数据的数据类型

Vue源码片段:

const _toString = Object.prototype.toString;
function toRawType (value) {
  return _toString.call(value).slice(8, -1)
}

利用Object.prototype.toString判断数据的数据类型,他的返回值是[object Object],截取(8,-1),剩下的正好是数据类型

2.多层3元运算符的(习惯)

Vue源码片段(类似的很多):

function toString (val) {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}
//还有下面这一段,要能快速的读出三元要表达的意思,毕竟喜欢这样写的人不少
/* istanbul ignore next */
function polyfillBind (fn, ctx) {
  function boundFn (a) {
    const l = arguments.length;
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }

这种多层的三元接在一起,要用整体的思维来读,将一个三元看成一个整体,由里到外,这样解读。

3.制作一个映射关系来检查关键kEY是否在映射中

Vue源码:

/**
 * Make a map and return a function for checking if a key
 * is in that map.
 */
function makeMap (
  str,
  expectsLowerCase
) {
  // 创造一个原型为空的对象,他的身上可没有object 的属性和方法
  const map = Object.create(null);
  const list = str.split(',');  // [a,b,c,d,e,f]
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true;
  }
  // 可以迎来判断一个字符串是否在另一个字符串里(以逗号为分割)
  return expectsLowerCase
    ? val => map[val.toLowerCase()]
    : val => map[val]
}
//在对象中,通过键名来查找属性是最快的,map相当于一个容器,减少变量的声名(自带去重功能)

拓展一下:如何最快的将一个数组中的对象中的中文键,换成另外一组英文键,值不变?(重点)

//这是映射关系
// const mapInfo = {
      //   '入职日期': 'timeOfEntry',
      //   '手机号': 'mobile',
      //   '姓名': 'username',
      //   '转正日期': 'correctionTime',
      //   '工号': 'workNumber',
      //   '部门': 'departmentName',
      //   '聘用形式': 'formOfEmployment'
      // }
 transExcel(results) {
      
      return results.map(zhObj => {
        const enObj = {} // enObj: {'timeOfEntry': 44505}
        // 1. 拿到所有的中文 key
        // Object.keys() 获取对象所有的属性名
        // zhKeys: ['入职日期', '姓名', '工号', '手机号', '转正日期', '部门']
        const zhKeys = Object.keys(zhObj)
        // 2. 将中文 key 转为英文 key
        // console.log(zhKeys)
        zhKeys.forEach(zhKey => {
          // 根据入职日期中文, 取出对应的英文 timeOfEntry
          const enKey = importMapInfo.mapInfo[zhKey]
          // 3. 拼装成英文对象,直接通过键赋值的方法
          enObj[enKey] = zhObj[zhKey]
        })
        return enObj
      })
    }
 //这样操作是效率最快的,没有之一(我司大大说的)

4.拓展知识点:柯里化函数

柯里化函数:把接收多个参数的函数变成一个可以接收单一参数的函数,并且返回接受余下的参数并返回结果的新函数”

举个例子:add(1)(2)(3)(4) == add(1,2,3,4) //柯里化函数 特点:

  1. add(1)返回一个函数
  2. add(1,2,3,4)返回一个数据 如何操作??? 上代码··
function add (a, b, c, d) {
          return [
            ...arguments
          ].reduce((prev, item) => prev + item)
        }
        // 
function currying (fn) {
//关键代码,可以得到函数形参的个数
  let len = fn.length
  let args = []
//关键代码
  return function _c (...newArgs) {
    // 合并参数
    args = [
      ...args,
      ...newArgs
    ]
    // 判断当前参数集合args的长度是否 < 目标函数fn的需求参数长度
    if (args.length < len) {
      // 继续返回函数(细节)
      return _c
    } else {
      // 只有当args.length>4返回函数调用(细节)
      return fn.apply(this, args.slice(0, len))
    }
  }
}

   let addCurry = currying(add)
   let total = addCurry(1)(2)(3)(4) // 同时支持addCurry(1)(2, 3)(4)该方式调用
   console.log(total) // 10

这段代码看不懂可以私信我,包教会,学不会地址发你过来砍我···