AngularJs是一款優(yōu)秀的前端JS框架,它實(shí)現(xiàn)了將數(shù)據(jù)模型(data-model)關(guān)聯(lián)到視圖(UI)上。但個(gè)人認(rèn)為正是由于它規(guī)范性的結(jié)構(gòu)和體系導(dǎo)致使用的時(shí)候并不是很靈活。那么如何自己實(shí)現(xiàn)一個(gè)數(shù)據(jù)綁定視圖的功能呢。
創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為中牟企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作,中牟網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。 設(shè)想一下這樣的應(yīng)用場(chǎng)景,當(dāng)我們修改數(shù)據(jù)或從服務(wù)器接收數(shù)據(jù)更新現(xiàn)有數(shù)據(jù)時(shí),如何自動(dòng)通知所有與數(shù)據(jù)關(guān)聯(lián)的視圖更新顯示呢?觀察者模式為這種場(chǎng)景提供了很好的解決方案。
觀察者模式定義對(duì)象間的一種一對(duì)多的依賴關(guān)系,當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí),所有依賴于它的對(duì)象都得到通知并被自動(dòng)更新。
每個(gè)HTML Dom都可以看成一個(gè)觀察者,他們依賴數(shù)據(jù)對(duì)象,類圖如圖:
其中Observer類中doms為觀察者的標(biāo)簽們,這里一個(gè)觀察者包含多個(gè)標(biāo)簽,避免創(chuàng)建過多的觀察者。Subject類作為數(shù)據(jù)對(duì)象的封裝,由于javascript沒有符號(hào)重載的功能,我們?cè)O(shè)計(jì)Setter和Getter的兩個(gè)方法S()和G()。具體代碼如下:
var Observer = Class.extend({ doms:[], subject:null, ctor:function(_tag,_subject){ this.doms = document.querySelectorAll(_tag); this.subject = _subject; this.subject.attach(this); }, update:function(){ for(var i = 0;i < this.doms.length;i++){ var tagName = this.doms[i].nodeName.toLowerCase(); if(this.doms[i].getAttribute('bind-data') != undefined){ var bind = this.doms[i].getAttribute('bind-data'); if(tagName == 'input'||tagName == 'select'){ if(typeof(this.subject.G()) == "object" && Object.prototype.toString.call(this.subject.G()).toLowerCase() == "[object object]" && !this.subject.G().length){ this.doms[i].value = eval("this.subject.G()." + bind); }else{ this.doms[i].value = this.subject.G(); } }else{ if(typeof(this.subject.G()) == "object" && Object.prototype.toString.call(this.subject.G()).toLowerCase() == "[object object]" && !this.subject.G().length){ this.doms[i].innerText = eval("this.subject.G()." + bind); }else{ this.doms[i].innerText = this.subject.G(); } } } } } }); var Subject = Class.extend({ observers:[], data:null, ctor:function(_data){ this.data = _data; }, attach:function(_observer){ this.observers.push(_observer); _observer.update(); }, S:function(expre){ if(typeof(expre) == 'string'){ if(expre.indexOf('=') == -1){ this.data = expre; }else{ if(typeof(this.data) == "object" && Object.prototype.toString.call(this.data).toLowerCase() == "[object object]" && !this.data.length){ eval('this.data.' + expre); }else{ this.data = {}; eval('this.data.' + expre); } } }else{ this.data = expre; } this.notifyAllObservers(); }, G:function(){ return this.data; }, notifyAllObservers(){ for(var i = 0;i < this.observers.length;i++){ this.observers[i].update(); } } });
前端使用的代碼如下:
<body> 用戶名:<input var = 'user' bind-data = 'username' id = "username"/> 密碼:<input var = "user" bind-data = 'password' id = "username"/> <p>用戶名:<span id = "username" bind-data="username"></span></p> <button onclick = "changeUserName()">修改用戶名為jack</button> <p>{username:'hello',password:'world'}</p> <button onclick = "changeAll()">修改數(shù)據(jù)為上述值</button> <p>將數(shù)據(jù)賦值為非JSON對(duì)象值</p> <button onclick = "changeSingleV()">修改為非對(duì)象值</button> </body> <script> var user = new Subject({username:'janwool',password:123456}); var observer_input = new Observer("[var='user']",user); var observer_span = new Observer("#username",user); function changeUserName(){ user.S("username='jack'"); } function changeAll(){ user.S({username:'hello',password:'world'}); } function changeSingleV(){ user.S('janwool'); } </script>
效果如圖:
根據(jù)結(jié)果,我們可以清楚的發(fā)現(xiàn)觀察者的優(yōu)勢(shì),數(shù)據(jù)的更新前端開發(fā)人員無需再操作Dom就可以更新視圖,實(shí)現(xiàn)了數(shù)據(jù)實(shí)時(shí)更新。當(dāng)然缺點(diǎn)也顯而易見,那就是觀察者過多時(shí)會(huì)數(shù)據(jù)的更新會(huì)過慢。
附件:http://down.51cto.com/data/2368542另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站名稱:數(shù)據(jù)綁定——觀察者模式-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址:http://bm7419.com/article4/cedcie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、小程序開發(fā)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容