简介

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

    使用方式

    avalon2：

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

    CDN2:

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

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

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

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

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

    webpack+avalon的学习教程

    1.4的仓库地

    1.5的入门教程

    1.×的视频教程

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

    avalon论坛

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

    电子书下载：

    入门例子

    这里面涉及一些知识点

    • vm,使用方法生成,必须带$id属性
    • 圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
    • 引导符,使用@或来告诉框架这些变量是来自vm的

    • avalon2.1.15后还可以使用:xxxx短指令.

    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最早引入这东西（），可惜有BUG，但带动了其他浏览器实现它， IE9+便能安全使用它。 对于老式IE，我找了好久，实在没有办法，使用VBScript实现了。

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