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时,只能用它们来赋值)。

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/jianggujin/article/details/75050949

avalon2+webpack2手脚架与avalon2介绍

avalon起源avalon 是一个简单易用迷你的MVVM框架,它最早发布于2012.09.15, 为解决同一业务逻辑存在各种视图呈现而开发出来的。 事实上,这问题其实也可以简单地利用一般的前端模板加...
  • u011100687
  • u011100687
  • 2017-02-22 10:58:03
  • 2147

关于avalonJs2的认识

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

Avalon2简介

avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开...
  • jianggujin
  • jianggujin
  • 2017-07-13 13:40:59
  • 260

<em>avalon</em>.js下载

<em>avalon</em> 1.3.2 2014.8.11... <em>avalon</em> 1.3.2 2014.8.11 综合评分:0 收藏评论举报 所需: 5积分/C币 下载个数: 55 开通VIP 立即下载 ...
  • 2018年04月14日 00:00

Avalon介绍和概述(转载)

 Avalon的简要历史以及创建它所有的设计原则概述事情是从Apache JServ项目开始的。Stefano Mazzocchi和其它协助开发Apache JServ的人员认识到项目中所用到的一些模...
  • zaowei21
  • zaowei21
  • 2004-12-22 08:45:00
  • 2904

avalon2.chm帮助文档

  • 2017年04月19日 09:53
  • 5.35MB
  • 下载

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:20
  • 1485

avalon2 如何隐藏首屏加载页面时出现的花括号

如何隐藏首屏加载页面时出现的花括号 答:在页面上添加一个样式 .ms-controller{ visibility: hidden } 使用在ms-controller, ms-impo...
  • qq_33212500
  • qq_33212500
  • 2016-12-01 16:14:19
  • 1509

SiteMesh,Avalon,RequireJS

SiteMesh:1.装饰模式 2.定义装饰文件,被装饰文件,被装饰的文件会将对应标签里面的内容填充到装饰文件中,比如head里面的内容会填充到中。 3.通过拦截器来拦截页面的访问Avalon 1...
  • a1172784417
  • a1172784417
  • 2016-05-26 17:50:03
  • 259

avalon2学习

最近公司需要用到avalon,但是avalon2和之前的版本有较大提升,且avalon用户基数还是少,加上avalon2官网基于之前版本作介绍,故对于avalon2的学习有一些找不着头绪。以此背景下写...
  • mxxrgxg
  • mxxrgxg
  • 2017-03-10 14:48:13
  • 135
收藏助手
不良信息举报
您举报文章:Avalon2简介
举报原因:
原因补充:

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