迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

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

迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> <html lang="en" data-framework="react"> <head> <meta charset="utf-8"> <title>React • TodoMVC</titl…

迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆由于定义在元素节点上,是一个特性节点(Attribute),因此称为绑定属性. 双花括号称之为插值表达式,意即这里在插入ViewModel对应的属性,或通过加减乘除后得到的结果. 绑定属性与插值表达式对于MVVM是非常重要的东西,它们是实现双向绑定的重要一环,我们通过它来操作DOM.在angular…

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

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

迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery时代,奉行的是"无侵入式javascript",页面虽然是拆成一块块,但最后是通过PHP等后端模板合并起来,并且把第一屏的数据直接灌进去,接着是无尽的选择某些元素进行处理,选择某些元素进行处理.javascript里面是满屏的CSS表达式,如果不一一对着HTML页面,这是无法阅读的.换言之…

迷你MVVM框架 avalonjs 学习教程20、路由系统

SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存大量数据的关键.本章节介绍的是avalon三柱臣之一的mmRouter(内含mmHistory). 我们先上一个示例吧. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit…

迷你MVVM框架 avalonjs 学习教程16、过滤器

avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rivetsjs <span rv-text="event.startDate | date"></span> <input rv-value="item.price | currency"> <span rv-text="b…

迷你MVVM框架 avalonjs 学习教程11、循环操作

avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放在$skipArray数组里,都会转会监控数组.监控数组其实就是一个被重写了push.unshift.shift.pop. splice.sort.reverse方法的普通数组.当然它也添加了其他一些方法,如set. pushArray.remove.removeAt.removeAll.clear…

迷你MVVM框架 avalonjs 学习教程4、数据填充

MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过underscope,那是一个工具集:你们可以听说过ejs,Mustache.HandlebarsJS等模板引擎,它们是用来替代字符串拼接--凡此种种,它们在我们的业务开发中只是很少的部分,带来的帮助也很有限.前端开发,贯彻始终的是如何将后端的数据显示出来,将用户的输入格式化送到后端,都离不开DOM操作,而DO…

迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defineProperties及VBScript,将要操作VM属性变成一种访问器属性.访问器属性是一种特殊的属性,需要我们为它指定setter.getter方法(当然,这也是框架内部生成的,只有计算属性可以做一些干预),当用户对此属性进行赋值操作时,就会调用setter方法,对它进行读取时,就会进行gett…

迷你MVVM框架 avalonjs 学习教程8、属性操作

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型.节点引用的情况.当前jQuery处理它们就是搞了N个钩子对象,才摆平它们.avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class. ms-hover. ms-active处理,这些其他章节介绍:表单元素的value属性之前也说过,…

迷你MVVM框架 avalonjs 学习教程21、双向绑定链

avalon的双向绑定机制,是通过一条依赖链实现.此依赖链最底层是监控属性.监控数组,中层是计算属性.监控函数,再上点是求值函数,最上层是视图刷新函数. 所谓计算属性,监控属性,监控函数属性,我们改变它们的值,它们会引发视图变化:而监控数组,是我们调用它的一些方法,也会引发视图变化. var vm = avalon.define({ a: "这是监控属性", $b: "这是非监控属性", $skipArray: ["c", "d&quo…

迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项

本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速慢时将花括号暴露出来. <!DOCTYPE html> <html> <head> <title>avalon入门</title> <meta http-equiv="Content-Type" content="…

迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么.我们先从$watch方法说起,它能监听当前的VM第一层的监控属性与计算属性,如果某属性是一个对象,想监控其子孙属性,就需要定位到此对象上使用$watch回调了.$watch回调会默认传入先后两个属性值. <!DOCTYPE html> <html> <head> &l…

迷你MVVM框架 avalonjs 学习教程14、事件绑定

之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了.能直接在模板上绑定是事件,这也是静态模板与动态绑定的一大区别.ms-click不是简单的onclick的别名,它在内部屏蔽了浏览器的差异,并且对许多浏览器暂时不支持的事件做了兼容处理. 总的来说,事件绑定是使用ms-on-☆绑定来实现,但avalon也提供了许多快捷方式,让用户能直接以ms-eventName调用那些常用事件,如下 animationend. blur. change. input. click. db…

迷你MVVM框架 avalonjs 学习教程13、模板引用

稍为复杂一点的网站都是多个前端工程师合作而成,因此分工是必需的.简单一点的分工就是一个人负责一个频道,某个页面是由一个人全部做的:但如果涉及到一个页面非常复杂,需要多个人同时动工呢?于是到模板的出场时间了. 模板有两种,一种是嵌入到页面内的模板,一种是独立成子页面的模板.这两种avalon都支持.前者通常是使用type为浏览器无法识别的MIME类型的script标签,display:none的textarea标签或noscript标签(0.94后支持,建议使用它)作为模板容器,最近HTML5出了…

迷你MVVM框架 avalonjs 学习教程12、数据联动

在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.在avalon里,存在各种绑定回调与$watch回调,完全满足你的需求. 下面是avalon所有绑定回调. data-duplex-changed,用于ms-duplex绑定,值改变后触发: 参数:当前元素的值 data-include-loaded,用于ms-include-src绑定,模板加载后触发,可以在这里修改模板参数: tmpl,vmodel1,…

迷你MVVM框架 avalonjs 学习教程10、样式操作

一般情况下我们通过设置类名就可以改变元素的样式,但涉及到动画部分,就一定需要设置内联样式了,因此有了ms-css.*ms-css*的用法为ms-css-样式名="样式值", 如ms-css-width=”prop”(会自动补px),ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”.细细联想,ms-css与ms-clas…

迷你MVVM框架 avalonjs 学习教程9、类名操作

ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-aaa-bbb=”expr”*.正如第三节<绑定属性与扫描机制>所讲,一个绑定属性分成三部分,第一部分是ms,第二部分是class,第三部分是第二个-之后的所有字符串,它们被称之为param.上面的xxx与aaa-bbb都是我们要处理里的类名.等号后面的expr是一个表达式,根据它们的真假值决定是添…

迷你MVVM框架 avalonjs 学习教程7、数据缓存

jQuery的许多功能都可以通过avalon的绑定属性来处理,如click方法对应ms-click,css方法对应ms-css,toggle方法对应ms-visible,它的数据缓存功能avalon也搬过来了.但不同于jQuery的是,avalon是直接将数据保存到元素节点的HTML5的data-☆属性上.在从data-☆属性还原数据时,它会简单的数据转换,再返回给你. 在ms-data绑定中,考虑到如果将对象转换为字符串再还原会丢失函数什么的,因此它们会直接保存到元素之上. <!DOCTYPE…

迷你MVVM框架 avalonjs 学习教程6、插入移除处理

ms-if是属于流程绑定的一种,如果表达式为真值那么就将当前元素输出页面,不是就将它移出DOM树.它的效果与上一章节的ms-visible效果看起来相似的,但它会影响到:empty伪类,并能更节约性能.ms-if还有一个分支,叫ms-if-loop,它是配合ms-repeat绑定使用,因此以后再说. 我们可以通过以下例子比较一下两者: <!DOCTYPE HTML> <html> <head> <title>ms-if</title> <m…

迷你MVVM框架 avalonjs 学习教程5、显示隐藏控制

今天的主角是ms-visible,它的效果类拟于jQuery的toggle,如果它后面跟着的表达式为真值时则显示它所在的元素,为假值时则隐藏.不过显示不是 display:none这么简单,众所周知,display拥有inline, inline-block, block, list-item, table, table-cell等十来个值,比如用户之前是让此LI元素表示inline-block,实现水平菜单效果,你直接display:block就会撑破布局.因此元素之前是用什么样式显示,需要保…

迷你MVVM框架 avalonjs 入门教程

新官网请不要无视这里,这里都是链接,可以点的 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…

迷你MVVM框架 avalonjs 0.95发布

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

迷你MVVM框架 avalonjs 0.85发布

迷你MVVM框架 avalonjs 0.85发布本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在循环绑定(ms-each)扫描元素节点时必须 nextTick,否则旧式IE会忙碌不过来. fix ms-css ,旧式IE style[name] = value, 当value为NaN ,不带单位或不是数值什么会抛异常,需要try catch. 旧式IE下有些元素的innerHTML是只读的,…

迷你MVVM框架 avalonjs 0.82发布

迷你MVVM框架 avalonjs 0.82发布本版本最大的改进是启用全新的parser. parser是用于干什么的?在视图中,我们通过绑定属性实现双向绑定,比如ms-text="firstName", ms-html="sex + '士'", ms-visible="Math.abs(toggle + 2000) >= 20", 我们需要将它们转换为求值函数.我们通过ms-controller="vm"来绑定Vie…

迷你MVVM框架 avalonjs 1.3.8发布

avalon1.3.8主要是在ms-repeat. ms-each. ms-with等循环绑定上做重大性能优化,其次是对一些绑定了事件的指令添加了roolback,让其CG回收更顺畅. 重构ms-repeat.ms-each.ms-with, 内部的代理对象全部使用普通的对象实现, 并且一个监控数组只对应一个代理VM数组,从而大量减少VM的数量. avalon不再使用scanCallback实现内部各种rendred回调,改成checkScan方法.详看这里的例子. fix parseHTML在…

迷你MVVM框架 avalonjs 1.3.9发布

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

迷你MVVM框架 avalonjs 1.3.7发布

又到每个月的15号了,现在avalon已经固定在每个月的15号发布新版本.这次发布又带来许多新特性,让大家写码更加轻松,借助于"操作数据即操作DOM"的核心理念与双向绑定机制,现在越来越多人加入到avalon的阵营中来.此外,基于avalon的UI库OniUI也越来越强大,很快,树组件也开发完毕,下星期也与大家见面了.到时,OniUI也有两个Grid组件,一个树组件的完整UI库.与本次发布的UI还有验证组件,mask组件,百叶窗切换组件-- UI库的广告就到时为止,我们看一下新版本带来…

迷你MVVM框架 avalonjs 1.3.6发布

本版本是一次重要的升级,考虑要介绍许多东西,也有许多东西对大家有用,也发到首页上来了. 本来是没有1.36的,先把基于静态收集依赖的1.4设计出来后,发现改动太多,为了平缓升级起见,才减少了一部分新特性,做成1.36.因此是先有1.4,才有1.36. 本版本针对公司(去哪儿网,毕竟是带薪在公司里搞这框架)的访问浏览器的占有率,加大对国产浏览器的测试.涉及浏览器有QQ浏览器, 搜狗浏览器, 猎豹浏览器, 傲游浏览器,但没有360浏览器,我们公司的同事还是很注意安全的.这么多浏览器,现在还差两个ca…

【迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域】的更多相关文章