【avalon1与avalon2的异同点】的更多相关文章

avalon1与avalon2的异同点

avalon2并不向下兼容avalon1,但许多API与指令很相似,迁移成本比较低.此外,良好的性能与强大的功能是你迁移的动力.下面是一个列表,如有提问尽管提出. avalon1与avalon2的异同一览表 科题 avalon1 avalon2 如何得知某个属性被改动 使用VBScript,Object.defineProperty实现对＝号的重写 在此基础增加Proxy的魔术监听 如何更新视图 找到变动属性对应的订阅者数组,执行这些数组元素的update方法 使用vm.$render生成虚拟D…

avalon2对比avalon1 新增的功能汇总

avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-scan, ms-if-loop指令 avalon2.0 最主要的改变是 -- 引导符,使用@或##来告诉框架这些变量是来自vm的 avalon2.1.15后还可以使用:xxxx短指令,ms-if 可以写成 :if  :eg   <body :controller="test"> &…

avalon2的后端渲染实践

avalon2为了提高性能,采用全新的架构,四层架构,其中一层为虚拟DOM. 虚拟DOM的一个好处是能大大提高性能,另一个好处是能过错整描述我们的页面结构.因此在非浏览器环境下,虚拟DOM也能正常运行.并且avalon2自一开始,就努力隔离DOM API.基于这两点,avalon2可以原封不动地运行于nodejs中,进行定义VM,渲染视图等操作. 客户端上,虚拟DOM通过vm.$render方法渲染到页面中 服务端上,虚拟DOM使用serveRender生成HTML字符串 与react的后端渲染…

avalon2学习教程15指令总结

avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来代劳.VM,成了一个大管家.它只一个反射体.我们对它的操作,直接影响到视图.因此俗称"操作数据即操作视图"!至于它是怎么影响视图,avalon视其版本的不同,也有不同的解法.如果抛开avalon,纵观世上所有MVVM框架,大抵有如下几种方式 函数wrapper:将原数据对象重新改造,所有属…

avalon2学习教程13组件使用

avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优雅的定义组件使用组件.从avalon1.4的ms-widget,到avalon1.5的自定义标签.而现在的版本恰好是它们的结合体,并从web component那里借鉴了slot插入点机制及生命周期管理,从react那里抄来了render字符串模板. 在avalon1.4中,ms-widget指令的…

avalon2学习教程09循环操作

avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那里抄来了ms-repeat, 这是循环元素内部的. 到avalon2,这三个指令合并成一个ms-for指令 ,用法与angular更相似,但没有$index, $last, $first, $middle. 如果想得到数组元素或对象的键值,在in关键字前指定一个新变量 <div ms-for="…

基于avalon1.4.x ----分页组件编写

avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保证在同样的前置条件下可以实现相同的功能,具体代码见github内容. 本文UI基于bootstrap创建,使用的avalon版本为avalon 1.4.7.具体代码如下: template代码为下面代码: <style> .current { background-color: #2d97de !…

avalon2学习心得（1）

github上,avalon2的项目描述是这样的:“avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 适用于各种场景, 兼容各种古老刁钻浏览器, 吸收最新的技术成果, 能迅速堆砌组件与应用.”而对于我来说,一方面是由于项目的需要.另一方面是avalon的学习成本确实比ng低了相当多,个人感觉入门还是相当快的.当然,这也可能是因为个人有学习angular的基础在里面.学习了一个多礼拜的avalon2,是时候总结下这段时间的学习成果了. 1.通用形式为…

avalon2学习教程08插入移除操作

本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1.×时别无二致,只要值是真,就插入,为假时,就在原位置上替换为一个注释节点做占位符. 注意1: 在avalon1.*中,存在一个叫ms-if-loop的辅助指令,这个在2.0移除了,这个直接使用filterBy过滤器就能实现相似功能. 注意2: 在avalon1.*中,ms-if的优选级是高于ms-repea…

avalon2学习教程06样式操作

avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Object"或ms-css="Array". 注意,当你用对象字面量的方式传参时,注意存在-号的键名要用""号括起来. 这个会报错.正确写法是以下两种 在avalon1.*系列,允许你在属性值中加入插值表达式,如 ms-css-width="prop&q…