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

vue

/* @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

}

}

以上是 vue.js 源代码学习笔记 ----- 工具方法 lang 的全部内容, 来源链接: utcz.com/z/374674.html

回到顶部