vue.js 源代码学习笔记 ----- 工具方法 lang

 

 

/* @flow */
// Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的
export const emptyObject = Object.freeze({})


/**
 * Check if a string starts with $ or _
   ascii unicode 的区别
　　
   charcodeAt是一个字符的 unicode编码, 但是像 0x24 (代表的是 $ )  0x5f (代表的是 _ ) 因为是字符, 先存着ascii编码中, 所以用ascii转换
    
   $ _ 作为保留字, 这里判断输入的字符是否是vue可能使用的关键字, 比如 $set _bind 等等
 */
export function isReserved (str: string): boolean {
  const c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5F
}


/**
 * Define a property.
   这里简单的定义一个对象, 定义它的值 和 是否能在for...in循环中遍历出来或在Object.keys中列举出来。
 */
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true  //注意要设置成true, 否则后面就不能设置value了
  })
}

/**
 * Parse simple path.
   解析简单的路径, 比如 o.corp.$1, 是合法的, 不在正则 bailRE中
   而 o.corp.names[0]是不合法的, 会被直接return, 因为对象才能被defineProperty, 数组是不能监听的.
　　
　　使用
　　var path = parsePath('o.corp.$1');
　　var obj = { o:{ corp: { $1: 'haha' } } }
    
   path( obj )  ==> 'haha'

   这里没有直接用 eval或者 new Function去解析路径, 应该是考虑到用这两个会有性能的损耗, 另外eval在一些浏览器会提示作用域变成全局的, 比较的危险
   另外, new Function eval 还可以转换 js语句的字符串, 所以会有一些安全问题, xss注入等
 */
const bailRE = /[^\w.$]/


export function parsePath (path: string): any {
  if (bailRE.test(path)) {
    return
  }
  //得到一个数组 ['o', 'corp', '$1' ]
  const segments = path.split('.')

  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return

　　　　// obj = obj['o'] => obj=obj['o']['corp'] = > obj=obj['o']['corp']['$1'], 这就是不断改变obj的值, 使obj指向自己属性的过程
　　　　// 最后返回 $1的值 'haha'

      obj = obj[segments[i]];
    }
    return obj
  }
}