代码拉取完成，页面将自动刷新
A lightweight,high-performance and easy-to-learn javascript MVVM framework
avalon.js for IE6+ and modern browsers (including Webkit/Chromium based browsers), avalon.modern.js for IE10+ and HTML5 standard browsers and avalon.mobile.js, which added Touch Event, Pointer Event and fastclick support for mobile devices. For requirejs or AMD-like loader, use the corresponding shim version.One absolute advantage is that the framework eliminates
couplings and frees developers from varies of
complex event handling.
For example, one state could be effected by the order
of several events and their additional arguments, making the
logic extremely complex and fragile without using MVC
(including MVVM) framework and might usually maintain lots of
mutuality logics which can easily cause bugs at the same time.
By using these sort of framework, one can totally reduce the
difficulty of app development, and make the code more robust.
Besides, it also frees developers from the repeated tasks,
like `{value}` directive can simply replace
`$(selector).text(value)`, what's more, some common directive
can also implement some logics swiftly.
Here are some of the benefits:
avalon.scan(), enjoy!avalon.modern.|, easy for output formatting.java -jar compiler.jar --js avalon.js --js_output_file avalon.min.js
java -jar compiler.jar --js avalon.modern.js --js_output_file avalon.modern.min.js
java -jar compiler.jar --js avalon.mobile.js --js_output_file avalon.mobile.min.js
Demo:
<!DOCTYPE html>
<html>
<head>
<title>avalon 101</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var first = 0;
var model = avalon.define({
$id: "test",
firstName: "John",
lastName: "Smith",
fullName: {//a object that contain set/get will be treated as an `PropertyDescriptor`,
set: function(val) {//must use `this` to refer `scope` instead of using `scope` directly
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
},
arr: ["aaa", "bbb", "ccc", "ddd"],
selected: ["bbb", "ccc"],
checkAllbool: false,
checkAll: function() {
if (!first) {
first++
return
}
if (this.checked) {
model.selected = model.arr
} else {
model.selected.clear()
}
},
checkOne: function() {
var bool = this.checked
if (!bool) {
model.checkAllbool = false
} else {
model.checkAllbool = model.selected.size() === model.arr.length
}
}
})
</script>
</head>
<body>
<div ms-controller="test">
<p>First name: <input ms-duplex="firstName" /></p>
<p>Last name: <input ms-duplex="lastName" /></p>
<p>Hello, <input ms-duplex="fullName"></p>
<div>{{firstName}} | {{lastName}}</div>
<ul>
<li><input type="checkbox" ms-duplex-checked="checkAllbool" data-duplex-changed="checkAll"/>Select All</li>
<li ms-repeat="arr" ><input type="checkbox" ms-attr-value="el" ms-duplex="selected" data-duplex-changed="checkOne"/>{{el}}</li>
</ul>
</div>
</body>
</html>
More examples are at here.
The code structure of the source code are listed here, from top to bottom:
迷你简单易用的MVVM框架
前端做久了就会发现HTML(DOM)才是所有前端的真正精髓汇聚地。不管JS和CSS都是为DOM服务的。但是DOM遍布荆棘与陷阱，因此才出现像jQuery那样专门为它填坑的库， 当下的前端开发就是一边填坑一边写业务中进行。avalon的诞生改变了这一切，让我们摆脱DOM的掣肘，专注于需求本身，将可变的数据与操作数据的方法封装成模型。 在更高的层次上组织代码，提高软件的可维护性，可扩展性和可重用性。
绝对的优势就是降低了耦合, 让开发者从复杂的各种事件中挣脱出来. 举一个简单地例子,
同一个状态可能跟若干个事件的发生顺序与发生时的附加参数都有关系,
不用 MVC (包括 MVVM) 的情况下, 逻辑可能非常复杂而且脆弱.
并且通常需要在不同的地方维护相关度非常高的一些逻辑,
稍有疏忽就会酿成 bug 不能自拔. 使用这类框架能从根本上降低应用开发的逻辑难度, 并且让应用更稳健.
除此之外, 也免去了一些重复的体力劳动, 一个 {value} 就代替了一行 $(selector).text(value),
一些个常用的 directive 也能快速实现一些原本可能需要较多代码才能实现的功能
将项目下载到本地，里面有一个叫server.exe的.Net小型服务器（可能需要安装.Net4.0才能运行）， 点击它然后打开里面与index开头的HTML文件，一边看运行效果，一边看源码进行学习。
java -jar compiler.jar --js avalon.js --js_output_file avalon.min.js
java -jar compiler.jar --js avalon.modern.js --js_output_file avalon.modern.min.js
java -jar compiler.jar --js avalon.mobile.js --js_output_file avalon.mobile.min.js
大家也可以在新浪微博第一时间了解它的变更或各种秘笈分享！
<!DOCTYPE html>
<html>
<head>
<title>avalon 101</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var first = 0;
var model = avalon.define({
$id: "test",
firstName: "司徒",
lastName: "正美",
fullName: {//一个包含set或get的对象会被当成PropertyDescriptor,
set: function(val) {//m里面必须用this指向scope，不能使用scope
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
},
arr: ["aaa", "bbb", "ccc", "ddd"],
selected: ["bbb", "ccc"],
checkAllbool: false,
checkAll: function() {
if (!first) {
first++
return
}
if (this.checked) {
model.selected = model.arr
} else {
model.selected.clear()
}
},
checkOne: function() {
var bool = this.checked
if (!bool) {
model.checkAllbool = false
} else {
model.checkAllbool = model.selected.size() === model.arr.length
}
}
})
</script>
</head>
<body>
<div ms-controller="test">
<p>First name: <input ms-duplex="firstName" /></p>
<p>Last name: <input ms-duplex="lastName" /></p>
<p>Hello, <input ms-duplex="fullName"></p>
<div>{{firstName}} | {{lastName}}</div>
<ul>
<li><input type="checkbox" ms-duplex-checked="checkAllbool" data-duplex-changed="checkAll"/>Select All</li>
<li ms-repeat="arr" ><input type="checkbox" ms-attr-value="el" ms-duplex="selected" data-duplex-changed="checkOne"/>{{el}}</li>
</ul>
</div>
</body>
</html>
从上至下，依次是
http://tieba.baidu.com/p/1350048586
MVVM最先使用是在WPF，对于微软来说是从WinForm的MVP和其余的MVC衍生而来， 比MVP/MVC做到更多的就是数据的Binding， 使得数据的变化能即时以增量的形式反馈到View上。 同理的实现好像还有iOS delegate，为MVC提供类似binding的Publish/Subscribe功能
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。