|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+//-----------------数据挟持Observer--------
|
|
|
2
|
+//-----------------数据渲染Compile---------
|
|
|
3
|
+//-----------------数据订阅Pubsub----------
|
|
|
4
|
+
|
|
|
5
|
+
|
|
|
6
|
+
|
|
|
7
|
+
|
|
|
8
|
+class Observer{
|
|
|
9
|
+ constructor(data, sub) {
|
|
|
10
|
+ this.sub = sub
|
|
|
11
|
+ this.data = data
|
|
|
12
|
+ for(let key in data) {
|
|
|
13
|
+ this._listen(data, key, data[key])
|
|
|
14
|
+ }
|
|
|
15
|
+ }
|
|
|
16
|
+ _listen(obj, key, val) {
|
|
|
17
|
+ this.dataProxy = new Proxy(obj, {
|
|
|
18
|
+ get: (t, name) => {
|
|
|
19
|
+ console.log("get===>", name, ":", t[name])
|
|
|
20
|
+ return t[name]
|
|
|
21
|
+ },
|
|
|
22
|
+ set: (t, name, newVal) => {
|
|
|
23
|
+ console.log("set===>", name, ":", newVal)
|
|
|
24
|
+ t[name] = newVal
|
|
|
25
|
+ this.sub.public(name, newVal)
|
|
|
26
|
+ return true
|
|
|
27
|
+ },
|
|
|
28
|
+ })
|
|
|
29
|
+ }
|
|
|
30
|
+}
|
|
|
31
|
+
|
|
|
32
|
+class MyVue {
|
|
|
33
|
+ constructor(options) {
|
|
|
34
|
+ const {el, data} = options;
|
|
|
35
|
+ this.el = document.querySelector(el)
|
|
|
36
|
+ // 订阅者注册
|
|
|
37
|
+ this.sub = new Pubsub()
|
|
|
38
|
+
|
|
|
39
|
+ // 数据挟持
|
|
|
40
|
+ const vm = new Observer(data, this.sub)
|
|
|
41
|
+ this.vm = vm.dataProxy
|
|
|
42
|
+
|
|
|
43
|
+ // 数据渲染
|
|
|
44
|
+ this.compile = new Compile(this.el, this.vm, this.sub)
|
|
|
45
|
+ this.flag = this.compile.createFlag()
|
|
|
46
|
+ this.el.appendChild(this.flag)
|
|
|
47
|
+ }
|
|
|
48
|
+}
|
|
|
49
|
+
|
|
|
50
|
+class Compile {
|
|
|
51
|
+ constructor(el, vm, sub) {
|
|
|
52
|
+ this.el = el
|
|
|
53
|
+ this.vm = vm
|
|
|
54
|
+ this.sub = sub
|
|
|
55
|
+ }
|
|
|
56
|
+ createFlag() {
|
|
|
57
|
+ let flag = document.createDocumentFragment()
|
|
|
58
|
+ let child;
|
|
|
59
|
+ while(child = this.el.firstChild) {
|
|
|
60
|
+ this.compile(child)
|
|
|
61
|
+ flag.appendChild(child)
|
|
|
62
|
+ }
|
|
|
63
|
+ return flag
|
|
|
64
|
+ }
|
|
|
65
|
+ compile(node) {
|
|
|
66
|
+ switch(node.nodeType){
|
|
|
67
|
+ case 1: // element
|
|
|
68
|
+ const reg = /\{\{(.*)\}\}/;
|
|
|
69
|
+ if(reg.test(node.textContent)) {
|
|
|
70
|
+ let name = RegExp.$1;
|
|
|
71
|
+ node.textContent = this.vm[name]
|
|
|
72
|
+ this.sub.subscribe(name, (newVal) => {
|
|
|
73
|
+ node.textContent = newVal
|
|
|
74
|
+ })
|
|
|
75
|
+ }
|
|
|
76
|
+ let attr = node.attributes
|
|
|
77
|
+ if(attr.hasOwnProperty('x-model')){
|
|
|
78
|
+ let name = attr['x-model'].nodeValue
|
|
|
79
|
+ node.value = this.vm[name]
|
|
|
80
|
+ const self = this
|
|
|
81
|
+ node.addEventListener('input', (e) => {
|
|
|
82
|
+ self.vm[name] = e.target.value
|
|
|
83
|
+ })
|
|
|
84
|
+ this.sub.subscribe(name, (newVal) => {
|
|
|
85
|
+ if(node.value !== newVal)
|
|
|
86
|
+ node.value = newVal
|
|
|
87
|
+ })
|
|
|
88
|
+ }
|
|
|
89
|
+ break;
|
|
|
90
|
+ case 3: // text
|
|
|
91
|
+ break;
|
|
|
92
|
+ default:
|
|
|
93
|
+ console.log("no nodetype")
|
|
|
94
|
+ }
|
|
|
95
|
+ }
|
|
|
96
|
+}
|
|
|
97
|
+
|
|
|
98
|
+class Pubsub{
|
|
|
99
|
+ constructor(){
|
|
|
100
|
+ this.subs = {}
|
|
|
101
|
+ }
|
|
|
102
|
+ // 订阅者注册
|
|
|
103
|
+ subscribe(name, func) {
|
|
|
104
|
+ this.subs[name] = this.subs[name] ? this.subs[name] : []
|
|
|
105
|
+ this.subs[name].push(func)
|
|
|
106
|
+ }
|
|
|
107
|
+ // 发布
|
|
|
108
|
+ public(name, args) {
|
|
|
109
|
+ console.log(this.subs[name])
|
|
|
110
|
+ if(!this.subs[name]) return;
|
|
|
111
|
+ this.subs[name].map(func => func(args))
|
|
|
112
|
+ }
|
|
|
113
|
+}
|
wangfei
6 年之前