迷你MVVM框架 avalonjs 学习教程1、引入avalon

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.jsavalon.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.jsdomReady.jstext.jscss.jsjQuery.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进行合并压缩!

最近附上本章节的源码

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。