avalon是国内最强大的MVVM框架，没有之一，虽然淘宝KISSY团队也搞了两个MVVM框架，但都无疾而终。其他的MVVM框架都没几个。也只有外国人与像我这样闲的架构师才有时间钻研这东西。我很早之前就预言，MVVM是前端的终极解决方案。我之前在盛大无线做盛大通行证就深有体会，一个业务逻辑对应十来个不同的界面，分层架构是必不可少的。因此双向绑定作为解药，结合很早就流行的MVC框架，衍生出MVVM这神器。

但这么牛叉的东西，为什么现在才流行起来呢？要不是谷歌振臂高呼，这个一直缩在flex, wps世界的MVVM就根本不可能在前端冒头。要知道，微软也搞了knockout, winjs等MVVM框架。原因之一，这东西非常难做。早些年，JS没有后端语言那种监听对象属性变动的高级特性，属性的变动如何同步视图，这需要非常巧妙的依赖收集机制，绑定（或叫指令）需要把一个编译器把VM的属性分离出来，这也不是一般人能搞出来的。加之，前端本来就没有几个是专科出来的人，都是半路出家的，写编译器与玩转jQuery不是同一个概念。knockout没有依赖什么高级特性，但用户体验太差，因此也没有流行起来。angular的缺点与优点也非常明显，幸好google比较大牌。

目前使用avalon的公司名单

但墙的内外毕竟是两个世界，这也是avalon存在的理由。avalon最早是模拟knockout为了解决盛大通行证这样多界面的东东而研发出来的。为了不像knockout那样别扭，它是使用IE8的Object.defineProperty劫持用户对数据的操作，从而实现对视图的同步。这种设计也比后来的angular的脏检测优秀许多。但Object.defineProperty是缺陷的，兼容性不好，早期的标准浏览器需要用_defineGetter_, _defineSetter_, IE6,IE7,IE8(因为IE8的Object.defineProperty也是有缺陷的)需要用VBScript，为了弄懂VBScript，我还特意入了一本90块钱的书。但这不是全部，兼容IE6是非常痛苦的，需要写大量额外的代码，因此存在avalon.js与avalon.modern.js两个版本。

avalon.js的兼容性是最好的，支持IE6及非常老的标准浏览器。这里的标准浏览器特指W3C阵营中的safari, opera, firefox, chrome。avalon.js在最近几个月的升级中，还对IE的VML，W3C方的SVG进行各种兼容处理。要知道，就是浏览器自身的API，也有各种问题。从这个层面来看，avalon.js的兼容能力比jQuery强多了。并且它可以与jQuery和平共处，享用其强大的AJAX，动画， Deferred等功能。加之，avalon现在拥有全职的团队帮它打造UI库（OniUI），大家就不用自己去拼凑各种插件了。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js"> </script>

    </head>

    <body>

        <div>TODO write content</div>

    </body>

</html>

上面就是一个范本，如果想引入avalon.modern.js，就是把上面script标签的src改一改。

avalon.modern.js之前是叫做avalon.mobile.js，是打算用在移动端的，里面是用了许多高级API，因此性能比avalon.js高许多。由于也不算兼容旧式IE（avalon.modern.js是支持IE10及以上的新浏览器），许多兼容逻辑也删掉了，因此体积少了许多，大概少了1000行代码。

如果你想做移动端开发呢，这要用到触屏事件，avalon的仓库有一个mobile.js，你可以直接将它的源码 拷贝到avalon.modern.js里最后一个花括号的前面，或者这样引入：

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.modern.js"></script>

        <script src="mobile.js"></script>

    </head>

    <body>

        <div>TODO write content</div>

    </body>

</html>

我建议使用拷贝方式，方便以后我们通过合并方式，把所有业务逻辑也统统合并成一个文件。

avalon.js本身是自带加载器，它是符合AMD规范，因此它可以用requirejs项目的rjs进行合并。如果大家不想用avalon.js的自带加载器，可以在紧接着的 script标签里将它禁用。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.modern.js"></script><!--不兼容IE6到8,也不玩移动端就用这个-->

        <script>

            avalon.config({

                loader: false

            })

        </script>

    </head>

    <body>

        <div>TODO write content</div>

    </body>

</html>

或者直接在源码里改，我在公司里就是直接改源码：

avalon.ready = function(fn) {

    if (innerRequire) {

        innerRequire("ready!", fn)

    } else if (fireReady === noop) {

        fn(avalon)

    } else {

        readyList.push(fn)

    }

}

avalon.config({

    loader: false

})

或者直接在源码里AMD加载器这个模块删掉，这样可以减少300行代码

   /*********************************************************************

     *                      AMD加载器                                   *

     **********************************************************************/

    var innerRequire

    var modules = avalon.modules = {

        "ready!": {

            exports: avalon

        },

        "avalon": {

            exports: avalon,

            state: 2

        }

    }

……

……

        innerRequire.checkDeps = checkDeps

    }

    /*********************************************************************

     *                           DOMReady                               *

     **********************************************************************/

如果你也用require.js，那么avalon自带的DOMReady模块也可以省掉。这时，你们可以引用avalon.shim.js。此JS是基于avalon.js改造而来，你也可以模仿一下改造avalon.mobile.js。

如果你只支持最新的chrome浏览器，比如chrome36，那么你可以使用基于Promise, Object.observe 高级API冶造的avalon.observe.js，它使用全新的编译器与监听机制，其性能是目前所有MVVM框架之首！

最后我们结合require.js， domReady.js，text.js，css.js，jQuery.js做一个简单的项目吧。

我们建立一个新项目，结构如下：

其中modules文件是放置不同的业务模块，可能不同的模块由不同的人来说，每个人管好自己的js、html、 css，因此我们才需要requirejs的text、css插件。vendor是放置第三方JS库、CSS库什么的，main.js为入口文件，特意与index.html放在醒目的位置。

注意，我们需要禁用avalon自带的加载器。

index.html的内容如下：

<!DOCTYPE html>

<html>

    <head>

        <title>第一个avalon项目</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="vendor/require/require.js" data-main="main.js"></script>

        <style>

            .ms-controller{

                visibility: hidden;

            }

        </style>

    </head>

    <body ms-controller="root">

        <div>{{header | html}}</div>

        <div ms-include-src="page"></div>

        <div>{{footer}}</div>

    </body>

</html>

里面有许多奇怪的属性，不要慌，这是avalon的绑定属性，后面的章节我们慢慢讲。之于requirejs的用法，自己到官网看。

然后是main.js，它大体分为三大块：

require.config({//第一块，配置

    baseUrl: '',

    paths: {

        jquery: 'vendor/jquery/jquery-2.1.1',

        avalon: "vendor/avalon/avalon",//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块

        text: 'vendor/require/text',

        domReady: 'vendor/require/domReady',

        css: 'vendor/require/css.js'

    },

    priority: ['text', 'css'],

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    }

});

require(['avalon', "domReady!"], function() {//第二块，添加根VM（处理共用部分）

    avalon.log("加载avalon完毕，开始构建根VM与加载其他模块")

    avalon.templateCache.empty = " "

    avalon.define({

        $id: "root",

        header: "这是根模块，用于放置其他模块都共用的东西，比如<b>用户名</b>什么的",

        footer: "页脚消息",

        page: "empty"

    })

    avalon.scan(document.body)

    require(['./modules/aaa/aaa'], function() {//第三块，加载其他模块

        avalon.log("加载其他完毕")

    });

});

然后每一个模块里都有其JS文件与模板文件（CSS的引入以后再说）

aaa.html

<div ms-controller="aaa">

    <input ms-duplex="username"/>{{username}}

</div>

aaa.js

define(["avalon", "text!./aaa.html"], function(avalon, aaa) {

    avalon.templateCache.aaa = aaa

    avalon.define({

        $id: "aaa",

        username: "司徒正美"

    })

    avalon.vmodels.root.page = "aaa"

})

然后大家运行服务器，就能看到效果（推荐用netBeans，可以直接右键运行）

注意，这不是一个简单的玩具级helloworld！这是一个工业级的项目的种子原型，以后我们所有项目都可以根据它进行改造，最后用rjs进行合并压缩！

最近附上本章节的源码！

迷你MVVM框架 avalonjs 学习教程1、引入avalon的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

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

    avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...

  3. 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项

    本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...

  4. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  5. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  6. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  7. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

  8. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  9. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

随机推荐

  1. MD5加密源码！

    import java.security.*; class MD5{ public final static String MD5(String s){ char hexDigits[] = {'0' ...

  2. 身份证&银行卡识别方案

    一.  调用第三方服务 腾讯云OCR识别: 实现方法:Post图片 URL到腾讯云服务器.Post图片文件 到腾讯云服务器 b.    报价: 月接口调用总量 0<调用量≤1000 1000&l ...

  3. PostgreSQL常用插件收集

    hexdump -C 数据表文件 -- 查看表文件中数据. pg_stat_statements pgcompacttable -- 在减少锁的情况下,清理表和索引的老空间. pg_repack--P ...

  4. 工作中比较重要的经验分享-2016-bypkm

    工作中总有一些经验能让人记忆深刻,能让人终生受用,相比技术而言,经验是宝贵的.无价的.在我的博客中,主要是技术类的博文,那些东西是相对死板的,价值也相对低廉.今天就记录一下我在工作中一次比较重要的经验 ...

  5. js base64 转成图片上传

    直接上代码,要点就是把base64转成Blob,添加到FormData传递给后台程序,跟选择图片文件上传时一样的了. var dataurl = canvas.toDataURL('image/png ...

  6. PyalgoTrade 绘图（七）

    PyAlgoTrade使得绘制策略执行变得非常简单 from pyalgotrade import strategy from pyalgotrade.technical import ma from ...

  7. PyalgoTrade 交易（五）

    我们继续采取简单的策略,这次模拟实际交易.这个想法很简单: 如果调整后的收盘价高于SMA(15),我们将进入多头仓位(我们下单买入市价). 如果调整后的收盘价低于SMA(15),我们退出多头头寸(我们 ...

  8. Linux的发行版之间的联系和区别

    转载:https://blog.csdn.net/suixin788/article/details/52555558 联系 Linux的内核源代码和Linux的应用程序都可以自由获得,因此很多公司组 ...

  9. Linux性能评估命令

    Linux性能评估工具 https://www.cnblogs.com/dianel/p/10085454.html Linux性能评估工具 目录 介绍 负载:uptime 查看内核的信息: dmes ...

  10. How To Enable EPEL Repository in RHEL/CentOS 7/6/5?

    What is EPEL EPEL (Extra Packages for Enterprise Linux) is open source and free community based repo ...