【MVVM】- Avalon 屬性監控、解除監控、子孫元素監控、統一屬性監控

時間 2019-11-17

標籤 MVVM avalon 屬性監控解除子孫元素統一简体版

原文原文鏈接

Avalon 屬性監控

$watch:屬性值改變就會改變css

監聽當前的vm第1層的監控屬性與計算屬性
多個屬性監聽能夠使用同一個$watch監聽
經過監聽$all可得知全部的屬性變更情況
若是屬性是對象，監聽該對象的子孫屬性需定位對象上$watch回調
對於數組，只能監聽長度的變化，不能監聽內部值的變化

$unwatch：非監控屬性數組

$fire：解除屬性監控函數

css樣式code

/*類下面的div的hover事件觸發*/
.ms-hover div:hover{ 
background-color:yellow;
}

界面對象

<body ms-controller="test" class="ms-hover">
<div ms-duplex="aaa" ms-click="change('aaa')">{{aaa}}</div>
<div ms-duplex="$bbb" ms-click="change('$bbb')">{{$bbb}}</div>
<div ms-duplex="ccc" ms-click="change('ccc')">{{ccc}}</div>
</body>

js操做邏輯blog

var vm=avalon.define({
	 $id:"test",
	 aaa:"aaa",
	 $bbb:"bbb", //$開頭的非監控屬性
	 ccc:"ccc",
	 $skipArray:['ccc'],    //放入非監控屬性數組的元素會自動轉換爲非監控屬性
	 change:function(parm){
		 vm[parm]=new Date-0;  //寫法等價於：vm.aaa=new Date; 時間戳
	 }
 });
 //$watch函數參數：$watch(監聽vm的屬性名，function(a,b))  -->回調函數：a:屬性的新值，b屬性的舊值
 vm.$watch("aaa",function(a,b){
	 console.log("aaa","新值："+a,"舊值："+b);
 });
 
 //avalon $開頭的屬性爲非監控屬性，avalon會進行忽略處理
 vm.$watch("$bbb",function(a,b){
	 console.log("$bbb","新值："+a,"舊值："+b);
 });
 
 vm.$watch("ccc",function(a,b){
	 console.log("ccc","新值："+a,"舊值："+b);
 });

效果：事件

avalon $fire解除非監控屬性限制

css樣式ip

.ms-hover div:hover{ 
background-color:yellow;
}

<body ms-controller="test" class="ms-hover">
<div ms-duplex="aaa" ms-click="change('aaa')">{{aaa}}</div>
<div ms-duplex="ddd" ms-click="change('ddd')">{{ddd}}</div>
<div ms-duplex="$bbb" ms-click="change('$bbb')">{{$bbb}}</div>
<div ms-duplex="ccc" ms-click="change('ccc')">{{ccc}}</div>
</body>

js操做邏輯回調函數

/*
 * unwatch:
 *若是傳入兩個參數，第一個爲屬性名，第二個爲回調，那麼就會移除此監聽函數
 *若是隻傳入此屬性名，則移除此屬性的全部監聽函數
 *若是什麼都不傳，中斷VM的靜聽
 *
 *$fire:打破不能觸發非監控屬性的回調限制，注意死循環(比較新舊值變化才觸發)
 */
 var vm=avalon.define({
	 $id:"test",
	 aaa:"aaa",
	 ddd:"ddd",
	 $bbb:"bbb",
	 ccc:"ccc",
	 $skipArray:['ccc'],//放入skipArray的監控屬性會自動轉換爲非監控屬性
	 change:function(aaa){
		 var old = vm[aaa];  //舊值
		 vm[aaa] = new Date - 0;  //新值
		 vm.$fire(aaa, vm[aaa], old);  //新舊值比較發生變化以後觸發，使得watch函數可監聽非監控屬性
	 }
});

 vm.$watch("$all",function(name,a,b){   //name:監聽屬性  a:屬性新值  b:屬性舊值
		console.log("name:"+name+"新值："+a+"--舊值:"+b);
 });

效果：avalon

avalon子孫元素屬性監聽

樣式

.ms-hover div:hover{
background-color:yellow;
}

界面

<body ms-controller="ex">
<div  class="ms-hover" ms-click="change('array')">
<div ms-repeat="array">{{el}}</div>
</div>
</body>

js操做邏輯

//對象數組子元素的監聽
var vm=avalon.define({
	$id:"ex",
	aaa:{bbb:{ccc:1}},
	array:[1,2],
	change:function(aaa){
		vm[aaa].push(new Date-1);
	}
});

//監聽子孫元素只需在該元素的父元素上監聽將子元素看做是父元素的一個屬性
vm.aaa.bbb.$watch("ccc",function(a,b){
	avalon.log(a,b);
});

setTimeout(function(){
	vm.aaa.bbb.ccc=new Date-0;
}, 2000);

//watch:監聽array的屬性length的值：數組只能監聽到數組長度
vm.array.$watch("length",function(a,b){
	avalon.log("length:"+a+"--"+b);
});

avalon 統一屬性監控

css樣式

.ms-hover div:hover{ 
background-color:yellow;
}

界面

<body ms-controller="test" class="ms-hover">
<div ms-duplex="aaa" ms-click="change('aaa')">{{aaa}}</div>
<div ms-duplex="ddd" ms-click="change('ddd')">{{ddd}}</div>
<div ms-duplex="$bbb" ms-click="change('$bbb')">{{$bbb}}</div>
<div ms-duplex="ccc" ms-click="change('ccc')">{{ccc}}</div>
</body>

js操做邏輯

var vm=avalon.define({
	 $id:"test",
	 aaa:"aaa",
	 ddd:"ddd",
	 $bbb:"bbb",
	 ccc:"ccc",
	 $skipArray:['ccc'],    //放入skipArray的監控屬性會自動轉換爲非監控屬性
	 change:function(aaa){
		 vm[aaa]=new Date-0;  //寫法等價於：vm.aaa=new Date; 時間戳
	 }
});

/*
var fn=function(){
console.log("aaa:"+vm.aaa+"---"+"ddd:"+vm.ddd);
}

//將監控的公用方法脫離出來實現公用出來
vm.$watch("aaa",fn);
vm.$watch("ddd",fn);
*/

//由於監控的屬性可能會特別多，若是須要統一的方法，則能夠使用$all統一監聽
vm.$watch("$all",function(name,a,b){   //name:監聽屬性  a:屬性新值  b:屬性舊值
	console.log("name:"+name+"新值："+a+"--舊值:"+b);
});

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。