avalon 做用域

時間 2019-11-18

標籤 avalon 简体版

原文原文鏈接

做用域綁定(ms-controller, ms-important)

若是一個頁面很是複雜，就須要劃分模塊，每一個模塊交由不一樣的ViewModel去處理。咱們就要用到ms-controller與ms-important來指定ViewModel了。javascript

咱們看下面的例子：html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/avalon.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div ms-controller="AAA">
		    <div>{{name}} :  {{color}}</div>
		    <div ms-controller="BBB">
		        <div>{{name}} :  {{color}}</div>
		        <div ms-controller="CCC">
		            <div>{{name}} :  {{color}}</div>
		        </div>
		        <div ms-important="DDD">
		            <div>{{name}} :  {{color}}</div>
		        </div>
		    </div>
		</div>
		<script type="text/javascript">
			avalon.ready(function() {
			    avalon.define({
			          $id: "AAA",
			          name: "liger",
			        color: "green"
			    });
			      avalon.define({
			          $id: "BBB",
			          name: "sphinx",
			        color: "red"
			    });
			    avalon.define({
			          $id: "CCC",
			          name: "dragon" //不存在color
			    });
			       avalon.define({
			          $id: "DDD",
			          name: "sirenia" //不存在color
			    });
			    avalon.scan()
			})
		</script>
	</body>
</html>

能夠看出ViewModel在DOM樹的做用範圍其實與CSS很類似，採起就近原則，若是當前ViewModel沒有此字段就找上一級ViewModel的同名字段，這個機制很是有利於團隊協做。java

若是從另外一個角度來看，因爲這種隨機組成的方式就能實現相似繼承的方式，所以咱們就沒必要在JS代碼時構建複雜的繼承體系。git

類的繼承體系是源自後端複雜業務的膨脹而誕生的。早在20世界80年代初期，也就是面向對象發展的初期，人們就很是看重繼承這個概念。繼承關係蘊涵的意義是很是深遠的。使用繼承咱們能夠基於差別編程，也就是說，對於一個知足咱們大部分需求的類，能夠建立一個它的子類，重載它個別方法來實現咱們所要的功能。只子繼承一個類，就能夠重類該類的代碼！經過繼承，咱們能夠創建完整的軟件結構分類，其中每個層均可以重用該層次以上的代碼。這是一個美麗新世界。github

但類繼承的缺點也是很明顯的，在下摘錄一些：編程

面嚮對象語言與生俱來的問題就是它們與生俱來的這一整個隱性環境。你想要一根香蕉，但你獲得的是一頭手裏握着香蕉的大猩猩，以及整個叢林。 -- Joe Armstrong後端

在適合使用複合模式的共有類中使用繼承，會把這個類與它的超類永遠地束縛在一塊兒，從而人爲地限制了子類的性能性能

類繼承的缺點

超類改變，子類要跟着改變，違反了「開——閉」原則
不能動態改變方法實現，不能在運行時改變由父類繼承來的實現
破壞原有封裝，由於基類向子類暴露了實現細節
繼承會致使類的爆炸

所以在選擇是繼承仍是組合的問題上，avalon傾向組合。組合的使用範例就是CSS，所以也有了ms-important的誕生。htm

而ms-important就至關於CSS的important語句，強制這個區域使用此ViewModel，再也不往上查找同名屬性或方法！對象

另，爲了不未經處理的原始模板內容在頁面載入時在頁面中一閃而過，咱們可使用如下樣式（詳見這裏）：

.ms-controller,.ms-important,[ms-controller],[ms-important]{
     visibility: hidden;
 }

忽略掃描綁定(ms-skip)

這是ms-skip負責。只要元素定義了這個屬性，不管它的值是什麼，它都不會掃描其餘屬性及它的子孫節點了。

<div ms-controller="test" ms-skip>
    <p
        ms-repeat-num="cd" 
        ms-attr-name="num"
        ms-data-xxx="$index">
        {{$index}} - {{num}}
    </p>
    A：<div ms-each="arr">{{yy}}</div>
</div>

avalon做用域:

ms-controller
子節點若是找不到表達式能夠往父級上尋找

ms-important
子節點若是找不到表達，也不會往父級上尋找

ms-skip此做用域下的表達式不工做