mini mvvm 简单实现版

mini mvvm 简单实现版，代码有待改进

 

<html>
<head>
	<title>mini-mvvm</title>
</head>
<body>
<div id='app'>
  <p>
    My name is {{firstName + ' ' + lastName}}, I am {{age}} years old.
  </p>
</div>

<script type="text/javascript">
	const bindViewToData = ((el, data) => {
		let source = el.innerHTML;
		let updateTextArray = [];
		let updateText = (el) => {
			el._textContent = el._textContent || el.textContent;
			el.textContent = el._textContent.replace(/\{\{([^\{\}]+)\}\}/gm, ($0, $1) => {
				return new Function('data','with(data){return ' + $1+'}')(data);		
			});
		};
		let update = () => {
			let findChild = (el) => {
				var childs = el.childNodes;
				if(childs){
					childs = Array.prototype.slice.apply(childs);
					for (var i = childs.length - 1; i >= 0; i--) {
						if(childs[i].nodeType === 3){
							updateText(childs[i]);
						}else if(childs[i].childNodes){
							findChild(childs[i]);
						}
					};
				}
			};
			findChild(el);
		};
		update();

		for(var k in data){
			data._data = data._data || {};
			if(data.hasOwnProperty(k)){
				data._data[k] = data[k];
				Object.defineProperty(data, k, {
					get: (function(k){
						return function(){
							return this._data[k];
						}
					})(k),
					set: (function(k){
						return function(val){
							if(this._data[k] !== val){
								this._data[k] = val;
								update();
							}
						};
					})(k)
				});
			}
		}
	});

	const appData = {
	  firstName: 'Lucy',
	  lastName: 'Green',
	  age: 13
	}
	bindViewToData(document.getElementById('app'), appData)

	// div 里面的 p 元素的内容为
	// My name is Lucy Green, I am 13 years old.

	appData.firstName = 'Jerry'
	appData.age = 16

	// div 里面的 p 元素的内容自动变为
	// My name is Jerry Green, I am 16 years old.
</script>
</body>
</html>

 

posted @ 2018-03-02 23:19  mjian  阅读(216)  评论(0)    收藏  举报