前端MVVM框架设计及实现(二)
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法:
“html中使用mvvm徒增开发成本”
我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了复杂度
将逻辑放入HTML是一个不好的做法,也不建议这么做,即便从复用的角度来讲,因为HTML与代码紧密耦合,要想重新组成一个应用程序非常困难
当然,在构建一个应用程序时,你也可以不使用框架,但不可否认,使用框架将使得你的开发工作变得更容易
框架都不是万能的,但是在某一种特定的项目中,用最方便快捷的方式达到同样的目的又何乐而不为呢?
指令
在第一节前端MVVM框架设计及实现(一)中,展示了用最简单的代码实现了一个双向绑定的原理以及运作流程,但是如果是作为框架来说那是远远不够的,所以我们需要慢慢的完善每一个细节,如果要做到操作数据即操作行为,那么就意味着框架要在内部帮你做一大堆额外的事情,这里面涉及的知识面足够让你跨入一个新的层次
我们先来初步完善第一个功能点:指令
如果用过 Angular,那么你就会知道directive 是什么
简单点:利用声明式的结构来控制布局与行为
<div id='box' ao-controller="box">
<div ao-css-width="w" ao-click='click' ></div>
<p> {{ w }} {{ h }} {{ z }} </p>
</div>
如图ao-controller,ao-css-width等等HTML本身是没有这语法结构的,那么如何让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素
为了实现这种关联,AngularJS取了一个高大上的名字通过引入HTML编译器抽取这些标示能让浏览器识别新的HTML语法,咋一看很高级仔细一想不就是一个模版引擎么?
模版
此与彼同,此非彼也,一说模版就跑出来一个概念,占位与变量替换,几乎所有静态模板的实现原理都是一样的,将这个模板变成一个函数,然后里面分成静态部分与动态部分,静态部分就是上面的HTNMl部分,转换为一个个字符串,动态部分就是插入的JS代码, 它们基本上原封不动地成为函数体的逻辑。然后我们传入一个对象给这个函数,最后得到一个符合HTML格式的字符串,最后用它贴到页面上某个位置就行了。
静态模板有几个缺点,首先它容易混入大量的JS逻辑,对于菜鸟来说,他们特别喜欢在里面放入越来越多JS代码。这个在JSP年代,已经证明是bad practice。为此出现了logic-less的 mustache。 其次,它更新视图总是一大片一大片地处理,改动太大。最后,是由于第2点引发的问题,它对事件绑定等不友好,因为一更新,原来的节点都被消灭了,需要重新绑定。幸好,jQuery普及了事件代理,这问题才没有 暴露出来。
再次,字符串模块没有对样式的操作,流程的操作进行封装,没有计算属性,监控数组的东西,很容易诱导用户在页面上写大量业务逻辑,导致代码无法维护。
MVVM引入一种叫DOM模块,像knockout, avalon, angular就是用它们实现双向绑定了,可维护性更高
可见
绑定属性与插值表达式就是对应静态模板中的JS逻辑部分,由于只允许为表达式或单个属性值,复杂度被控制了,强制用户将它们转移到VM中。 VM作为一个数据源,对应静态模板的数据包,并且多了一个自动触发功能,进化成一个消息中心。
实现细节
avalon通过scan执行dom的扫描,其实就是通过遍历指定的节点树拿到对应的HTML语法标记
我们可以通过controller划分作用域,换句话说就是controller为根节点是往内部层层遍历检测每个元素上的语法标记
值得注意的细节,在IE67下,在循环绑定中,一个节点如果是通过cloneNode得到,自定义属性的specified为false,无法进入里面的分支,
但如果我们去掉scanAttr中的attr.specified检测,一个元素会有80+个特性节点(因为它不区分固有属性与自定义属性),很容易卡死页面
本章的代码主要是实现简单的HTML指令的解析,涉及到元素节点的attr属性与文本节点的{{}}插值表达式,通过解析对应的语法标记生成指定的数据结构提供给之后使用
GitHub上会同步更新每章的实现,。。。敬请关注~
Fork https://github.com/JsAaron/aaMVVM
前端MVVM框架设计及实现(二)的更多相关文章
- js架构设计模式——前端MVVM框架设计及实现(二)
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- js架构设计模式——前端MVVM框架设计及实现(一)
前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...
- 前端MVVM框架设计及实现
最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的Avalon开始了,我2013年写过一个关于MVC MV ...
- 前端MVVM框架设计及实现(一)
最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的av ...
- 轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...
- 前端MVVM框架avalon - 模型转换1
轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...
- 前端MVVM框架:Knockout.JS(一)
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- 不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质
最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...
- 轻量级前端MVVM框架avalon - 执行流程2
接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...
随机推荐
- UVALive-4839 HDU-3686 Traffic Real Time Query System 题解
题目大意: 有一张无向连通图,问从一条边走到另一条边必定要经过的点有几个. 思路: 先用tarjan将双连通分量都并起来,剩下的再将割点独立出来,建成一棵树,之后记录每个点到根有几个割点,再用RMQ求 ...
- haha3
YOU - fhasd - fdks jf > jd sfkjd sf </div><div><span >print "helloworld&qu ...
- I/O Techie 社区 --欢迎您的加入
I/O Techie 社区 上线了,希望能聚集更多的软件开发者,提供给处于各个阶段的新鸟,老鸟更多的帮助和更好的服务. 链接:http://www.iotechie.info/ Google +:ht ...
- 2015-12-23-( dispaly:table的用法)
dispaly属性的table和table-cell属性值不怎么常用,主要是浏览器的兼容性不好,大多数都是为了兼容IE6.IE7,此属性IE8以上,谷歌,火狐,oprea等浏览器都支持. 此disp ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- perl学习之路1
一切要从Hollo world开始 公司要用perl....啊, 不会只能自学了, 毕竟是公司啊, 不是学校...公司不学习就滚蛋了...惨惨惨 因为是学习嘛, 感觉开虚拟机比较麻烦所以直接用了个 瘟 ...
- [转]Android ListView 与 RecyclerView 对比浅析—缓存机制
从源码角度剖析ListView 与 RecyclerView 缓存机制的不同 https://zhuanlan.zhihu.com/p/23339185 原文地址:http://dev.qq.com/ ...
- BCD码和十六进制,十进制转换
参考文档: http://wenku.baidu.com/link?url=CfK2Wl7sCEmpzEabnbHSbcwf2t4yoSH6_n8sUIRw54piWaRB7hZ6RkaStWEkbC ...
- Ubuntu14.04或16.04下Hadoop及Spark的开发配置
对于Hadoop和Spark的开发,最常用的还是Eclipse以及Intellij IDEA. 其中,Eclipse是免费开源的,基于Eclipse集成更多框架配置的还有MyEclipse.Intel ...
- touchstart、touchmove、touchend 实现移动端上的触屏拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...