first commit

hzx-ctrl · hzx-ctrl · commit 22ab79042c86 · 2022-07-18T16:28:41.000+08:00
diff --git a/基于原生JS的简单数据双向绑定/DataBinder.js b/基于原生JS的简单数据双向绑定/DataBinder.js
@@ -0,0 +1,46 @@
+
+function DataBinder(object_id){
+	let pubSub = {
+
+		callbacks:{},
+
+		on:function(msg,callback){
+			if(!this.callbacks[msg]) this.callbacks[msg] = [];
+			this.callbacks[msg].push(callback);
+		},
+
+		publish:function(msg){
+			let functionList = this.callbacks[msg];
+			if(!functionList) return;
+			functionList.forEach(f => {
+				f.apply(this,arguments);
+			})
+		}
+
+	}
+
+	let key = 'bind-' + object_id;
+	let msg = 'change:' + object_id;
+
+	document.addEventListener('input',event =>{
+		let tgt = event.target;
+		let prop_name = tgt.getAttribute(key);
+		if(prop_name && prop_name!='')
+			//prop_name表示绑定object_id对象的哪个属性
+			pubSub.publish(msg,prop_name,tgt.value);
+	})
+
+	pubSub.on(msg,(_,prop_name,new_val) => {
+		let doms = document.querySelectorAll("[" + key + "=" + prop_name + "]"),tag_name;
+		for(let dom of doms)
+		{
+			tag_name = dom.tagName.toLowerCase();
+			if(tag_name == 'select' || tag_name == 'input' || tag_name == 'textarea')
+				dom.value = new_val;
+			else
+				dom.innerHTML = new_val;
+		}
+	})
+
+	return pubSub;
+}
diff --git a/基于原生JS的简单数据双向绑定/simpelReactive.html b/基于原生JS的简单数据双向绑定/simpelReactive.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+<input bind-xx = 'aaa'></input>
+<br>
+<br>
+<br>
+<textarea bind-xx = 'aaa'></textarea>
+</body>
+<script src="./DataBinder.js"></script>
+<script type="text/javascript">
+    function User(user_id){
+        let binder = new DataBinder(user_id);
+        let user = {
+
+            attributes: {},
+
+            set:function(prop_name,val){
+                this.attributes[prop_name] = val;
+                binder.publish("change:"+user_id,prop_name,val,this);
+            },
+            get:function(prop_name){
+                return this.attributes[prop_name];
+            }
+
+        }
+
+        binder.on("change:"+user_id,(_,prop_name,val,init) => {
+            if(init != user) //避免循环调用
+                user.set(prop_name,val)
+        })
+
+        return user;
+
+    }
+    let user = new User('xx');
+    setTimeout(()=>user.set('aaa','re'),3000);
+
+</script>
+</html>
