接触avalon差不多有一年时间了,当时是看前端大牛司徒正美的博客才了解到还有这么一个高大上的玩意,然后就加入了avalon的讨论群.从群里零零散散的了解了avalon的一些特性,感觉很强大,感觉思想比较超前,连jquery也成了他们的吐槽对象.司徒正美鼓吹使用avalon代码量比使用jquery至少少一半,不用操作DOM,更易维护,完全只需要操作Model数据层,界面会自动更新,当时听到这些概念的时候我也会思考某些功能不用jquery实现转而使用avalon实现的话怎么实现,当时还是有很多疑惑…

迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了! 神奇的代码: 如上图所示: 开发者: 1 定义一个带有自定义标签的HTML结构 2 定义一个简单的JS代码 用户操作: 用户在input文本框中改变值时,你就会发现对应的多条相关联的记录都被同步修改 问题: 事件是什么时候绑定的,因为开发者…

迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11:40 阅读:741 评论:6     迷你MVVM框架 avalonjs 组件编写指南 司徒正美 2014-02-28 14:55 阅读:1268 评论:5     迷你MVVM框架 avalonjs 1.2发布 司徒正美 2014-02-19 09:31 阅读:649 评论:2     迷你MVV…

轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { 2: var skipArray = scope.$skipArray, //要忽略监控的属性名列表 3: model = {}, 4: Descriptions = {}, //内部用于转换的对象 5: json = {}, 6: callS…

接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html) 类名处理,如隔行变色,掠过变色(ms-class, ms-hover) 事件绑定(ms-click) 属性处理(ms-checked, ms-href, ms-disabled) 数据格式化与验证(过滤器与$watch) 将某个元素转为一些功能更强大的UI,如果拖动块,滑动块,弹…

距avalon0.7版本发布有一段时间,由于之前的稳定性,就停止一段时间更新,期间研究了下Knockout源码,也尝试写了一个小型的mvvm的实现模型,仅仅只是仿造ko的核心实现,把无关的东西给剥离掉了,有时间总结一下发布出来. ko算很早就出现的MVVM库了,实现是手段也是异常的巧妙,但是把监听的东西都转成函数表达,调用的时候也必须是函数形式,但使用习惯上,我就不太喜欢了 Knockout 监控属性通过observable内部转换成后,返回带有一个观察者模式的的函数(执行调用与赋值的时候都会有…

最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当时的一些思路,一来做一些技术总结,二来也是给像我这样第一次做日历的前端工程师一些参考. 先来一起看下日历的界面: 日历功能包括:1.显示当前月.上个月后几天.下个月前几天的日期,2.切换到上个月,3.切换到下一个月,4.回到今天,5.点击某天弹出当天的年月日(如2014-10-26),同时不在当前月…

基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即View,HTML页面,通过绑定属性或插值表达式,呈现数据,处理隐藏,绑定事件或动画等各种交互效果.V只与VM打交道. VM,即ViewModel,我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"}),这里的v…

废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务代码遍历选择器表达式会非常难维护.但不可否认,jQuery是操作DOM的王者,让我们操作DOM顺手拈来.但如果不让你操作DOM,不是更好吗?就像jQuery不让你用getElementById,getElementsByTagName, querySelecterAll,大家都不知道里面有多少坑,短…

官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面,绑定事件,切换类名,什么脏活都揽 右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.firstName = "模型"}) 既然是MVVM 那么还有个M跑哪里去了,M在MVVM定义中,M只是一个过…

MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明式的语法: 如:Avalon 作用域绑定(ms-controller, ms-important) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,……) 显示绑定(ms-v…

接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { 2: var skipArray = scope.$skipArray, //要忽略监控的属性名列表 3: model = {}, 4: Descriptions = {}, //内部用于转换的对象 5: json = {}, 6: callSetters = [], 7: callGetters…

引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 指令 编译 链接 过滤器 注入器 控制器 管道 等等…看起来觉得老高级,其实avalon也间接的部分实现,原理也不是很复杂 avalon版本更新很快,新版的加入了AMD规范的模块加载器,还修复了很多BUG,不过相信短期内实现的核心还是不会变化,所以我依然以现在的版本分析为主 编译期 视图背后的代码就…

很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只会把我们当成劳动力罢了.--左耳朵耗子 avalon在兼容旧式IE上做了大量工作,从而让它更接地气,完美地运行于国内的各种奇葩浏览器中. 首先是Object.defineProperties的模拟,正因为有这东西,才能让avalon是纯事件驱动地同步视图,而不用脏检测,从而获得更高的性能. //IE…

avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板(Templating) 本章主要提到 监控属于 与 依赖跟踪(后改名叫计算属性) 监控顾名思义,监听着你设定目标的变化,换句话说能够通知订阅者它的改变以及自动探测到相关的依赖. 计算属性,就是依赖监控属性变化而自动调用处理更新 KO的一个例子 如果你已经有…

本次升级,avalon改进了许多内部方法,大大提升性能,并且带来异步刷新视图的新功能. ms-html内部不再使用异步 head元素中的avalon元素加入ms-skip指令 重构计算属性,现在超级轻量化 重构CG回收,不会每次都全部检测所有绑定对象 重构内部方法isArrayLike,更好的判定非负整数 重构number过滤器 重构widget的节点回收,去掉onTree方法 重构Collection内部工厂 重构modelFactory, 现在VM.$event.$digest开启异步刷新视…

对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简单,容易上手3. 哪一个开发周期最短? 具体可以看   (英) Rich JavaScript Applications – the Seven Frameworks Web前端开发:为何选择MVVM而非MVC 由于工作关系~一直没时间细细研究下这些框架的源码~ 早期就看过Backbone.js与E…

前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScript 代码时,势必会充斥前大量 jQuery 的选择器的应用.我并不想说它好或不好.只想问一下,有没有更方便的方法呢?有过 WPF 开发经验的同学一定会知道 MVVM(Model View ViewModel) 这种开发模式.它可以很轻松的将 View 与 对应的后端代码隔离开来.使项目易于维护.那么…

最近,由于公司项目需要,使用百度mvvm框架san开发了一个兼容ie6的小项目.san的优势是强大的兼容性,能兼容到ie6.当初我自己好奇,尝试用san做了一个小型项目,这里记录一下.如果你也想尝试一下,也许我的文章会对你有一些帮助. 详情请看: https://segmentfault.com/blog/yongchaoo-san 源码:https://github.com/yongchaoo/mySan…

背景 在运营活动开发中,因为工作的重复性很大,同时往往开发时间短,某些情况下也会非常紧急,导致了活动开发时间被大大压缩,同时有些活动逻辑复杂,数据或者状态变更都需要手动渲染,容易出错,正是因为这些问题的存在,所以才有了MV*框架的诞生,比如大名鼎鼎的angularJS.今天就跟大家讲讲国产的MVVM框架avalonJS是如何快速进行开发的,同时大家也可以对比石器时代的开发模式(jquery或者zepto)与mv*模式的区别. avalonJS简介 avalonJS是前端大牛司徒正美开发和维护的m…

avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名data-*都与knockout差不多.它总共900行. 当时的理论体现在我在注释的这一段话: JS UI Component 最终还是通过 HTML 来描述界面,当 js object 的数据发生变化或者执行某个动作时, 需要通知到对应的html,使其发生相应变化.于是js object 需要得到他…

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

本月给公司内部一个项目做架构重构,其中使用到了 Rafy 框架.所以我培训了 Rafy 领域实体框架的使用方法,过程中录制了视频,方便其他同事查看.现在把视频放到园里来分享下,有兴趣的朋友可以看看,有什么问题可以进 Rafy QQ 群询问. 关于 Rafy 开源框架的详细介绍:<Rafy 领域实体框架 2.22.2067 发布!>. 如何下载并使用框架:<使用 NuGet 下载最新的 Rafy 框架及文档>. 本次培训一共有 7 个视频: 1.老系统架构讲解.新系统架构思想简介 2…

WCF/WPF公司内部订餐程序开发 (服务端篇) 上班的第一天,群里讨论关于订餐的问题,所以想到了要不要自己开发一个公司内部的订餐系统呢?方便公司内部员工的订餐,有了想法就简单的实践了下 . 实现还是很简单的,因为只是自己内部使用,所以没有考虑太多的因素.数据库选用的Ndatabase,之所以用到数据库其实开始的想法是希望添加一个自动推荐食物的功能的. 1. 新建一个类库工程QSnack.Contract(服务契约工程),结构: 我们定义了三个服务接口: 1) IUserService : 用户…

1.什么是MVVM 借用一下百度百科上对MVVM的介绍,MVVM是Model-View-ViewModel的简写,它本质上就是MVC 的改进版.MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开.当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.   2.MVVM在unity开发中的应用 MVVM框架应用面十分广泛,通常在前端开发中应用很广,最近看到周围同事在开发WPF时用…

作者:张龙 出处:http://www.infoq.com/cn/news/2013/07/zhengye-on-moco 郑晔谈Moco框架的开发:写一个好的内部DSL,写一个表达性好的程序 作者 张龙 发布于 七月 19, 2013 | 讨论 新浪微博腾讯微博豆瓣网TwitterFacebooklinkedin邮件分享更多2 稍后阅读 我的阅读清单 Moco是一个简单搭建模拟服务器的程序库/工具,这个基于Java开发的开源项目已经在Github上获得了不少的关注.该项目的简介是这样描述自己的…

新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-controller, ms-important) 忽略扫描绑定(ms-skip) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,--) 显示绑定(ms-visible) 插入绑定(m…

avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣.avalon.modern.js支持IE10以上版本,优先使用新API,性能更优,体积更少.avalon.mobile.js在avalon.modern的基础提供了触屏事件的支持,满足大家在移动开发的需求.此外,它们分别存在avalon.xxx.shim版本,指无自带加载器版,avalon…

在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了复杂度 将逻辑放入HTML是一个不好的做法,也不建议这么做,即便从复用的角度来讲,因为HTML与代码紧密耦合,要想重新组成一个应用程序非常困难 当然,在构建一个应用程序时,你也可以不使用框架,但不可否认,使用框架将使得你的开发工作变得更容易 框架都不是万能的,但是在某一种特定的项目中,用最方便快捷的…

迷你MVVM框架 avalonjs 0.95发布 本版本最主要的改进是ms-with 深层绑定的实现,至少,avalon1.0所有重要的feature已经开发完毕,之后就是小补小漏,性能优化了. ms-with进行绑定.对VM的某个对象属性重新赋给它一个对象,那么页面上对应的列表将根据它的键值对重新排列增删,修改它的$val.如果对它的对象属性的某一个键重新赋值 ,只会进行更新操作,详见index21with.html, index22with.html, index23with.html ms…