liulinboyi/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Colors</title>
</head>
<style>
	#div {
		width: 50px;
		height: 50px;
		border: 1px red solid;
		text-align: center;
		line-height: 50px;
	}
  #color {
    width: 100px;
    height: 100px;
  }
  #r,#g,#b {
    display: block;
  }
</style>

<body>
  <!-- <div id=div></div> -->
  <input type=range min=0 max=255 id=r />
  <input type=range min=0 max=255 id=g />
  <input type=range min=0 max=255 id=b />

  <div id=color>
  </div>

  <div id=showcolor></div>
<script id="jsbin-javascript">
'use strict';

var targetMap = new WeakMap();

var effectStack = [];

var baseHandler = {
  get: function get(target, key) {
    // 栈顶
    if (effectStack[effectStack.length - 1]) {
      // 查看targetMap里面有没有当前对象
      var depMap = targetMap.get(target);
      // targetMap里面没有当前对象
      if (depMap === void 0) {
        // 创建一个新的Map作为存储在targetMap中target为key的value
        // 形如{target => depMap}
        depMap = new Map();
        targetMap.set(target, depMap);
      }
      var deps = depMap.get(key);
      // 查看depMap中是否存储key
      if (deps === void 0) {
        // 如果没有创建一个deps
        // 创建一个新的deps作为存储在depMap中key为key的value
        // 形如{key => deps}
        deps = new Set();
        depMap.set(key, deps);
      }
      // 最后targetMap形如
      // {target => {key => deps}} deps中存储哪些方法/函数依赖这个key
      if (!deps.has(effectStack[effectStack.length - 1])) {
        deps.add(effectStack[effectStack.length - 1]);
      }
    }
    var getRes = target[key];
    if (typeof getRes === 'object') {
      console.log(getRes);
      getRes = reactive(getRes);
      console.log(getRes);
    }

    return getRes;
  },
  set: function set(target, key, value) {
    target[key] = value;
    var depMap = targetMap.get(target);
    if (depMap) {
      if (depMap.get(key).size > 0) {
        trigger(target, key);
      }
    }
    return true;
  }
};

function reactive(target) {
  var observed = new Proxy(target, baseHandler);
  return observed;
}

function effect(fn) {
  try {
    effectStack.push(fn);
    fn();
  } finally {
    effectStack.pop();
  }
}

function trigger(target, key) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = targetMap.get(target).get(key)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var _effect = _step.value;

      _effect();
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator['return']) {
        _iterator['return']();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
}

var rgb = {
  r: 102,
  g: 191,
  b: 255
};
var test = {
  a: { b: { c: 1 } }
};
var proxy_test = reactive(test);
console.log(proxy_test);
proxy_test.a.b.c = 4;
var proxy_rgb = reactive(rgb);
r.value = proxy_rgb.r;
g.value = proxy_rgb.g;
b.value = proxy_rgb.b;
color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
r.addEventListener('input', function (e) {
  proxy_rgb.r = r.value;
});
g.addEventListener('input', function (e) {
  proxy_rgb.g = g.value;
});
b.addEventListener('input', function (e) {
  proxy_rgb.b = b.value;
});

effect(function () {
  color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
  showcolor.innerText = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
});

console.log(targetMap);
</script>


<script id="jsbin-source-javascript" type="text/javascript">const targetMap = new WeakMap()

const effectStack = [];

const baseHandler = {
  get(target,key) {
    // 栈顶
    if(effectStack[effectStack.length - 1]) {
      // 查看targetMap里面有没有当前对象
    let depMap = targetMap.get(target);
      // targetMap里面没有当前对象
    if(depMap === void 0) {
      // 创建一个新的Map作为存储在targetMap中target为key的value
      // 形如{target => depMap}
      depMap = new Map();
      targetMap.set(target, depMap)
    }
    let deps = depMap.get(key);
      // 查看depMap中是否存储key
    if(deps === void 0) {
      // 如果没有创建一个deps
      // 创建一个新的deps作为存储在depMap中key为key的value
      // 形如{key => deps}
      deps = new Set();
      depMap.set(key, deps);
    }
      // 最后targetMap形如
      // {target => {key => deps}} deps中存储哪些方法/函数依赖这个key
    if(!deps.has(effectStack[effectStack.length - 1])) {
        deps.add(effectStack[effectStack.length - 1])
    }
    }
    let getRes = target[key];
    if(typeof getRes === 'object') {
      console.log(getRes)
      getRes = reactive(getRes)
      console.log(getRes)
    }

    return getRes;
  },
  set(target, key, value) {
    target[key] = value;
    const depMap = targetMap.get(target);
    if(depMap) {
      if(depMap.get(key).size > 0) {
        trigger(target,key)
      }
    }
    return true;
  }
}

function reactive(target) {
  const observed = new Proxy(target, baseHandler);
  return observed;
}

function effect(fn) {
  try {
    effectStack.push(fn)
    fn()
  } finally{
    effectStack.pop()
  }
}

function trigger(target, key) {
  for (let effect of targetMap.get(target).get(key)) {
    effect()
  }
}


let rgb = {
  r: 102,
  g: 191,
  b: 255
};
let test = {
  a: {b:{c: 1}}
}
let proxy_test = reactive(test);
console.log(proxy_test);
proxy_test.a.b.c = 4;
let proxy_rgb = reactive(rgb);
r.value = proxy_rgb.r;
g.value = proxy_rgb.g;
b.value = proxy_rgb.b;
color.style.backgroundColor = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
r.addEventListener('input', (e) => {
  proxy_rgb.r = r.value
})
g.addEventListener('input', (e) => {
  proxy_rgb.g = g.value
})
b.addEventListener('input', (e) => {
  proxy_rgb.b = b.value
})

effect(() => {
  color.style.backgroundColor = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
  showcolor.innerText = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
})

console.log(targetMap)
</script></body>

</html>

## jsbin.faweweb.js
'use strict';

var targetMap = new WeakMap();

var effectStack = [];

var baseHandler = {
  get: function get(target, key) {
    // 栈顶
    if (effectStack[effectStack.length - 1]) {
      // 查看targetMap里面有没有当前对象
      var depMap = targetMap.get(target);
      // targetMap里面没有当前对象
      if (depMap === void 0) {
        // 创建一个新的Map作为存储在targetMap中target为key的value
        // 形如{target => depMap}
        depMap = new Map();
        targetMap.set(target, depMap);
      }
      var deps = depMap.get(key);
      // 查看depMap中是否存储key
      if (deps === void 0) {
        // 如果没有创建一个deps
        // 创建一个新的deps作为存储在depMap中key为key的value
        // 形如{key => deps}
        deps = new Set();
        depMap.set(key, deps);
      }
      // 最后targetMap形如
      // {target => {key => deps}} deps中存储哪些方法/函数依赖这个key
      if (!deps.has(effectStack[effectStack.length - 1])) {
        deps.add(effectStack[effectStack.length - 1]);
      }
    }
    var getRes = target[key];
    if (typeof getRes === 'object') {
      console.log(getRes);
      getRes = reactive(getRes);
      console.log(getRes);
    }

    return getRes;
  },
  set: function set(target, key, value) {
    target[key] = value;
    var depMap = targetMap.get(target);
    if (depMap) {
      if (depMap.get(key).size > 0) {
        trigger(target, key);
      }
    }
    return true;
  }
};

function reactive(target) {
  var observed = new Proxy(target, baseHandler);
  return observed;
}

function effect(fn) {
  try {
    effectStack.push(fn);
    fn();
  } finally {
    effectStack.pop();
  }
}

function trigger(target, key) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = targetMap.get(target).get(key)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var _effect = _step.value;

      _effect();
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator['return']) {
        _iterator['return']();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
}

var rgb = {
  r: 102,
  g: 191,
  b: 255
};
var test = {
  a: { b: { c: 1 } }
};
var proxy_test = reactive(test);
console.log(proxy_test);
proxy_test.a.b.c = 4;
var proxy_rgb = reactive(rgb);
r.value = proxy_rgb.r;
g.value = proxy_rgb.g;
b.value = proxy_rgb.b;
color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
r.addEventListener('input', function (e) {
  proxy_rgb.r = r.value;
});
g.addEventListener('input', function (e) {
  proxy_rgb.g = g.value;
});
b.addEventListener('input', function (e) {
  proxy_rgb.b = b.value;
});

effect(function () {
  color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
  showcolor.innerText = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
});

console.log(targetMap);
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Colors</title>
	</head>
	<style>
	#div {
	width: 50px;
	height: 50px;
	border: 1px red solid;
	text-align: center;
	line-height: 50px;
	}
	#color {
	width: 100px;
	height: 100px;
	}
	#r,#g,#b {
	display: block;
	}
	</style>

	<body>
	<!-- <div id=div></div> -->
	<input type=range min=0 max=255 id=r />
	<input type=range min=0 max=255 id=g />
	<input type=range min=0 max=255 id=b />

	<div id=color>
	</div>

	<div id=showcolor></div>
	<script id="jsbin-javascript">
	'use strict';

	var targetMap = new WeakMap();

	var effectStack = [];

	var baseHandler = {
	get: function get(target, key) {
	// 栈顶
	if (effectStack[effectStack.length - 1]) {
	// 查看targetMap里面有没有当前对象
	var depMap = targetMap.get(target);
	// targetMap里面没有当前对象
	if (depMap === void 0) {
	// 创建一个新的Map作为存储在targetMap中target为key的value
	// 形如{target => depMap}
	depMap = new Map();
	targetMap.set(target, depMap);
	}
	var deps = depMap.get(key);
	// 查看depMap中是否存储key
	if (deps === void 0) {
	// 如果没有创建一个deps
	// 创建一个新的deps作为存储在depMap中key为key的value
	// 形如{key => deps}
	deps = new Set();
	depMap.set(key, deps);
	}
	// 最后targetMap形如
	// {target => {key => deps}} deps中存储哪些方法/函数依赖这个key
	if (!deps.has(effectStack[effectStack.length - 1])) {
	deps.add(effectStack[effectStack.length - 1]);
	}
	}
	var getRes = target[key];
	if (typeof getRes === 'object') {
	console.log(getRes);
	getRes = reactive(getRes);
	console.log(getRes);
	}

	return getRes;
	},
	set: function set(target, key, value) {
	target[key] = value;
	var depMap = targetMap.get(target);
	if (depMap) {
	if (depMap.get(key).size > 0) {
	trigger(target, key);
	}
	}
	return true;
	}
	};

	function reactive(target) {
	var observed = new Proxy(target, baseHandler);
	return observed;
	}

	function effect(fn) {
	try {
	effectStack.push(fn);
	fn();
	} finally {
	effectStack.pop();
	}
	}

	function trigger(target, key) {
	var _iteratorNormalCompletion = true;
	var _didIteratorError = false;
	var _iteratorError = undefined;

	try {
	for (var _iterator = targetMap.get(target).get(key)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
	var _effect = _step.value;

	_effect();
	}
	} catch (err) {
	_didIteratorError = true;
	_iteratorError = err;
	} finally {
	try {
	if (!_iteratorNormalCompletion && _iterator['return']) {
	_iterator['return']();
	}
	} finally {
	if (_didIteratorError) {
	throw _iteratorError;
	}
	}
	}
	}

	var rgb = {
	r: 102,
	g: 191,
	b: 255
	};
	var test = {
	a: { b: { c: 1 } }
	};
	var proxy_test = reactive(test);
	console.log(proxy_test);
	proxy_test.a.b.c = 4;
	var proxy_rgb = reactive(rgb);
	r.value = proxy_rgb.r;
	g.value = proxy_rgb.g;
	b.value = proxy_rgb.b;
	color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
	r.addEventListener('input', function (e) {
	proxy_rgb.r = r.value;
	});
	g.addEventListener('input', function (e) {
	proxy_rgb.g = g.value;
	});
	b.addEventListener('input', function (e) {
	proxy_rgb.b = b.value;
	});

	effect(function () {
	color.style.backgroundColor = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
	showcolor.innerText = 'rgb(' + proxy_rgb.r + ',' + proxy_rgb.g + ', ' + proxy_rgb.b + ')';
	});

	console.log(targetMap);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const targetMap = new WeakMap()

	const effectStack = [];

	const baseHandler = {
	get(target,key) {
	// 栈顶
	if(effectStack[effectStack.length - 1]) {
	// 查看targetMap里面有没有当前对象
	let depMap = targetMap.get(target);
	// targetMap里面没有当前对象
	if(depMap === void 0) {
	// 创建一个新的Map作为存储在targetMap中target为key的value
	// 形如{target => depMap}
	depMap = new Map();
	targetMap.set(target, depMap)
	}
	let deps = depMap.get(key);
	// 查看depMap中是否存储key
	if(deps === void 0) {
	// 如果没有创建一个deps
	// 创建一个新的deps作为存储在depMap中key为key的value
	// 形如{key => deps}
	deps = new Set();
	depMap.set(key, deps);
	}
	// 最后targetMap形如
	// {target => {key => deps}} deps中存储哪些方法/函数依赖这个key
	if(!deps.has(effectStack[effectStack.length - 1])) {
	deps.add(effectStack[effectStack.length - 1])
	}
	}
	let getRes = target[key];
	if(typeof getRes === 'object') {
	console.log(getRes)
	getRes = reactive(getRes)
	console.log(getRes)
	}

	return getRes;
	},
	set(target, key, value) {
	target[key] = value;
	const depMap = targetMap.get(target);
	if(depMap) {
	if(depMap.get(key).size > 0) {
	trigger(target,key)
	}
	}
	return true;
	}
	}

	function reactive(target) {
	const observed = new Proxy(target, baseHandler);
	return observed;
	}

	function effect(fn) {
	try {
	effectStack.push(fn)
	fn()
	} finally{
	effectStack.pop()
	}
	}

	function trigger(target, key) {
	for (let effect of targetMap.get(target).get(key)) {
	effect()
	}
	}





	let rgb = {
	r: 102,
	g: 191,
	b: 255
	};
	let test = {
	a: {b:{c: 1}}
	}
	let proxy_test = reactive(test);
	console.log(proxy_test);
	proxy_test.a.b.c = 4;
	let proxy_rgb = reactive(rgb);
	r.value = proxy_rgb.r;
	g.value = proxy_rgb.g;
	b.value = proxy_rgb.b;
	color.style.backgroundColor = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
	r.addEventListener('input', (e) => {
	proxy_rgb.r = r.value
	})
	g.addEventListener('input', (e) => {
	proxy_rgb.g = g.value
	})
	b.addEventListener('input', (e) => {
	proxy_rgb.b = b.value
	})

	effect(() => {
	color.style.backgroundColor = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
	showcolor.innerText = `rgb(${proxy_rgb.r},${proxy_rgb.g}, ${proxy_rgb.b})`;
	})

	console.log(targetMap)
	</script></body>

	</html>