鍓嶈█澶у濂斤紝鎴戞槸HoMeTown锛屼粖澶╁氨鏉ヨ亰鑱婅亰浜嗗緢涔呯殑Vue鐨勫弻鍚戞暟鎹粦瀹氥€備粈涔堬紵棣栧厛鎴戜滑鏉ョ湅涓€涓嬩粈涔堟槸鍙屽悜鏁版嵁缁戝畾锛熷璁捐妯″紡涓嶆槸寰堜簡瑙ｇ殑鏈嬪弸锛屽彲浠ュ厛浜嗚В涓€涓嬪崟鍚戞暟鎹粦瀹氾紝涔熷氨鏄皢鏁版嵁缁戝畾鍒拌鍥句笂銆傛瘡娆¤Е鍙戝櫒鎿嶄綔淇敼鏁版嵁鏃讹紝瑙嗗浘閮戒細鏇存柊銆侱ata->view鍙互鐞嗚В涓篗V锛孌ataDrivenView銆備妇涓緥瀛愷煂帮細閫氳繃鐐瑰嚮鎸夐挳璁剧疆鍚嶇О锛岃Е鍙戜簡鐐瑰嚮浜嬩欢锛屾墜鍔ㄥ皢鍙橀噺鍚嶇О鐨勫€兼洿鏂颁负HoMeTown锛屼絾鏄綋鎴戝湪杈撳叆妗嗕腑鏇存敼鍊兼椂锛屽彉閲忓悕绉扮殑鍊间繚鎸佷笉鍙橈紝濡備笅鍥炬墍绀猴細閭ｄ箞鍙屽悜鏁版嵁缁戝畾鍦ㄥ崟鍚戠殑鍩虹涓婏紝閫氳繃鎿嶄綔鏇存柊瑙嗗浘锛岃嚜鍔ㄦ洿鏂版暟鎹€傚氨涓婇潰馃尠鑰岃█锛屾垜杈撳叆Input锛屽彉閲忓悕鐨勫€兼槸鍔ㄦ€佸彉鍖栫殑銆俈iew->data锛屽彲浠ョ悊瑙ｄ负VM锛屾煡鐪嬮┍鍔ㄦ暟鎹€傚浣曪紵Vue涓殑鍙屽悜鏁版嵁缁戝畾鐢变笁涓噸瑕侀儴鍒嗙粍鎴愶細鏁版嵁灞傦紙Model锛夛細搴旂敤鏁版嵁鍜屼笟鍔￠€昏緫瑙嗗浘灞傦紙View锛夛細搴旂敤灞曠ず鏁堟灉锛屽悇绉峌I缁勪欢涓氬姟閫昏緫灞傦紙ViewModel锛夛細妗嗘灦灏佽鐨勬牳蹇冿紝瀹冭礋璐ｅ皢鏁版嵁涓庤鍥剧浉鍏宠仈銆傝繖绉嶅垎灞傛灦鏋勮В鍐虫柟妗堝湪鎶€鏈笂灏辨槸MVVM銆俈iewModelViewModel鍋氫簡涓や欢浜嬶細鏁版嵁鍙樺寲鍚庢洿鏂拌鍥撅紝瑙嗗浘鍙樺寲鍚庢洿鏂版暟鎹紝瀹冪敱涓や釜閲嶈鐨勯儴鍒嗙粍鎴愶細鐩戝惉鍣紙Ovserver锛夛細鐩戝惉鎵€鏈夋暟鎹殑灞炴€цВ鏋愬櫒锛圕ompiler锛夛細瀵规瘡涓厓绱犺妭鐐筍can鍜岃В鏋愭寚浠わ紝鏍规嵁鎸囦护妯℃澘鏇挎崲鏁版嵁锛岀粦瀹氱浉搴旂殑鏇存柊鍑芥暟锛屽疄鐜板仛浠€涔堛€傚湪Vue涓紝鍙屽悜鏁版嵁缁戝畾鐨勮繃绋嬫槸锛歯ewVue()鎵ц鍒濆鍖栵紝瀵规暟鎹墽琛屽搷搴斿紡澶勭悊锛岃繖涓繃绋嬪彂鐢熷湪Observer缂栬瘧妯℃澘锛屾壘鍒板姩鎬佺粦瀹氱殑鏁版嵁锛屼粠鏁版嵁涓幏鍙栧苟鍒濆鍖栬鍥撅紝骞跺湪Compile涓畾涔変簡鏇存柊鍑芥暟鍜學atcher銆備互鍚庣浉搴旂殑鏁版嵁鍙戠敓鍙樺寲鏃讹紝Watcher璋冪敤update鍑芥暟銆傜敱浜庢暟鎹殑鏌愪釜灞炴€у彲鑳藉湪瑙嗗浘涓嚭鐜癗娆★紝鎵€浠ユ瘡涓睘鎬ч兘闇€瑕佷竴涓狣ep鏉ョ鐞嗗涓猈atcher鏁版嵁銆備竴鏃ata涓殑鏁版嵁鍙戠敓鍙樺寲锛屽畠浼氬厛鎵惧埌瀵瑰簲鐨凞ep锛岀劧鍚庨€氱煡杩欎釜Dep涓嬬殑鎵€鏈塛atcher鍘绘墽琛寀pdate鍑芥暟鍙傝€冧笅鍥撅細棣栧厛瀹氫箟涓€涓猇ue绫伙紝鍋氫笁浠朵簨鏁版嵁鍔寔灞炴€roxytemplatecompilationclassVue{constructor(options){this.$data=options.datathis.$options=options//鏁版嵁鍔寔observe(this.$data)//灞炴€т唬鐞唒roxy(this.$data)//妯℃澘缂栬瘧compile(el,this)}}鎺ヤ笅鏉ュ紑濮嬪疄鐜皁bserve鍑芥暟锛屽仛涓変欢浜嬮€掑綊鏁版嵁锛屽姭鎸佹瘡涓€涓猤etter锛屽綋setter鏀堕泦鍒版椂锛岄€氱煡鎵ц鍑芥暟observe(obj){//閫掑綊缁堟鏉′欢if(!obj||typeofobj!=='object')return//涓虹┖&&涓嶆槸瀵硅薄Object.keys(obj).forEach(key=>{//褰撳墠閿搴旂殑鍊糲onstvalue=obj[key]//value鍙互鏀捐繖閲岋紝鍙兘鏄竴涓璞★紝闇€瑕侀€掑綊鍔寔observe(value)//涓哄綋鍓峩ey瀵瑰簲鐨勫睘鎬ф坊鍔爂etter&setterObject.defineProrerty(obj,key,{//褰撲笖浠呭綋灞炴€х殑`enumerable`閿€间负`true`鏃讹紝璇ュ睘鎬ф墠浼氬嚭鐜板湪瀵硅薄鐨勬灇涓惧睘鎬numerable:true,//褰撲笖浠呭綋璇ュ睘鎬х殑`configurable`閿€间负`true`鏃讹紝璇ュ睘鎬х殑鎻忚堪绗︽槸鍙互鏀瑰彉鐨勶紝璇ュ睘鎬т篃鍙互浠庡搴旂殑瀵硅薄鏀瑰彉浠ヤ笂宸插垹闄ゃ€俢onfigurable:true,get(){//鏀堕泦鏂扮殑Watcher瀹炰緥Dep.target?dep.addSub(Dep.target):null},set(newValue){if(val!==newValue)dep.notify()//閫氱煡鎵ц}})})}鎺ヤ笅鏉ュ疄鐜癉ep绫伙紝鍋氫袱浠朵簨:渚濊禆闆嗗悎閫氱煡鎵ц//classdependentoncollectionclassDep{constructor(){//鎵€鏈塛atcher瀹炰緥閮藉瓨鍦ㄤ簬姝his.subs=[]}//娣诲姞Watcher瀹炰緥addSub(watcher){this.subs.push(watcher)}//閫氱煡Watcher瀹炰緥鎵ц鏇存柊鍑芥暟notify(){this.subs.forEach(w=>w.update())}}鎺ヤ笅鏉ュ疄鐜癝ubscriberWatcher绫伙紝鍋氫袱浠朵簨锛氫负Dep.target鎻愪緵鏇存柊鏁版嵁鐨勬柟娉昪lassWatcher{//鍦ㄥ洖璋冧腑璁板綍褰撳墠watcher濡備綍鏇存柊鑷繁鐨勬枃鏈唴瀹?/鍚屾椂锛屼綘闇€瑕佽幏鍙栨渶鏂扮殑鏁版嵁锛屾墍浠ュ綋浣犳槸newWatcher鐨勬椂鍊欙紝浣犻渶瑕佷紶鍏m//鍥犱负浣犻渶瑕佸湪vm鐨勪紬澶氬睘鎬т腑鐭ラ亾鍝簺鏁版嵁鏄綘闇€瑕佺殑鏁版嵁锛屾墍浠ュ綋浣犳槸newWatcher鐨勬椂鍊?浣犻渶瑕佹寚瀹歬eyconstructor(vm,key,callback){this.vm=vmthis.key=keythis.callback=callback//褰揇ep.addSubDep.target=this鏃跺皢鍒涘缓鐨剋atcher瀹炰緥瀛樺偍鍦―ep鐨剆ubs涓?//鑷畾涔夌洰鏍囧睘鎬ey.split(".").reduce((newobj,k)=&g鍚?newobj[k],vm);Dep.target=null;}//鍙戝竷鑰呴€氱煡瑙傚療鑰呮洿鏂皍pdate(){constvalue=this.key.split(".").reduce((newobj,k)=>newobj[key],this.vm);this.callback(value)}}鏈€鍚庡疄鐜癱ompile锛孒TML缁撴瀯鐨勬ā鏉跨紪璇戞柟娉曪細functioncompile(el,vm){//鑾峰彇elDom鍏冪礌vm.$el=document.querySelector(el);//鍒涘缓鏂囨。鐗囨锛屾彁楂楧om鎿嶄綔鎬ц兘constfragment=document.createDocumentFragment();//鍙栧嚭while((childNode=vm.$el.firstChild)){fragment.appendChild(childNode);}//缂栬瘧妯℃澘replace(fragment)//鏀惧叆vm.$el.appendChild(fragement)functionreplace(node){//瀹氫箟鍖归厤鎻掑€艰〃杈惧紡鐨勬鍒檆onstregMustache=/\{\{\s*(\S+)\s*\}\}/;//\S鍖归厤浠讳綍闈炵┖鐧藉瓧绗?/\s鍖归厤浠讳綍绌虹櫧瀛楃锛屽寘鎷┖鏍笺€佸埗琛ㄧ銆佹崲椤电绛夈€?/()闈炵┖瀛楃琚彁鍙栧嚭鏉ワ紝鐢ㄦ嫭鍙峰垎缁?/褰撳墠node鑺傜偣鏄枃鏈瓙鑺傜偣锛岄渶瑕佹浛鎹f(node.nodeType==3){consttext=node.textContent//Text鐨勫瓙鑺傜偣鐨勫瓧绗︿覆鍐呭constexecResult=regMustache.exec(text)//鏄竴涓暟缁勶紝绱㈠紩涓?鐨勬槸{{name}}锛岀储寮曚负1鐨勬槸name锛宔xec()鏂规硶鐢ㄤ簬鑾峰彇姝ｅ垯瀛楃涓茶〃杈惧紡鍖归厤涓殑瀛楃涓层€俰f(execResult){constvalue=execResult[1].split(".").reduce((newobj,k)=>newobj[k],vm)node.textContent=text.replace(regMustache,value)//姝ゆ椂鍙互鍒涘缓涓€涓猈atcher瀹炰緥锛屽皢姝ゆ柟娉曚繚瀛樺湪watcher涓婏紝璋冪敤update鎵цnewWatcher(vm,execResult[1],(newValue)=>{node.textContent=text.replace(regMustache,newValue)});//goodgood}//閫掑綊缁撴潫return}//鍒ゆ柇褰撳墠鑺傜偣node鏄惁涓鸿緭鍏ユif(node.nodeType===1&&node.tagName.toUpperCase()==='INPUT'){//鍏堝仛涓€涓獀-model锛岄鍏堣鑾峰彇灞炴€odeconstattrs=Array.from(node.attributes);constfindResult=attrs.find((x)=>x.name==="v-model");if(findResult){//褰撳墠鏈変竴涓獀-model锛屽彇鍊糲onstexpStr=findResult.value;甯搁噺鍊?expStr.spl瀹?".").reduce((newobj,k)=>newobj[k],vm);鑺傜偣鍊?鍊硷紱//鍒涘缓涓€涓猈atcher瀹炰緥newWatcher(vm,expStr,(newValue)=>{node.value=newValue})//鐩戝惉杈撳叆浜嬩欢锛岃幏鍙栨枃鏈鐨勬渶鏂板€硷紝鏇存柊鍒皏m鑺傜偣.addEventListener("input",e=>{constkeys=expStr.split(".")constkeysLen=keys.lengthconstobj=keys.slice(0,keysLen-1).reduce((newobj,k)=>newobj[k],vm);obj[keys[keysLen-1]]=e.target.value})}}//杩囨潵锛岃瘉鏄庝笉鏄枃鏈妭鐐癸紝閫掑綊澶勭悊node.childNodes.forEach(child=>replace(child))}}娴嬭瘯杩樻槸浣跨敤鎴戜滑鍘熸潵鐨勷煂帮紝淇敼濡備笅锛欻TML name:
