AvalonJs入门简单易用迷你的MVVM框架

Oracion_wj

于 2017-07-12 15:21:00 发布

阅读量1.8k

点赞数 1

分类专栏： web前端文章标签： mvvm Avalon

本文链接：https://blog.csdn.net/u014701246/article/details/75017409

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

第一次接触到AvalonJs的前端网页的时候，我还是非常的惊讶的，作为一名Java后台的小码农，早就习惯了MVC（Model View Controller）的设计模式，前端请求控制器，控制器调用模型得到数据，然后再转跳给前端的页面。而Avalon却属于MVVM（Model-View-ViewModel）框架，一个让前端页面的逻辑处理和视图分离的框架模型，那么MVVM到底比MVC强在哪里呢？举个简单的例子，就拿翻页来说，传统的翻页模式，每点击一页，整个页面都要刷新，不仅刷新时间长，而且浪费网络资源，而MVVM模型做到了数据的绑定，只替换与翻页相关的数据。听到这里，你是不是觉得跟JQuery的异步很像，对的，只不过MVVM框架实现起来比用JQuery更为简单、快捷。

Avalon就是一个简单易用迷你的MVVM框架，而且是我们国人开发并维护的，好了不多说，让我们一起来看下AvalonJs吧。

http://www.cnblogs.com/rubylouvre/p/3181291.html#top0

Avalon的作者司徒正美自己写的AvalonJs入门教程，如果你是一名前端开发人员，或者有多年开发经验的大师，请直接去作者的网站吧，如果你跟我一样只是一名入行不久的小码农，那么我希望我讲的avalon入门，更为浅显易懂。

Demo1：

Avalon的第一个例子,认识avalon。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.shim.js"></script>
    </head>
    <body ms-controller="demo1">
        <div>
            <input type="text" ms-duplex="name">
        </div>
		<h1>what is your name?</h1>
		<div>{{name}}</div>
        <script>
              var vm = avalon.define({
                 $id: "demo1",
                 name:"John"
              })
        </script>
    </body>
</html>

文本框的内容和下面的文字会一起发生变化。

你可能会说，这个用JQuery也能很容易做到，是的，那是因为这里只有一个文本框，要是有很多文本框，难道要用JQuery一个一个绑定吗？用Avalon，仅仅需要给<input>标签加个属性。

想使用avalon非常的简单，只需要在项目中引用avalon的js文件就可以。

Demo2

Avalon的事件绑定：

ms-click

ms-dblclick

ms-mouseout

ms-mouseover

ms-mousemove

ms-mouseenter

ms-mouseleave

ms-mouseup

ms-mousedown

ms-keypress

ms-keyup

ms-keydown

ms-focus

ms-blur

ms-change

...

看到这些代码是不是非常的眼熟，就是在绑定事件名称的前面加上的ms-

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.shim.js"></script>
    </head>
    <body ms-controller="demo1">
        <div>
            <input type="text" ms-duplex="name">
        </div>
		<h1>what is your name?</h1>
		<div>{{name}}</div>
		<input type="button" ms-click="click" value="点我">
        <script>
              var vm = avalon.define({
                 $id: "demo1",
                 name:"John",
				 click:function(){
					alert(vm.name);
				 }
              })
        </script>
    </body>
</html>

Demo3
Ms-repeat属性：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.shim.js"></script>
    </head>
    <body ms-controller="demo3">
		<h1>Demo3</h1>
		<table border="1">
			<tr>
				<th>序号</th><th>名字</th><th>性别</th>
			</tr>
			<!-- 这里我们使用avalon的repeat来依次输出数据-->
			<tr ms-repeat-el="array">
				<!--这里el表示每个对象的名称，跟jsp中c：foreach的value差不多-->
				<td>{{el.index}}</td>
				<td>{{el.name}}</td>
				<td>{{el.sex}}</td>
			</tr>
		</table>
        <script>
			//avalon初始化
              var vm = avalon.define({
                 $id: "demo3",
                 array:[]   //初始化数组
              })
			  
			 //造一些数据
			 var data=[
				{"index":1,"name":"John","sex":"male"},
				{"index":2,"name":"Mike","sex":"male"},
				{"index":3,"name":"Link","sex":"male"},
				{"index":4,"name":"Christine","sex":"female"},
				{"index":5,"name":"Daisy","sex":"female"},
				{"index":6,"name":"HAHAHA","sex":"unknown"},
						];
			vm.array=data;
        </script>
    </body>
</html>

今天就写到这里吧，下一篇会介绍一些稍复杂的部分，比如全选反选，异步加载数据，分页等等。

源码地址：

http://download.csdn.net/download/u014701246/9896663

Oracion_wj

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AvalonJs入门简单易用迷你的MVVM框架

第一次接触到AvalonJs的前端网页的时候，我还是非常的惊讶的，作为一名Java后台的小码农，早就习惯了MVC（Model View Controller）的设计模式，前端请求控制器，控制器调用模型得到数据，然后再转跳给前端的页面。而Avalon却属于MVVM（Model-View-ViewModel）框架，一个让前端页面的逻辑处理和视图分离的框架模型，那么MVVM到底比MVC
复制链接

扫一扫