迷你MVVM框架 avalonjs 學習教程1五、屬性監聽與模塊通訊
avalon的ViewModel對象從其內部EventManager裏繼承了三個方法，$watch、$unwatch、$fire三個方法，它們就是咱們本節的主題。html
詞如其名，很是直白，一看就知道作什麼。咱們先從$watch方法提及，它能監聽當前的VM第一層的監控屬性 與 計算屬性，若是某屬性是一個對象，想監控其子孫屬性，就須要定位到此對象上使用$watch回調了。$watch回調會默認傳入前後兩個屬性值。git
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
aaa: "2",
bbb: "2",
$ccc: "1",//這是非監控屬性
ddd: "1",//這是非監控屬性
$skipArray: ["ddd"],
click: function(a) {
model[a] = new Date - 0
}
})
model.$watch("aaa", function(a, b) {
console.log("aaa", a, b)
})
model.$watch("bbb", function(a, b) {
console.log("bbb", a, b)
})
model.$watch("$ccc", function(a, b) {
console.log("$ccc", a, b)
})
model.$watch("ddd", function(a, b) {
console.log("ddd", a, b)
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('aaa')">{{aaa}}</div>
<div ms-click="click('bbb')">{{bbb}}</div>
<div ms-click="click('$ccc')">{{$ccc}}</div>
<div ms-click="click('ddd')">{{ddd}}</div>
</body>
</html>
若是屬性很是多，咱們能夠監聽$all這個特殊的屬性名來得知全部屬性的變更情況。github
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
aaa: "2",
bbb: "2",
$ccc: "1",
ddd: "1",
$skipArray: ["ddd"],
click: function(a) {
model[a] = new Date - 0
}
})
model.$watch("$all", function(name, a, b) {
console.log(name, a, b)
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('aaa')">{{aaa}}</div>
<div ms-click="click('bbb')">{{bbb}}</div>
<div ms-click="click('$ccc')">{{$ccc}}</div>
<div ms-click="click('ddd')">{{ddd}}</div>
</body>
</html>
咱們也能夠用$fire更改屬性值。這樣就能夠打破不能觸發非監控屬性的回調的藩蘺，但要注意死循環，須要本身比較新舊值是否真的發生改變才觸發。數組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
aaa: "2",
bbb: "2",
$ccc: "1",
ddd: "1",
$skipArray: ["ddd"],
click: function(a) {
var old = model[a]
model.$fire(a, new Date - 0, old)
}
})
model.$watch("$all", function(name, a, b) {
console.log(name, a, b)
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('aaa')">{{aaa}}</div>
<div ms-click="click('bbb')">{{bbb}}</div>
<div ms-click="click('$ccc')">{{$ccc}}</div>
<div ms-click="click('ddd')">{{ddd}}</div>
</body>
</html>
注意，$watch回調裏是用ecma262 v6 提供的新API Object.is作新舊值比較，它的功能與=== 差很少，但能對付NaN這個本身也不等於本身的怪胎。另，一個對象字面量即使外形看上去一致，也是一個新對象，不會等於原來的。dom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
aaa: "1111",
nan: NaN,
object: {a: 1, b: 2},
array: [1, 2],
ddd: "1",
$skipArray: ["ddd"],
click: function(a) {
if (a == "object") {
model[a] = {a: 1, b: 2}
} else if (a == "array") {
model[a] = [1, 2]
} else if (a == "nan") {
model[a] = NaN
} else {
model[a] = "1111"
}
}
})
model.$watch("$all", function(name, a, b) {
console.log(name, a, b)
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('aaa')">{{aaa}}</div>
<div ms-click="click('nan')">{{nan}}</div>
<div ms-click="click('object')">
<div ms-repeat='object'>{{$key}}</div>
</div>
<div ms-click="click('array')">
<div ms-repeat='array'>{{el}}</div>
</div>
<div ms-click="click('ddd')">{{ddd}}</div>
</body>
</html>
對於數組，咱們只能監聽數組長度的變化，不能監聽其內部是否發生變化。函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: [1, 2],
click: function(a) {
model.array.push(new Date - 0)
}
})
model.array.$watch("length", function( a, b) {
console.log(a, b)
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('array')">
<div ms-repeat='array'>{{el}}</div>
</div>
</body>
</html>
若是你必定要監聽數組每一個元素的變化，可使用1.3.4新添加的tick函數，這是一個心跳檢測，只要函數返回false就會從檢測列隊中移除。因爲是每30ms檢測一次，很是耗性能，所以不用時記得移除。性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js" ></script>
<script>
var ret
var model = avalon.define({
$id: "test",
array: [1, 2, 3, 4, 5, 6, 7, 8],
stop: function(){
ret = false
},
click: function(a) {
var index = Math.floor(Math.random() * 8)
model.array.set(index, new Date - 0)
}
})
var old = model.$model.array.concat()
avalon.tick(function() {
console.log("tick...")
var now = model.$model.array.concat()
for (var i = 0, n = now.length; i < n; i++) {
if (now[i] !== old[i]) {
console.log("第" + i + "個元素髮生變化: " + old[i] + " --> " + now[i])
}
}
old = now
return ret
})
</script>
<style>
.ms-hover div:hover{
background:yellowgreen;
}
</style>
</head>
<body ms-controller="test" class='ms-hover'>
<div ms-click="click('array')">
<div ms-repeat='array'>{{el}}</div>
</div>
<button type='button' ms-click='stop'>移除此監聽器</button>
</body>
</html>
稍微說一下 $unwatch的用法，這個不太經常使用。若是它傳入兩個參數，第一個爲屬性名，第二個爲回調，那麼就會移除此用戶，若是隻傳入此屬性名，則移除此屬性的全部監聽函數。若是什麼也不傳，那麼就會臨時中斷此ViewModel的屬性監聽功能，全部$watch回調都不會觸發。想恢復也很簡單，調用$watch方法，也是什麼也不傳。ui
咱們最後看一下1.3.2新增的跨模塊通訊功能，咱們經過在$fire的第一個參數一些前綴，就能觸發其餘模塊的屬性回調。它們分別是」up!」, 「down!」, 「all!」。上與下是根據當前ViewModel所在ms-controller元素在DOM樹位置決定的。htm
- up!xxx, 向上冒泡
- down!xxx, 向下捕獲
- all!xxx, 全局廣播
<!DOCTYPE html>
<html>
<head>
<title>by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
<script>
avalon.define("ancestor", function(vm) {
vm.aaa = '1111111111'
vm.$watch("aaa", function(v) {
avalon.log(v)
avalon.log("ancestor.aaa事件被觸發了")
})
vm.click = function() {
avalon.log("向下廣播")
vm.$fire("down!aaa", "capture")
}
})
avalon.define("parent", function(vm) {
vm.text = "222222222"
vm.aaa = '3333333333'
vm.$watch("aaa", function(v) {
avalon.log(v)
avalon.log("parent.aaa事件被觸發了")
})
vm.click = function() {
console.log("全局擴播")
vm.$fire("all!aaa", "broadcast")
}
})
avalon.define("son", function(vm) {
vm.$watch("aaa", function(v) {
avalon.log(v)
avalon.log("son.aaa事件被觸發了")
})
vm.click = function() {
console.log("向上冒泡")
vm.$fire("up!aaa", "bubble")
}
})
</script>
</head>
<body class="ms-controller" ms-controller="ancestor">
<h3>avalon vm.$fire的升級版 </h3>
<button type="button" ms-click="click">
capture
</button>
<div ms-controller="parent">
<button type="button" ms-click="click">broadcast</button>
<div ms-controller="son">
<button type="button" ms-click="click">
bubble
</button>
</div>
</div>
</body>
</html>
相關文章
- 1. 迷你MVVM框架 avalonjs 學習教程1三、模板引用
- 2. 迷你MVVM框架 avalonjs 學習教程三、綁定屬性與掃描機制
- 3. 迷你MVVM框架 avalonjs 學習教程1四、事件綁定
- 4. 迷你MVVM框架 avalonjs 學習教程1六、過濾器
- 5. 迷你MVVM框架 avalonjs 入門教程
- 6. 迷你MVVM框架 avalonjs 1.3.2發佈
- 7. 迷你MVVM框架 avalonjs 學習教程二、模塊化、ViewModel、做用域
- 8. 迷你MVVM框架 avalonjs 1.3.7發佈
- 9. 迷你MVVM框架 avalonjs 1.3.4發佈
- 10. 迷你MVVM框架 avalonjs 1.3.8發佈
- 更多相關文章...
- • Lua 模塊與包 - Lua 教程
- • DTD - XML 構建模塊 - DTD 教程
- • Git五分鐘教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 迷你MVVM框架 avalonjs 學習教程1三、模板引用
- 2. 迷你MVVM框架 avalonjs 學習教程三、綁定屬性與掃描機制
- 3. 迷你MVVM框架 avalonjs 學習教程1四、事件綁定
- 4. 迷你MVVM框架 avalonjs 學習教程1六、過濾器
- 5. 迷你MVVM框架 avalonjs 入門教程
- 6. 迷你MVVM框架 avalonjs 1.3.2發佈
- 7. 迷你MVVM框架 avalonjs 學習教程二、模塊化、ViewModel、做用域
- 8. 迷你MVVM框架 avalonjs 1.3.7發佈
- 9. 迷你MVVM框架 avalonjs 1.3.4發佈
- 10. 迷你MVVM框架 avalonjs 1.3.8發佈