- 浏览: 79373 次
文章分类
- 全部博客 (136)
- 我的技术资料收集 (98)
- 具体技术 (1)
- 的技术资料收集 (4)
- All Articles (1)
- 机器学习 Machine Learning (1)
- 网络编程 (1)
- java (2)
- ava (1)
- 零散技术 (1)
- C# (3)
- 技术资料收集 (1)
- CQRS (1)
- 数据库技术(MS SQL) (1)
- .Net微观世界 (1)
- Oracle SQL学习之路 (1)
- C/C++ (1)
- JS/JQ (1)
- Js封装的插件/实例/方法 (2)
- 敏捷个人 (2)
- Javascript (1)
- 程序设计---设计模式 (1)
- Bug (1)
- 未知分类 (1)
- 程序设计 (1)
- Sharepoint (1)
- Computer Graphic (1)
- IT产品 (1)
- [06]JS/jQuery (1)
- [07]Web开发 (1)
- .NET Solution (1)
- Android (3)
- 机器学习 (1)
- 系统框架设计 (1)
- Others (1)
- 算法 (1)
- 基于Oracle Logminer数据同步 (1)
- 网页设计 (1)
- 原创翻译 (1)
- EXTJS (1)
- Jqgrid (1)
- 云计算 (1)
最新评论
原帖地址:http://www.cnblogs.com/aaronjs/p/3141695.html
基本上确定了avalon的几个重要元素的关系:
- M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json。有关的这个$json的名字还在商讨
- V,即View,HTML页面,通过绑定属性或插值表达式,呈现数据,处理隐藏,绑定事件或动画等各种交互效果。V只与VM打交道。
- VM,即ViewModel,我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"}),这里的vm是一个临时的对象,用于定义,真正的VM是avalon.define方法的返回值。它上面的$json属性就是M,可以见VM处于一切的核心。我们对VM的每一个操作,都会向上同步到V,向下同步到M。并且出于节能低碳起见(减少对象的创建),我们在生成M时,会重复利用VM中的一些属性,比如vm的某个属性是一个对象,那么这个对象会直接搬到$json中。若它是一个数组,它里面每个元素为对象,这些数组或对象都会直接$json中去,当然有时会修复一下(比如计算属性会转换一个简单的数据类型)
在MVVM模式中,ViewModel是贯穿整个框架的梁柱
我们现在分析下整个代码如何运作的一个流程:本文不讨论具体实现,只讨论流程
首先自然是HTML结构
<fieldset ms-controller="simple">
<legend>例子</legend>
<p>First name: <input ms-model="firstName" /></p>
<p>Last name: <input ms-model="lastName" /></p>
<p>Hello, <input ms-model="fullName"></p>
<div>{{firstName +" | "+ lastName }}</div>
</fieldset>
观察后得出结论:
@ 与常规结构不同
@ 定义了很多自定义标签 如何:ms-model ,ms-controller
@ 插值表达式 {{}}
.........等等,具体请看api手册
那么接下来开发着定义JS
avalon.ready(function() {
avalon.define("simple", function(vm) {
vm.firstName = "司徒"
vm.lastName = "正美"
vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor,
set: function(val) {//set, get里面的this不能改成vm
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
},
vm.nick = {
name: "暗黑之民"
}
})
})
大概理解下代码的意思:
avalon.ready(
function
() {
//这是domReady,相当于jQuery的 $(function(){})
var
model = avalon.define(
"aaa"
, [],
function
(vm) { //创建一个名字为aaa的ViewModel
vm.firstName =
"司徒"
//创建一个监控属性
vm.lastName =
"正美"
//创建一个监控属性
vm.fullName = {
//一个包含set或get的对象 用于创建一个依赖监控属性
avalon.scan();
//开始扫描DOM树,处理绑定
第二步就能看出来这个就是定义的一个模型了,vm->ViewModel 视图模型
整个运作都是围绕着vm展开的,mvvm模式中VM处于一切的核心,我们对VM的每一个操作,都会向上同步到V,向下同步到M。
VM的创建不仅仅只是我们看到的定义了几个属性,几个方法,其实框架内部帮我们做了很多事:
具体大概说下
VM模型的创建:
1.框架内部创建模型对象VM
2.VM吸收开发定义的处理方法
3.把开发定义的方法给经内部的转换,它的属性与方法会换胎换骨
4.返回这个被改造过的模型对象,挂到全局保存起来
所以这个里面涉及闭包与作用域链的问题了,以后再慢慢分析
那么这个VM创建好了,我们接下来干嘛呢?
大家有没有发现在HTML结构中与VM代码中,有没有共同点?
1.HTML中定义的自定义标签与VM中的属性方法名是不是一样?
2.根据API的定义,HTML对应的每一个标签的都会对应着某一种JS的处理方式
3.现在HTML结构与JS代码都是独立的东东,所以我们想个办法让他们关联起来
如何关联?
答案:扫描绑定avalon.scan();
//开始扫描DOM树,处理绑定
简而言之呢就是扫描属性节点,文本节点,找到对应的事件处理器,执行事件绑定等一堆东东
属性节点
<input ms-model="firstName" />
发现有ms-开头的名字就会解析成对应的一个处理方法
比如ms-model
//将模型中的字段与input, textarea的value值关联在一起
var modelBinding = bindingHandlers.model = function(data, scopes) {
var element = data.element;
var tagName = element.tagName;
//是否有对应元素的标签名的处理方法
if (typeof modelBinding[tagName] === "function") {
var array = getValueFunction(data.value.trim(), scopes);
if (array) {
modelBinding[tagName](element, array[0], array[1]);
}
}
当然还会传递一些需要运行的参数
特别指出来传递的实参scopes就是ViewModel对象
所以我们大胆猜测下
* 在这一大堆扫描绑定方法中应该会哪些实现(这些方法才是最终的执行体)
待续...
发表评论
-
C#WebBrowser控件使用教程与技巧收集--苏飞收集 - sufeinet
2013-06-28 12:07 1019原帖地址:http://www.cnblogs.com/suf ... -
我要喷一个自认为很垃圾的网站架构 - 老赵【苏州】
2013-06-28 12:01 1086原帖地址:http://www.cnblogs.com/lao ... -
[翻译] Oracle Database 12c 新特性Multitenant - Cheney Shue
2013-06-28 11:43 592原帖地址:http://www.cnblogs.com/ese ... -
memcahd 命令操作详解 - 阿正-WEB
2013-06-28 11:37 434原帖地址:http://www.cnblogs.com/azh ... -
面向过程的代码符合大众的思维方式吗? - 史蒂芬.王
2013-06-27 10:28 555原帖地址:http://www.cnblogs.com/ste ... -
面向过程的代码符合大众的思维方式吗? - 史蒂芬.王
2013-06-27 10:28 527原帖地址:http://www.cnblogs.com/ste ... -
RPG游戏之组队测试 - zthua
2013-06-27 10:22 520原帖地址:http://www.cnblogs.com/zth ... -
IT人们给个建议 - SOUTHER
2013-06-26 14:06 491原帖地址:http://www.cnblogs.com/sou ... -
Java向前引用容易出错的地方 - 银河使者
2013-06-26 14:00 458原帖地址:http://www.cnblogs.com/nok ... -
使用Func<T1, T2, TResult> 委托返回匿名对象 - 灰身
2013-06-26 13:54 765原帖地址:http://www.cnblo ... -
【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗
2013-06-25 10:45 742原帖地址:http://www.cnblogs.com/yex ... -
Windows 8 动手实验系列教程 实验6:设置和首选项 - zigzagPath
2013-06-25 10:27 579原帖地址:http://www.cnblogs.com/zig ... -
闲聊可穿戴设备 - shawn.xie
2013-06-25 10:21 518原帖地址:http://www.cnblo ... -
CentOS下Mysql安装教程 - 小学徒V
2013-06-23 15:24 566原帖地址:http://www.cnblogs.com/xia ... -
vmware安装ubuntu12.04嵌套安装xen server(实现嵌套虚拟化) - skyme
2013-06-23 15:18 800原帖地址:http://www.cnblogs.com/sky ... -
之前专门为IE6、7开发的网站如何迁移到IE10及可能遇到的问题和相应解决方案汇总 - 海之澜
2013-06-23 15:12 905原帖地址:http://www.cnblogs.com/wuz ... -
Android学习笔记--解析XML之SAX - 承香墨影
2013-06-23 15:01 370原帖地址:http://www.cnblo ... -
SQL Server 性能优化之——T-SQL TVF和标量函数
2013-06-19 09:32 619原帖地址:http://www.cnblogs.com/Boy ... -
Nginx学习笔记(二) Nginx--connection&request
2013-06-19 09:26 608原帖地址:http://www.cnblogs.com/cod ... -
从郭美美霸气侧漏看项目管理之项目经理防身术
2013-06-19 09:20 466原帖地址:http://www.cnblogs.com/had ...
相关推荐
赠送jar包:avalon-framework-impl-4.3.1.jar; 赠送原API文档:avalon-framework-impl-4.3.1-javadoc.jar; 赠送源代码:avalon-framework-impl-4.3.1-sources.jar; 赠送Maven依赖信息文件:avalon-framework-impl...
赠送jar包:avalon-framework-api-4.3.1.jar; 赠送原API文档:avalon-framework-api-4.3.1-javadoc.jar; 赠送源代码:avalon-framework-api-4.3.1-sources.jar; 赠送Maven依赖信息文件:avalon-framework-api-...
avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar avalon-logkit.jar ...
赠送jar包:avalon-framework-api-4.3.1.jar; 赠送原API文档:avalon-framework-api-4.3.1-javadoc.jar; 赠送源代码:avalon-framework-api-4.3.1-sources.jar; 赠送Maven依赖信息文件:avalon-framework-api-...
赠送jar包:avalon-framework-impl-4.3.1.jar; 赠送原API文档:avalon-framework-impl-4.3.1-javadoc.jar; 赠送源代码:avalon-framework-impl-4.3.1-sources.jar; 赠送Maven依赖信息文件:avalon-framework-impl...
avalon-framework-4.1.3.pomavalon-framework-4.1.3.pomavalon-framework-4.1.3.pomavalon-framework-4.1.3.pomavalon-framework-4.1.3.pom
Qsys系统中会使用互联结构,这篇文档是介绍如何使用Avalon-MM Pipeline Bridge
官方版本,亲测可用
avalon-framework-api-4.3.1.jar包下载
官方版本,亲测可用
avalon-framework-4.1.4.jar
avalon-framework-4.1.3.jar 资源共享,有需要其他jar包的可以在评论留言,看到后我会陆续上传。
介绍Avalon-ST总线规范
avalon-logkit-1.2-8.2.el6.noarch.rpm是centos工具包。
avalon-framework-4.1.4-7.el6.i686.rpm是centos工具包。
Avalon 接口规范升级到最新3.2版 , 并将其改名为 Avalon- MM ( Avalon Memory Mapped Interface, 以下均简Avalon- MM) 接口规范 ,同时推出新的 Avalon- ST( Avalon Streaming In-terface)接口规范,因此最新的Avalon...
avalon-framework-4.2.0.jar avalon-framework-4.2.0.jar avalon-framework-4.2.0.jar avalon-framework-4.2.0.jar avalon-framework-4.2.0.jar
这里面是关于qsys中元器件的介绍的,找了好多资料,发现这里面对于Avalon-ST Single Clock FIFO的介绍稍微详细一些;
这是基于altera avalon-MM总线的I2C IP核。利用VHDL语言编写。