(三)模仿‘Vue生态’系列___《‘枚举’与‘双向绑定’》
时间:2023-04-05 13:36:35
HTML5
锛堢涓夐儴鍒嗭級妯′豢鈥榁ue鐢熸€佲€欑郴鍒梍__銆娾€樻灇涓锯€欎笌鈥樺弻鍚戠粦瀹氣€欍€嬭繖涓换鍔″氨鏄鐮哥儌鈥橀亶鍘嗏€欒繖涓瘝銆傚垎鏋恉efineProperty銆傚疄鐜癱c_vue瀵规暟鎹甋et鐨勫弻鍚戠粦瀹氥€備负涓嬩竴绡囨枃绔犻鐑璓roxy鑰屼笉鏄痙efineProperty銆?.'forEach'vs'map'寰堝鏂囩珷閮藉啓浜嗕袱鑰呯殑鍖哄埆銆俧orEach娌℃湁杩斿洖鍊硷紝map浼氳繑鍥炰竴涓暟缁勩€傚瓧姣嶃€備絾杩欎簺宸紓鍙槸琛ㄩ潰涓婄殑锛岃鎴戝睍绀轰竴涓湁瓒g殑馃憞
1
2
3
oDs.childNodes涓嶆槸鏁扮粍锛岃繕鏄吉鏁扮粍锛屼絾鏄彲浠ョ敤forEach锛岃繖涓尯鍞汉鐨勶紝绗竴鍙嶅簲鏄笉鏄繖涓ょ閬嶅巻鏂瑰紡鐨勫疄鐜版柟寮忔湁浠€涔堝尯鍒紝浣嗘槸浠旂粏涓€鎯筹紝鎴戣寰楁垜鐨勬€濊矾鏄敊璇殑銆傜瓟妗堝叾瀹炲氨鏄湪oDs.childNodes杩欎釜浼暟缁勫舰鎴愮殑鏃跺€欙紝鍦╞ody涓婃寕浜嗕竴涓猣orEach鈥︹€﹂€氳繃涓婇潰鎴戝杩欎釜闂鏈変簡涓€浜涙€濊€冦€傜敱浜巑ap杩斿洖鐨勬槸涓€涓柊鐨勬暟缁勶紝鎰忓懗鐫€瀹冪殑绌洪棿澶嶆潅搴︿細鏇村ぇ銆備竴浜涚郴缁熸彁渚涚殑浼暟缁勪細鎸傝浇forEach鏈韩鑰屼笉鏄湴鍥俱€傜患涓婏紝杩樻槸UseforEach淇濋櫓锛佷絾鏄兂鐢╩ap鎬庝箞鍔炲憿锛?锛歴lice鐨勫師鐞嗘槸涓€涓竴涓惊鐜繘鍏ヤ竴涓柊鐨勬暟缁勶紱letslice=Array.prototype.slice;slice.call(oD.childNodes).map(()=>{})2锛氬睍寮€杩愮畻绗︾殑鍘熺悊涓嶄竴鏍凤紝浣嗘槸涔熷彲浠ュ彇鍑烘墍鏈夌殑鍏冪礌锛屾帴涓嬫潵鎴戜滑杩涜Die.[...oD.childNodes].map(()=>{})2.鍏跺疄鏈夊緢澶氭柟娉曞彲浠ヤ娇鐢ㄦ墿灞曡繍绠楃杩欎釜绁炲鐨勮娉曘€傝鎴戜滑涓€璧锋鍚с€備笅闈㈢殑浠g爜浼氭纭墽琛岋紝鎶妎bject鏀惧埌object閲岃偗瀹氭病闂letobj={a:1,b:2},result={...obj};console.log(result)涓嬮潰鐨勪唬鐮佷細鎶ラ敊锛屽洜涓虹己灏慽terable銆傝obj={a:1,b:2,length:2},result=[...obj];console.log(result)鍘熷洜鏄€樺睍寮€杩愮畻绗︹€欎笉鐭ラ亾濡備綍灞曞紑锛屾垜浠渶瑕佸憡璇夊畠濡備綍灞曞紑鎵嶈兘姝g‘鎵ц銆係ymbol.iterator鏄疭ymbol鐨勪竴涓睘鎬э紝iterable鐨刱ey鏄畠銆傝obj={'0':'a','1':'b',闀垮害:2};obj[Symbol.iterator]=function(){letn=-1,_this=this,len=this.length;//蹇呴』鏈変竴涓繑鍥炲€?/骞朵笖杩斿洖鍊煎繀椤绘槸涓€涓璞eturn{//蹇呴』鏈塶extnext:function(){n++;if(n
w.update());}}cc_vue/src/Watch.jsobserver锛屼篃灏辨槸浠栫◢寰粫杩噀xportclassWatcher{//vm瀹炰緥//expr鎵ц鐨勮〃杈惧紡//cb鍥炶皟鍑芥暟锛屼篃灏辨槸鍙橀噺鏇存柊constructor鏃舵墽琛岀殑鏂规硶(vm,expr,cb){this.vm=vm;杩欎釜.expr=expr;杩欎釜.cb=cb;//鍦ㄨ繖閲屽彇褰撳墠鍊硷紝浠ュ悗姣忔鍙樺寲鏃堕兘浼氭瘮杈冩棫鍊硷紝闃叉鏃犵敤鐨勬洿鏂皌his.oldValue=this.getOld();}/***@method鍙湁绗竴涓竴娆℃€у彇鍊间細璋冪敤浠栵紝璁板綍鏃у€硷紝骞惰璁㈤槄銆?/getOld(){//浠栧彧浼氳璋冪敤涓€娆?/dep鏄紩鐢ㄧ被鍨嬶紝涓婇潰鐨勫€煎綋鐒跺彲浠ヤ紶缁橠ep.target=this;//thisthis鎸囩殑鏄痺atch鏈韩//鑾峰彇thisvalue鐨勫綋鍓嶅€糽etvalue=CompileUtil.getVal(this.vm,this.expr.trim());//绌洪儴闂ㄧ洰鏍?绌猴紱//灏嗚繑鍥炲€艰祴缁欐棫鍊硷紱}/***@method鏇存柊鍊笺€?/update(){//鑾峰彇鏂板€硷紝鍏堟瘮杈冿紝鏈夊彉鍖栧氨鏇存柊letnewVal=CompileUtil.getVal(this.vm,this.expr.trim());if(newVal!==this.oldValue){this.cb();}}}Dep.target=this;杩欏彞璇濇槸鐐圭潧涔嬬瑪锛屾垜浠娇鐢╟c_vue/src/CompileUtil.js//鍦ㄨВ鏋愭ā鏉挎椂娣诲姞涓€涓獁atchtext(node,expr,vm){letcontent=expr.replace(/\{\{(.+?)\}\}/g,($0,$1)=>{//鍥犱负妯℃澘鍙В鏋愪竴娆★紝鎵€浠ヤ笉鐢ㄦ媴蹇冭閲嶅newnewWatcher(vm,$1,()=>{//The杩欓噷鐨勫洖璋冩槸鍏蜂綋鐨勬洿鏂版搷浣渢his.updater.textUpdater(node,this.getContentValue(vm,expr));});returnthis.getVal(vm,$1);});this.updater.textUpdater锛堣妭鐐癸紝鍐呭锛夛紱},getContentValue鑾峰彇鍏冪礌涓殑鎵€鏈夋枃鏈俊鎭€傚彲鑳芥湁浜轰細闂负浠€涔堣鏇存柊鎵€鏈夌殑鏂囨湰淇℃伅鑰屼笉鏄彧鑾峰彇鍙樺寲鐨勬枃鏈紝閭f槸鍥犱负寰堝鏃跺€欐垜鍙互鍐欒繖鏍风殑浠g爜{{a}}--{{b}}
锛岄偅涔堟垜浠笉鑳藉彧鏀瑰彉b鐨勫瑙傦紝鍥犱负鎴戜滑鏄湪鎿嶄綔p鏍囩鐨則extContent灞炴€etContentValue(vm,expr){returnexpr.replace(/\{\{(.+?)\}\}/g,($0,$1)=>{$1=$1.trim();returnthis.getVal(vm,$1);});}锛屼笂闈㈢殑浠g爜锛屾垜浠湪瑙f瀽鏂囨湰鐨勬椂鍊欐斁浜嗕竴涓獁atch锛岄偅涔坵atch鏂板缓鐨勬椂鍊欎細鎵цgetOldvalue鏂规硶锛岄偅涔堝氨浼氭湁涓嬮潰鐨勪唬鐮乧c_vue/src/Observer.jsdefineReactive(obj,key,value){this.observer(obj[key]);//1:鍔寔涓€涓€兼椂锛屽垱寤轰竴涓猟ep瀹炰緥璁ヾep=鏂伴儴闂紙锛夛紱璁this=杩欎釜锛汷bject.defineProperty(obj,key,{configurable:true,enumerable:true,get(){//2:鍙栧€兼椂锛屾鏌ep绫讳笂鏄惁鏈塼arget鍙傛暟//杩欎釜鍙傛暟灏辨槸watch绫诲緱鍒皁ldval灏辨寕鏂?/濡傛灉鏈夛紝璋冪敤鎶婅繖涓獁atch绫绘斁鍏ヨ闃呰€匘ep.target&&dep.addSub(Dep.target);returnvalue;},set(newVal){if(value!==newVal){_this.observer(newVal);value=newVal;//3:姣忔鏇存柊鏁版嵁锛屾墽琛屽彂甯冭€卍ep.notify()}}});}鍏跺疄鎴戣寰梔ep鍜寃atch涔熷彲浠ュ啓鎴愪竴涓被锛屼絾鏄啓鎴愪袱涓洿閫傚悎璁捐妯″紡銆傚疄楠屽垱寤虹浜屼釜鏂囦欢澶癸紝涓撻棬鐢ㄦ潵妫€娴嬪弻鍚戞暟鎹粦瀹歝c_vue/use/2:鍙屽悜缁戝畾n:{{n}}
n+m:{{n+m}}
letvm=newC({el:'#app',data:{n:1,m:2}});//姣忕鏀瑰彉n鐨勫€硷紝鍙n鍦ㄥ睆骞曚笂鏀瑰彉灏辨垚鍔焥etInterval(()=>{vm.n+=1;},1000);璋冩暣webpack閰嶇疆newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,'../use/2:two-waybinding/index.html'),鏈夊叴瓒g殑鏈嬪弸鍙互璇曡瘯鎴戣繖涓」鐩殑鏁堟灉锛屾湰娆$粨鏉熷彧鏄垵姝ョ殑缁戝畾鎿嶄綔銆備笅涓€闆嗭細瀹炵幇vue3.0浠g悊妯″紡鐨勭粦瀹氥€傛病鐪嬪埌vue3.0鏄€庝箞璁捐鐨勩€傛垜浼氬厛鐢ㄨ嚜宸辩殑鐞嗚В鍘诲疄鐜帮紝鐒跺悗瀛︿範浠栦滑鐨勬柟娉曪紝涔熸槸鍩瑰吇鑷繁鐨勬€濈淮銆傜瘒骞呭鐢ㄤ簡锛屾垜鎵嬪啓涓€涓畝鍗曠殑axios锛屾柟渚挎祴璇曚唬鐮併€傚ぇ瀹跺彲浠ヤ竴璧蜂氦娴侊紝涓€璧峰涔狅紝涓€璧疯繘姝ワ紝鏃╂棩瀹炵幇鑷垜浠峰€硷紒锛乬ithub锛氳繕娌℃湁star锛屾湡寰呭ぇ瀹剁殑鏀寔涓汉鎶€鏈崥瀹細涓汉鍗氬鏂囩珷杈冨锛屽啓鏂囩珷鍒楄〃ui搴撴枃绔犲湴鍧€