3030 }
3131 } )
3232 const el = dom . div ( { id : 'body' , class : 'body' } ,
33- 'hello, my name is ' ,
34- dom . ul ( { class : 'nameList' } ,
35- dom . li ( { class : 'item' } , 'the web' ) ,
36- dom . li ( { class : 'item' } , 'food' ) ,
37- dom . li ( { class : 'item' } , '...actualy that\'s it' ) ,
38- )
33+ 'hello, my name is ' ,
34+ dom . ul ( { class : 'nameList' } ,
35+ dom . li ( { class : 'item' } , 'the web' ) ,
36+ dom . li ( { class : 'item' } , 'food' ) ,
37+ dom . li ( { class : 'item' } , '...actualy that\'s it' ) ,
38+
39+ ) ,
40+ dom . div ( { class : 'artical' } ,
41+ dom . div ( { class : 'left' } , 'article left' ) ,
42+ dom . div ( { class : 'right' } , 'article right' ) ,
43+ dom . button ( { class : 'proxy' , onclick : "handleClick" } , 'proxy test' )
44+ )
3945 )
40- document . body . appendChild ( el )
46+ document . body . appendChild ( el ) ;
47+
48+ function observerProxy ( obj ) {
49+ const handler = {
50+ get ( target , key , receiver ) {
51+ if ( typeof target [ key ] === "object" && target [ key ] !== null ) {
52+ return new Proxy ( target [ key ] , handler )
53+ }
54+ return Reflect . get ( target , key , receiver ) ;
55+ } ,
56+ set ( target , key , value , receiver ) {
57+ console . log ( key + " data is changed !" )
58+ return Reflect . set ( target , key , value , receiver ) ;
59+ }
60+ } ;
61+ return new Proxy ( obj , handler ) ;
62+ }
63+ const obj = {
64+ name : 'hould on' ,
65+ flag : {
66+ book : [ "javascript 高程第四版本" , "js精髓" ] ,
67+ user : {
68+ name : 'tiny' ,
69+ age : 18 ,
70+ height : 180 ,
71+ weight : 70
72+ }
73+ }
74+ }
75+ const objTest = observerProxy ( obj ) ;
76+
77+
78+ /**
79+ * Object.defineProperty()缺点:
80+ * 1: 新加的属性不能监听
81+ * 2: 数组变化不能监听
82+ * 3: 需要使用递归便利每一个key
83+ * 4: 直接修改原始数据
84+ * 5: 代理的是属性
85+ */
86+ function observer ( obj ) {
87+ if ( typeof obj === "object" && obj !== null ) {
88+ for ( const key in obj ) {
89+ if ( obj . hasOwnProperty ( key ) ) {
90+ const value = obj [ key ] ;
91+ defineReactive ( obj , key , value )
92+ }
93+ }
94+ }
95+ }
96+ function defineReactive ( obj , key , value ) {
97+ observer ( value ) ;
98+ Object . defineProperty ( obj , key , {
99+ get ( ) {
100+ return value ;
101+ } ,
102+ set ( val ) {
103+ observer ( val ) ;
104+ console . log ( key + " data is changed !" ) ;
105+ value = val ;
106+ }
107+ } )
108+ }
109+ const objDefin = observer ( obj ) ;
110+
111+ /**
112+ * Proxy:
113+ * 1: 代理的是对象
114+ * 2: 可以拦截到数组的变化
115+ * 3: 拦截的方法多大13中
116+ * 4: 返回一个拦截后的数组
117+ *
118+ */
119+ // proxy 使用场景
120+ // 1: 数组负数索引
121+ const arrayProxy = {
122+ get ( target , key , receiver ) {
123+ const _index = key < 0 ? target . length + Number ( key ) : key ;
124+ return Reflect . get ( target , _index , receiver ) ;
125+ }
126+ } ;
127+ const arrV = [ 1 , 2 , 3 , 4 , 5 ] ;
128+ const arr = new Proxy ( arrV , arrayProxy )
129+ arr [ - 4 ] // 2
130+
131+ // 2: 表单校验
132+ const formValidator = {
133+ set ( target , key , value , receiver ) {
134+ if ( key === "age" ) {
135+ if ( value < 0 || ! Number . isInteger ( value ) ) {
136+ throw new TypeError ( "please input valide value!" )
137+ }
138+ }
139+ return Reflect . set ( target , key , value , receiver ) ;
140+ }
141+ } ;
142+ const objV = {
143+ age : 16
144+ } ;
145+ const obj2 = new Proxy ( objV , formValidator )
146+
147+ function validator ( ) {
148+
149+ }
150+ // 3. 数据格式化
151+ const formatData = {
152+ set ( target , key , value , receiver ) {
153+ if ( key === "date" ) {
154+ Reflect . set ( target , "timeStamp" , + new Date ( value ) , receiver )
155+ }
156+ return Reflect . set ( target , key , value , receiver ) ;
157+ }
158+ }
159+ const timeObj = { date : "" }
160+ const formatProxy = new Proxy ( timeObj , formatData ) ;
161+ formatProxy . date = "2020-11-23" ;
162+ console . log ( formatProxy )
41163 </ script >
42164</ body >
43165</ html >
0 commit comments