随笔分类 -  avalon

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

摘要：avalon大家可能不熟悉，但是Knockout估计或多或少听过用过，那么说说KO的几个概念监控属性（Observables）和依赖跟踪（Dependency tracking）声明式绑定（Declarative bindings）模板（Templating）本章主要提到 监控属于 与 依赖跟踪（后改名叫计算属性）监控顾名思义，监听着你设定目标的变化，换句话说能够通知订阅者它的改变以及自动探测到相关的依赖。计算属性，就是依赖监控属性变化而自动调用处理更新KO的一个例子如果你已经有了监控属性firstName和lastName，你想显示全称怎么办？ 这就需要用到依赖监控属性了 – 这些函数是一个 阅读全文

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

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

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

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

摘要：废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中，数据是核心。而jQuery则以DOM为核心。而DOM只是HTML在JS的世界的抽象，是一个很易变的东西。因此如果业务代码遍历选择器表达式会非常难维护。但不可否认，jQuery是操作DOM的王者，让我们操作DOM顺手拈来。但如果不让你操作DOM，不是更好吗？就像jQuery不让你用getElementById，getElementsByTagName, querySelecterAll，大家都不知道里面有多少坑，短短几个字母$(expr)是背后sizzle选择器引擎1700行的实现！！！！jQuery其实是在用户代 阅读全文

摘要：官网提供架构图单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程如图左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.firstName = "模型"})既然是MVVM 那么还有个M跑哪里去了,M在MVVM定义中，M只是一个过客,被VM给再次包装,它与其他表示业务状态的东西融入VM（ViewModel）中,一个普通的ＪＳ对象 阅读全文

摘要：接上一章执行流程1在这一大堆扫描绑定方法中应该会哪些实现？首先我们看avalon能帮你做什么？数据填充，比如表单的一些初始值，切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html)类名处理，如隔行变色，掠过变色(ms-class, ms-hover)事件绑定(ms-click)属性处理(ms-checked, ms-href, ms-disabled)数据格式化与验证(过滤器与$watch)将某个元素转为一些功能更强大的UI，如果拖动块，滑动块，弹出层，颜色选择器，手风琴，切换卡……有了avalon，做登录后无缝刷新页面这样操作毫无压力回顾到我们最开始的3个问题： 阅读全文

摘要：基本上确定了avalon的几个重要元素的关系：Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.$json。有关的这个$json的名字还在商讨V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的$js 阅读全文

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

摘要：Backbone Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架。任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑、以及金字塔般的代码。而且，在传统的Web应用程序代码中，不可避免的都有在应用逻辑中加入显示数据的代码的情况。当项目... 阅读全文

摘要：前言： Web应用的功能越来越强，Javascript代码也越来越多，大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案，虽然它定义不明确需要很多时间来思考如何组织，崇尚代码分离增加了调试难度，但毕竟脸熟（……），从用CakePHP的时候就接触过这个概念，以我能理解的方式描述就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来连接这两者。所以一个Web应用的流程通常是这样的:1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮2. Cont... 阅读全文