數(shù)據(jù)綁定——觀察者模式-創(chuàng)新互聯(lián)

AngularJs是一款優(yōu)秀的前端JS框架,它實現(xiàn)了將數(shù)據(jù)模型(data-model)關(guān)聯(lián)到視圖(UI)上。但個人認為正是由于它規(guī)范性的結(jié)構(gòu)和體系導(dǎo)致使用的時候并不是很靈活。那么如何自己實現(xiàn)一個數(shù)據(jù)綁定視圖的功能呢。

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為中牟企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，中牟網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

設(shè)想一下這樣的應(yīng)用場景，當我們修改數(shù)據(jù)或從服務(wù)器接收數(shù)據(jù)更新現(xiàn)有數(shù)據(jù)時，如何自動通知所有與數(shù)據(jù)關(guān)聯(lián)的視圖更新顯示呢？觀察者模式為這種場景提供了很好的解決方案。

觀察者模式定義對象間的一種一對多的依賴關(guān)系，當一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都得到通知并被自動更新。

每個HTML Dom都可以看成一個觀察者，他們依賴數(shù)據(jù)對象，類圖如圖：

數(shù)據(jù)綁定——觀察者模式

其中Observer類中doms為觀察者的標簽們，這里一個觀察者包含多個標簽，避免創(chuàng)建過多的觀察者。Subject類作為數(shù)據(jù)對象的封裝，由于javascript沒有符號重載的功能，我們設(shè)計Setter和Getter的兩個方法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對象值</p>
		<button onclick = "changeSingleV()">修改為非對象值</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>

效果如圖：

數(shù)據(jù)綁定——觀察者模式

根據(jù)結(jié)果，我們可以清楚的發(fā)現(xiàn)觀察者的優(yōu)勢，數(shù)據(jù)的更新前端開發(fā)人員無需再操作Dom就可以更新視圖，實現(xiàn)了數(shù)據(jù)實時更新。當然缺點也顯而易見，那就是觀察者過多時會數(shù)據(jù)的更新會過慢。

附件：http://down.51cto.com/data/2368542

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：數(shù)據(jù)綁定——觀察者模式-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/article4/cedcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、動態(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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

數(shù)據(jù)綁定——觀察者模式-創(chuàng)新互聯(lián)