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此做用域下的表达式不工做