Avalon2简介

原创 2017年07月13日 13:40:59

前言

这里写图片描述
avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。
网上对Avalon的评价褒贬不一,但是我个人还是比较喜欢这个框架的,为什么呢?业务需要,我们需要兼容古老的IE,所以不能盲目的追求所谓的新技术,而MVVM框架中能够做到兼容旧版本IE的,Avalon无疑是非常出色的。至于Avalon与其他的一些MVVM框架,孰优孰劣,这里不做评价。
教程:http://avalonjs.coding.me
下载地址:https://github.com/RubyLouvre/avalon/releases

浏览器支持

这里写图片描述

性能比较

Avalon2官方教程中提供的主流MVVM框架性能比较

如何使用Avalon2,我们直接下载下来的压缩包中可以发现有三个版本的Avalon的js,分别为:arthur.jsavalon.jsavalon.modern.js。我们可以根据实际情况进行选择。

arthur.js:一个迷你版avalon,支持IE9+
avalon.js:支持IE6+及古老的W3C浏览器(判定标准是浏览器是否支持VBScript, defineSetter, defineGetter)
avalon.modern.js:支持IE10+及较新的W3C浏览器(判定标准是浏览器是否支持Object.defineProperty, addEventListener)

为了给用户提供最佳的性能体验,通常情况我会在页面中通过hack方式引用Avalon的js文件。

<script type="text/javascript" src='lib/avalon/avalon.modern.js'></script>
<!--[if lt IE 9]>
<script type="text/javascript" src='lib/avalon/avalon.js'></script>
<![endif]-->

示例

第一个Avalon例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HelloAvalon</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                welcom: "Hello Avalon!"
            });
        </script>
    </head>

    <body ms-controller="test">
        <div>{{welcom}}</div>
    </body>
</html>

运行效果如图:
这里写图片描述

虚拟DOM

  1. 第1阶段:avian会在DOMReady.ms-controller节点进行outerHTML操作。
  2. 第2阶段:将这个字符串进行parser,转换为虚拟DOM 这个阶段对input/textarea元素补上type属性, ms-*自定义元素补上ms-widget属性, 对table元素补上tbody, 在ms-for指令的元素两旁加上 ,占位符, 并将它们的之间的元素放到一个数组中(表明它们是循环区域) 并去掉所有只有空白的文本节点。
  3. 第3个阶段:优化,对拥有ms-属性的虚拟DOM添加dynamic属性 表明它以后要保持其对应的真实节点,并对没有ms-属性的元素添加skipAttrs属性,表明以后不需要遍历其属性。 如果它的子孙没有ms-*或插值表达式或ms-自定义元素,那么还加上skipContent,表明以后不要遍历其孩子。这三个属性,dynamic用于节点对齐算法,skipAttrs与skipContent用于diff算法
  4. 第4个阶段:应用节点对齐算法, 将真实DOM中无用的空白节点移除,并插入占位符, 并将需要刷新的元素保持在以应的拥有dynamic属性的虚拟DOM中。
  5. 第5个阶段:放进render方法中,render方法里面再调parseView,parseView会调每个指令的parse方法 将虚拟DOM树转换为一个$render方法。
  6. 第6个阶段:执行$render方法,生成新的虚拟DOM,与最早的那个虚拟DOM树diff,一边diff一边更新真实DOM。以后VM的属性发生变动,就直接执行第6个阶段。

VM

avalon的所有操作都是围绕vm进行。即view model,视图模型。只要我将一个JS对象添加一个$id属性, 再放到avalon.define方法里面,就能得到一个vm

var vm = avalon.define({
    $id: "test",
    welcom: "Hello Avalon!"
});

vm是一种利用ProxyObject.definePropertiesVBScript创建的特殊对象。

里面以$带头的属性或放到$skipArray,都转换为访问器属性,也就是其他语言的setter, getter。因此如果这个属性最初没有定义,那么它就不会转换为访问器属性,修改该属性,就不会刷新视图。
avalon定义了的vm,都可以在avalon.vmodels中查看到。

这里写图片描述

构建VM时只允许存在普通对象(不能是某个函数的实例)、函数、数组、数字、字符串、布尔,(undefined与null不能出现在定义VM时,只能用它们来赋值)。

版权声明:本文为博主原创文章,转载请标明出处。

关于avalonJs2的认识

1. 简介: avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架。 相关的MVVM框架有:angularjs、reactjs、vuejs等等。 avalonj...
  • Ink4T
  • Ink4T
  • 2017年09月18日 21:55
  • 1165

迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计——基于事件驱动的双向绑定链及智能CG回收机制。 avalon的双向绑定链是通过Object.defi...
  • isobv76p
  • isobv76p
  • 2014年11月06日 02:13
  • 341

avalon.js学习笔记

一、下载avalon源码 github地址:https://github.com/RubyLouvre/avalon2 下载gist/avalon.js或者avalon.min.js 二、第一个ava...
  • Breeze_00
  • Breeze_00
  • 2016年06月15日 14:21
  • 1240

avalon绑定属性总结

$model(所有非$属性),$event(事件对象) 1、作用域圈定 ms-controller:按着就近原则自下而上扫描DOM树 ms-important:仅扫描本节点及之下作为...
  • qq_24549805
  • qq_24549805
  • 2016年12月14日 14:40
  • 1086

avalon $fire解除非监控属性的限制

avalon $fire解除非监控属性的限制
  • yang1464657625
  • yang1464657625
  • 2016年12月05日 15:59
  • 381

avalon分页插件

从avalon的官方github上搞下来的分页插件不能直接用在前端,并且存在bug,于是重新封装了一下提供出来,分别是avalon-ms-pager.js和avalon-ms-pager.css ...
  • oqqAMu12345678123
  • oqqAMu12345678123
  • 2017年02月08日 14:55
  • 328

Avalon-数据填充

2 数据填充 2.1 {{}}里可以定义本文属性,{{}}里的内容会被ms-controller等vm内的对应属性值替换。 但是注意:不可以为avalon对象单独增加属性。 ...
  • qiqingjin
  • qiqingjin
  • 2016年03月14日 11:51
  • 707

用avalon写的一个弹窗demo

之前项目中,用avalon写的一个模块,单独拿出来了,一个小弹窗的效果。 demo地址: http://www.hui12.com/nbin/demo/4a/4a.html html: ...
  • nbin2008
  • nbin2008
  • 2016年06月05日 22:41
  • 6455

avalon中的模板绑定(ms-include)

avalon中的模板引入分为 内部模板 和 外部模板 1.内部模板 .ms-controller,.ms-important,[ms-control...
  • tyler1108
  • tyler1108
  • 2015年06月19日 15:02
  • 3953

avalonjs 实现简单购物车

因为最近有在做购物车,然后我们是用avalon来实现一些模块的,所以顺其自然的用avalon来实现购物车,目前发现avalon还是比较强大的,大大的节约了代码量。     购物车一般具备的功能是...
  • weixin_36672614
  • weixin_36672614
  • 2017年02月07日 15:52
  • 164
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Avalon2简介
举报原因:
原因补充:

(最多只允许输入30个字)