作用域绑定(ms-controller, ms-important)

如果一个页面非常复杂,就需要划分模块,每个模块交由不同的ViewModel去处理。我们就要用到ms-controller与ms-important来指定ViewModel了。

我们看下面的例子:

<!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的同名字段,这个机制非常有利于团队协作。

如果从另一个角度来看,由于这种随机组成的方式就能实现类似继承的方式,因此我们就不必在JS代码时构建复杂的继承体系

类的继承体系是源自后端复杂业务的膨胀而诞生的。早在20世界80年代初期,也就是面向对象发展的初期,人们就非常看重继承这个概念。 继承关系蕴涵的意义是非常深远的。使用继承我们可以基于差异编程,也就是说,对于一个满足我们大部分需求的类,可以创建一个它的子类,重载它个别方法来实现我们所要的功能。只子继承一个类, 就可以重类该类的代码!通过继承,我们可以建立完整的软件结构分类,其中每一个层都可以重用该层次以上的代码。这是一个美丽新世界。

但类继承的缺点也是很明显的,在下摘录一些:

面向对象语言与生俱来的问题就是它们与生俱来的这一整个隐性环境。你想要一根香蕉,但你得到的是一头手里握着香蕉的大猩猩,以及整个丛林。 -- Joe Armstrong

在适合使用复合模式的共有类中使用继承,会把这个类与它的超类永远地束缚在一起,从而人为地限制了子类的性能

类继承的缺点

    1. 超类改变,子类要跟着改变,违反了“开——闭”原则
    2. 不能动态改变方法实现,不能在运行时改变由父类继承来的实现
    3. 破坏原有封装,因为基类向子类暴露了实现细节
    4. 继承会导致类的爆炸

因此在选择是继承还是组合的问题上,avalon倾向组合。组合的使用范例就是CSS,因此也有了ms-important的诞生。

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

avalon 作用域的更多相关文章

  1. 前端MVVM框架avalon揭秘 - HTML编译器

    MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明 ...

  2. avalon 笔记---Mr.wing

    Avalon笔记步骤一:引用js文件<script src="js/avalon.js"></script>步骤二:<script> var v ...

  3. 前端展望:取avalon,弃angular

    打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧:   目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...

  4. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  5. 轻量级前端MVVM框架avalon - 整体架构

    官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...

  6. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  7. 轻量级前端MVVM框架avalon - 控制器

    引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 ...

  8. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  9. avalon学习笔记

    背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

随机推荐

  1. [NOIP2003提高组]侦探推理

    题目:洛谷P1039.Vijos P1106.codevs1089. 题目大意:给你一系列证词,要你求出谁是凶手.具体题目见原题. 解题思路:我们枚举犯人和星期,一个一个进行判断.如果成功则记录答案, ...

  2. centos 7.1安装frees witch

    http://blog.sina.com.cn/s/blog_539d6e0c0102zgvm.html

  3. Ibatis使用技巧

    一.在ibatis中以Map形式返回查询结果 1.在ibatis的配置文件中配置以HashMap返回的resultMap <resultMap id="MAX_MIN_ID_RESUL ...

  4. php7 memcache和memcached.so扩展

    php7安装memcache和memcached扩展 https://github.com/websupport-sk/pecl-memcache https://github.com/php-mem ...

  5. Vue异步组件Demo

    Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...

  6. Docker安装MySQL忽略大小写问题的问题

    原文:Docker安装MySQL忽略大小写问题的问题 连接MySQL: 查看当前mysql的大小写敏感配置show global variables like '%lower_case%';+---- ...

  7. 传纸条 NOIP2008 洛谷1006 二维dp

    二维dp 扯淡 一道比较基本的入门难度的二维dp,类似于那道方格取数,不过走过一次的点下次不能再走(看提交记录里面好像走过一次的加一次a[i][j]的也AC了,,),我记得当年那道方格取数死活听不懂, ...

  8. 洛谷—— P1855 榨取kkksc03

    https://www.luogu.org/problem/show?pid=1855 题目描述 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本 ...

  9. 转:让MySQL支持emoji表情

    转自:http://www.cnblogs.com/suifu/p/5848269.html 公司有新要求,ios客户端要上线评论中可以使用emoji表情的功能,在mysql 5.5 之前,UTF-8 ...

  10. Cannot set web app root system property when WAR file is not expanded

    Cannot set web app root system property when WAR file is not expanded 在tomcat下面可以,在weblogic下面不行的处理方法 ...