avalon2学习教程01
经过难苦奋战,avalon2终于面世了。这花了大半年时间,其中1.6还胎死腹中。长达半年没有产出,我都担心自己会被裁掉……
avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能,此外随着react的红红火火,对它的研究,也集成到此框架中。
我们先来一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
a: 111
})
</script>
<style>
.ms-controller{
display:none;
}
</style>
</head>
<body>
<div ms-controller="test">
<input ms-duplex="@a" />
<p>{{@a}}</p>
</div>
</body>
</html>
如果大家学过avalon1.*就好办,没学也没关系。作为时下兼容性最好的MVVM框架,avalon绝对是值得你进行智力投智的。
avalon.define要求入传一个带$id属性的对象,它会返回一个vm的特殊对象,以后我们对它进行赋值就会自动同步页面。这比jQuery每次都取CSS选择器来找元素进行操作方便多。
这也就是为什么MVVM框架一下子铺天盖地的火起来的原因。
这是JS部分,在页面部分,或者叫HTML部分,我们需要一些特殊标记来圈定这个vm的作用范围,这就是ms-controller的出场。$id也是在这里用到的。
在这作用范围内,我们还有另外两个指令,一个是ms-duplex指令,相当于ng-model(如果大家学过angular的话),另一个是插值表达式{{}},这是位于元素内部的innerText中的。ms-duplex是双向指令,它既能将vm中对应的属性显示在页面上,为了标识这是vm上的属性, 我们要求用@符号带头。这可能与.NET的一些模板引擎相冲突,但据我所知,这些在.NET 中都是可以配置的。{{}}是纯粹的文本指令,它与ms-text很像,但更方便,用于单向将数据拍到页面上。
当我们改动文本域的内容时,ms-duplex会通过一些事件将元素的value值取出来同步到vm上。vm再比较 下它的这个属性值与之前是否一样,不一样就再次同步到视图。这期间涉及到虚拟DOM 复杂处理,但虚拟DOM远远比真实DOM轻量,因此有了这缓存层,我们的性能就大大提高。并且更新是最小化刷新的,不会将ms-controller圈定的所有元素都替换掉(如backbone自带的模板引擎)。它只是将{{}}那个区域的文本节点的nodeValue改一下(因为input.value是一样的,这次刷新只改一个地方)。
我们也可以看到ms-duplex其实也做了光标处理。当然ms-duplex的威力远远不止这些,以后我们再分说。
总而言之,MVVM其实将我们的程序划分两部分,让专业的语言做它们的擅长的事。JS用于处理业务逻辑,但类啊,模块啊,太复杂,那只给你一个类似普通对象的vm你们操作就好了。在视图部分,如何显示,如何变动,如何交互,就交给HTML,我们只要给它添加一些指令与绑定属性,它就像活着一样,替我们干活了。
总结一下本节课的内容。
- MVVM将程序分为两大块,我们需要用avalon.define创建vm,用指令预先指定会变动的部分
- ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的。
- ms-duplex是双向指令,通过一些事件监听我们的输入操作,从而同步vm。
- {{}}是用于输出数据。
大家可以到这里下载avalon.js,最好为本项目打一下星,支持国内开源项目,然后下回来自己照例子敲一遍。
avalon2学习教程01的更多相关文章
- avalon2学习教程06样式操作
avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...
- avalon2学习教程15指令总结
avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...
- avalon2学习教程14动画使用
avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...
- avalon2学习教程13组件使用
avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...
- avalon2学习教程12数据验证
avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...
- avalon2学习教程09循环操作
avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...
- avalon2学习教程08插入移除操作
本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...
- avalon2学习教程05属性操作
avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...
- avalon2学习教程 03数据填充
数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...
随机推荐
- concurrent.futures进线程池和协程
concurrent.futures 异步执行进程线程池的模块,一个抽象类,定义submit,map,shutdown方法 from concurrent.futures import Process ...
- CS229 6.7 Neurons Networks whitening
PCA的过程结束后,还有一个与之相关的预处理步骤,白化(whitening) 对于输入数据之间有很强的相关性,所以用于训练数据是有很大冗余的,白化的作用就是降低输入数据的冗余,通过白化可以达到(1)降 ...
- Windows Server 2012R2 网络地址转换NAT
一.NAT概述 网络地址转换NAT(Network Address Translation)可以动态改变通过路由器的IP报文的内容(修改报文的源IP地址和/或目的IP地址).离开路由器的报文的源地址或 ...
- 并发编程:IO多路复用。
一 IO模型: Stevens在文章中一共比较了五种IO Model: * blocking IO#阻塞模型 * nonblocking IO#非阻塞 * IO multiplexing#多路复用 ...
- linux:ubuntu安装mysql(一)
1.下载MySQL安装包(MySQL Community Server) 地址:https://dev.mysql.com/downloads/mysql/ 2.解压 tar -xvf mysql-s ...
- MongoDB Shell 常用操作命令
MonoDB shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用javascript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help ...
- 关于elment-ui树形控件Tree的使用
如果简单使用的tree树形控件,按照Element ui Tree 树形控件 官方文档使用即可,基本上能够完成大部分的需求. 但是如果需要对树形结构进行额外操作,仅仅根据官方文档提供的方案的话,可能就 ...
- centos磁盘挂载|centos虚拟机硬盘不够怎么办?|centos虚拟机硬盘的扩展
Centos6磁盘挂载 添加一块磁盘 分区,格式化,挂载新磁盘 磁盘挂载 df -lh fdisk -l fdisk /dev/sdb 这个命令执行后依次输 n p 回车 回车 w fdisk -l ...
- ROS学习手记 9 -- 阶段性复习
ROS 阶段性总结 1. 基本概念 ROS 是建立在Linux特别是Ubuntu系统上的一套软件系统,它具有操作系统的特征 ,负责管理各个模块的协同运行.设计初衷主要是面向机器人软硬件开发的特点:多 ...
- 55.纯 CSS 创作一个太阳、地球、月亮的运转模型
原文地址:https://segmentfault.com/a/1190000015313341 感想:主要运用边框.伪元素.动画. HTML code: <div class="co ...