简介

简介

avalon2是一款基于虚拟DOM与属性劫持的迷你、易用、高性能的前端MVVM框架，拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。

谁在使用avalon

使用方式

avalon2： https://github.com/RubyLouvre/avalon/tree/v2.2.7

CDN: https://unpkg.com/avalon2@2.2.8/dist/avalon.js

CDN2: https://cdnjs.com/libraries/avalon.js

CDN3: https://cdn.staticfile.org/avalon.js/2.2.4/avalon.js (2.2.4)

有的CDN比较旧，大家注意不要用 avalon2.0s这个最古老的版本

npm install avalon2

下面回来,你发现有一个dist目录,然后使用script标签引用当中的avalon.js或avalon.modern.js文件

avalon2是使用一份源码编译成N个版本:

avalon 支持IE6+及古老的W3C浏览器(判定标准是 
       这些浏览器是否支持VBScript, __defineSetter__, __defineGetter__)
avalon.modern 支持IE10+及较新的W3C浏览器(判定标准是 
       这些浏览器是否支持Object.defineProperty, addEventListener)
avalon.next 支持IE12+(edge)及chrome49, firefox49(判定标准是 
       这些浏览器是否支持Proxy, document.registerElement)

学习资料

avalon2-seed这是一个avalon2+mmRouter的演示项目

前端乱炖网站上的avalon1.5学习教程

基于avalon1.5的某个框架

segementfault网站上的avalon2学习教程

avalon论坛

QQ学习群: 453286795 79641290(进群条件,为avalon项目加star,为avalon2开发组件)

电子书下载：avalon cookbook

入门例子

<!DOCTYPE html>
<html>
    <head>
        <title>first example</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",
                name: "司徒正美",
                array: [11,22,33]
            })
            setTimeout(function(){
               vm.array.set(0, 444)
            }, 3000)
        </script>
    </head>
    <body ms-controller="test">
        <input ms-duplex="@name">
        <p>Hello,{{@name}}!</p>
        <ul>
           <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
        </ul>
    </body>
</html>

这里面涉及一些知识点

vm,使用avalon.define方法生成,必须带$id属性
指令,以ms-开头的属性及双花括号的插值表达式
圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
引导符,使用@或##来告诉框架这些变量是来自vm的
自动扫描机制
avalon2.1.15后还可以使用:xxxx短指令.

<body :controller="test">
    <input :duplex="@name">
    <p>Hello,{{@name}}!</p>
    <ul>
       <li :for="($index,el) in @array">{{$index}}--{{el}}</li>
    </ul>
</body>

后端渲染

https://github.com/RubyLouvre/avalon-server-render-example

avalon起源

avalon 是一个简单易用迷你的MVVM框架，它最早发布于2012.09.15，为解决同一业务逻辑存在各种视图呈现而开发出来的。事实上，这问题其实也可以简单地利用一般的前端模板加jQuery 事件委托搞定，但随着业务的膨胀，代码就充满了各种选择器与事件回调，难以维护。因此彻底的将业务与逻辑分离，就只能求助于架构。最初想到的是MVC，尝试过backbone，但代码不降反升，很偶尔的机会，碰上微软的WPF，优雅的MVVM架构立马吸引住我，我觉得这就是我一直寻找的解决之道。

avalon将所有前端代码彻底分成两部分，视图的处理通过绑定实现（angular有个更炫酷的名词叫指令），业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。显然所有神秘都有其内幕，C#是通过一种叫访问器属性的语句实现，那么JS也有对应的东西。感谢上帝，IE8最早引入这东西（Object.defineProperty），可惜有BUG，但带动了其他浏览器实现它， IE9+便能安全使用它。对于老式IE，我找了好久，实在没有办法，使用VBScript实现了。

Object.defineProperty或VBS的作用是将对象的某一个属性，转换一个setter与getter，我们只要劫持这两个方法，通过Pub/Sub模式就能偷偷操作视图。为了纪念WPF的指引，我将此项目以WPF最初的开发代号avalon来命名。它真的能让前端人员脱离DOM的苦海，来到数据的乐园中！

avalon的所有指令都是以ms-*命名,ms是用纪念我之前的一个框架mass Framework!