这个是dntzhang写的用于监听变量更改的库obaa，加上一点注释方便理解~
/* obaa 1.0.0
* By dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
; (function (win) {
var obaa = function (target, arr, callback) {
var _observe = function (target, arr, callback) {
//if (!target.$observer) target.$observer = this
// $observer指向这个要返回的对象
var $observer = this
// 被监听的属性列表
var eventPropArr = []
// 如果是数组先监听数组的变异操作
if (obaa.isArray(target)) {
if (target.length === 0) {
target.$observeProps = {}
target.$observeProps.$observerPath = '#'
}
$observer.mock(target)
}
// 遍历非继承的key值
for (var prop in target) {
if (target.hasOwnProperty(prop)) {
// 传入三个参数时（指定了要监听的key值）
if (callback) {
// 以array方式指定
if (obaa.isArray(arr) && obaa.isInArray(arr, prop)) {
eventPropArr.push(prop)
$observer.watch(target, prop)
}
// 以string方式指定
else if (obaa.isString(arr) && prop == arr) {
eventPropArr.push(prop)
$observer.watch(target, prop)
}
}
// 传入两个参数时（代表监听所有的key值）
else {
eventPropArr.push(prop)
$observer.watch(target, prop)
}
}
}
// 留一个原始对象的引用（后面返回的时候用到）
$observer.target = target
// 如果没有 handler 队列，初始化一个
if (!$observer.propertyChangedHandler)
$observer.propertyChangedHandler = []
// 根据参数个数赋值回调函数
var propChanged = callback ? callback : arr
// 把回调放入 handler 队列中
// 下面的all代表了监听所有的key
$observer.propertyChangedHandler.push({
all: !callback,
propChanged: propChanged,
eventPropArr: eventPropArr
})
}
_observe.prototype = {
// 当有值修改时的的响应函数
// 这个方法定义在原型上了，所有对象都共用这个方法
onPropertyChanged: function (prop, value, oldValue, target, path) {
// 如果值有变化且当前对象有 Handler
if (value !== oldValue && this.propertyChangedHandler) {
// 根的名字？
var rootName = obaa._getRootName(prop, path)
// 遍历当前对象所有的 Handler
for (
var i = 0, len = this.propertyChangedHandler.length;
i < len;
i++
) {
var handler = this.propertyChangedHandler[i]
// .all - 当前监听所有变化
// isInArray - 当前节点在 handler 监听列表中
// rootName 以 Array- 开头
if (
handler.all ||
obaa.isInArray(handler.eventPropArr, rootName) ||
rootName.indexOf('Array-') === 0
) {
// 调用 handler 的 propChanged 方法
// 并把 上下文设为 this.target
handler.propChanged.call(this.target, prop, value, oldValue, path)
}
}
}
// 如果属性不以 Array- 开头（不是数组的操作方法） && 值为 object（数组、对象或者null）
if (prop.indexOf('Array-') !== 0 && typeof value === 'object') {
// 监听这个属性
// 应该是为了保证新加入的属性也能被监听到？
this.watch(target, prop, target.$observeProps.$observerPath)
}
},
// 模拟数组操作（覆盖原有的数组操作方法）
// 作用是监听数组的操作方法
mock: function (target) {
var self = this
// 修改操作数组的方法，这里的item是push、splice这些方法名字符串
obaa.methods.forEach(function (item) {
target[item] = function () {
var old = Array.prototype.slice.call(this, 0)//拷贝一份数组
var result = Array.prototype[item].apply(
this,
Array.prototype.slice.call(arguments)
)//调用时先执行原来应该有的效果
// 如果触发列表中有的话（下面有一个触发的方法列表）
// 其实这里直接只遍历触发列表就可以了吧？
// 还是说这样就可以实现类数组对象的操作了？
if (new RegExp('\\b' + item + '\\b').test(obaa.triggerStr)) {
// 遍历target的所有非继承得到的、非可执行函数的属性
// 对这个属性调用watch方法
for (var cprop in this) {
if (
this.hasOwnProperty(cprop) &&
!obaa.isFunction(this[cprop])
) {
self.watch(this, cprop, this.$observeProps.$observerPath)
}
}
//todo
// 以 Array- 开头加上 方法名，调用 onPropertyChanged 方法
self.onPropertyChanged(
'Array-' + item,
this,
old,
this,
this.$observeProps.$observerPath
)
}
return result
}
// 把原来的数组操作方法用 purePush 这种命名暴露出去
// 大概是为了提供一个能够直接操作但不被监听到的方法
target[
'pure' + item.substring(0, 1).toUpperCase() + item.substring(1)
] = function () {
return Array.prototype[item].apply(
this,
Array.prototype.slice.call(arguments)
)
}
})
},
watch: function (target, prop, path) {
// 不监听用来监听的属性（大概是为了避免循环中修改了存储用的属性）
if (prop === '$observeProps' || prop === '$observer') return
// 不监听函数
if (obaa.isFunction(target[prop])) return
// 没有的话初始化监听属性
if (!target.$observeProps) target.$observeProps = {}
// 如果传入path，把path存入observeProps
// 如果未传path（代表是根节点），把path设为 ‘#’
if (path !== undefined) {
target.$observeProps.$observerPath = path
} else {
target.$observeProps.$observerPath = '#'
}
var self = this
// 把target的属性值复制到 $observeProps 里，
// 用 currentValue 表示当前复制的值
var currentValue = (target.$observeProps[prop] = target[prop])
// 使用getter和setter对属性进行监听
// 操作时使用$observeProps进行操作
// 当被赋值时调用对象的 onPropertyChanged 方法（让对象自己处理响应）
Object.defineProperty(target, prop, {
get: function () {
return this.$observeProps[prop]
},
set: function (value) {
var old = this.$observeProps[prop]
this.$observeProps[prop] = value
self.onPropertyChanged(
prop,
value,
old,
this,
target.$observeProps.$observerPath
)
}
})
// 如果当前遍历到的值是对象（数组）的话
if (typeof currentValue == 'object') {
if (obaa.isArray(currentValue)) {
// 递归模拟数组的操作方法
this.mock(currentValue)
// 如果是空数组
// 初始化对象的 $observeProps
// 初始化对象的 $observerPath
if (currentValue.length === 0) {
if (!currentValue.$observeProps) currentValue.$observeProps = {}
if (path !== undefined) {
currentValue.$observeProps.$observerPath = path
} else {
currentValue.$observeProps.$observerPath = '#'
}
}
}
// 遍历那些非继承得到的属性
for (var cprop in currentValue) {
if (currentValue.hasOwnProperty(cprop)) {
// 对这些属性进行监听
this.watch(
currentValue,
cprop,
target.$observeProps.$observerPath + '-' + prop
)
}
}
}
}
}
// 在这个omi-mp-create里未用到这个返回值
return new _observe(target, arr, callback)
}
// 数组被重新修改了的方法列表
// （或者说被监听了）
obaa.methods = [
'concat',
'copyWithin',
'entries',
'every',
'fill',
'filter',
'find',
'findIndex',
'forEach',
'includes',
'indexOf',
'join',
'keys',
'lastIndexOf',
'map',
'pop',
'push',
'reduce',
'reduceRight',
'reverse',
'shift',
'slice',
'some',
'sort',
'splice',
'toLocaleString',
'toString',
'unshift',
'values',
'size'
]
// 数组方法中会触发事件的方法列表（最后被join了一下成一个字符串）
obaa.triggerStr = [
'concat',
'copyWithin',
'fill',
'pop',
'push',
'reverse',
'shift',
'sort',
'splice',
'unshift',
'size'
].join(',')
obaa.isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]'
}
obaa.isString = function (obj) {
return typeof obj === 'string'
}
obaa.isInArray = function (arr, item) {
for (var i = arr.length; --i > -1;) {
if (item === arr[i]) return true
}
return false
}
obaa.isFunction = function (obj) {
return Object.prototype.toString.call(obj) == '[object Function]'
}
// 得到根的名字
// 如果已经是根则返回当前属性名字（现在这个就是根）
// 否则返回path中最上级的那一层
obaa._getRootName = function (prop, path) {
if (path === '#') {
return prop
}
return path.split('-')[1]
}
// 暴露的方法，作用是监听obj的某个已存在属性
obaa.add = function (obj, prop) {
var $observer = obj.$observer
$observer.watch(obj, prop)
}
// 暴露的方法，用于为obj赋值一个属性并监听这个属性
obaa.set = function (obj, prop, value, exec) {
if (!exec) {
obj[prop] = value
}
var $observer = obj.$observer
$observer.watch(obj, prop)
if (exec) {
obj[prop] = value
}
}
// 额外的size方法，使用size修改数组长度而非直接赋值
// 避免js不能监听数组.length属性的问题
Array.prototype.size = function (length) {
this.length = length
}
// 判断运行环境，把obaa对象暴露出去
if (
typeof module != 'undefined' &&
module.exports
) {
module.exports = obaa
} else if (typeof define === 'function' && define.amd) {
define(obaa)
} else {
win.obaa = obaa
}
})(Function('return this')())
// 这里使用Function是为了取到全局变量的this，也就是window对象
// 见MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function