简介

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的演示项目

avalon的VM,重点学习内容

webpack+avalon的学习教程

1.4的入门教程

1.4的仓库地

1.4的另一个更漂亮的教程

1.5的入门教程

1.5的仓库地址

1.×的视频教程

1.*的官网地址

前端乱炖网站上的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>

这里面涉及一些知识点

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

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!

Copyright © 司徒正美 2013-2016 all right reserved,powered by Gitbook该文件修订时间: 2017-06-20 16:39:08

results matching ""

    No results matching ""