前端Mvvm QC 设计解析

QC 官网http://time-go.github.io/qc/

QC的具体用法、介绍和源码,大家可以去官网下载

从本节开始,我会和大家一起分享在这个框架设计中用到的技巧,希望这些技巧能个大家带来灵感,使大家能够在此基础上开发改造出适合自己的业务的框架。

阅读中遇到问题,可以去我的Q群参加讨论330603020

QC总览

绑定数据

 数据绑定部分会讲QC如何通通过扫描,把数据和模版结合起来呈现的页面上,也会讲解这个页面初始化的时候怎么提升性能

页面元素是对应数据的对应表

 大家都知道,mvvm框架是双向绑定的,当我们改变数据模型的值的时候,页面也跟着变化。为了实现这个效果,我们必须建立数据模型与页面元素的对应关系。这个关系在QC里是怎么建立的,又是怎么管理的,这节我们重点讲解。

双向绑定的实现

双向绑定的本质就是在页面的输入元素绑定个事件,但是QC是怎么处理的这个问题的?我们知道在页面绑定元素是比较耗性能的,QC又是怎么处理的?

setValue函数

setValue是QC的特有函数,只有通过这个函数改变数据模型。设计这个函数的时候应该考虑哪些问题?怎么才能保证用法简的同时又满足我们的功能需求?

数组处理

数组处理是mvvm的重头戏,我们在操作数据的时候会经常添加元素,我们新添加的元素怎么重新建立映射表?我们删除元素怎么重新生成映射表?

变量监控的实现

ve.$watch() 函数的实现

表达式的计算

我们在绑定我们的数据的时候要经常绑定表达式,QC 并不是用传统的eval来计算表达式,而是自己解析的。是基于性能和灵活的考虑,用我们自己的解析引擎比用eval有明显的性能提升,并且我们自己可以灵活的控制和扩展。比如(2+5)*6===[52,42,300]?['A','B','C'] 这样的表达式就是对传统三目运算的扩展,因为我们有时候会有很多状态的,我们的三目不够用了。当然这中情况也可以通过函数调用来解决

事件系统

为了追求性能,我们的事件都绑在了父元素上,比如说有有很多的click事件,我们的的框架只在父元素绑定了一个click事件。那么我们怎么管理这些事件。使这些事件能看起来像绑在本身的元素上呢?QC也支持事件扩展,因为我们有时候会遇到系统不支持的事件,如移动端的longtap,我们需要扩展。这节我会和大家讨论QC事件系统的设计技巧

控件开发接口设计

 QC支持控件开发,也支持控件嵌套。父子控件之间都可以通讯,也可以双向绑定。这节我会和大家讨论控件这部分的代码设计,同时会和大家交流组件化开发到底好不好。

组件开发接口设计

QC的组件开发是一个自己创的概念,是以个比控件更松散的代码组织方式。也是我在开发中逐渐摸索出来的一种方式。这个也的代码实现比较简单,这节重点和代价讨论这种设计应用的场景还有这种设计到底好不好。

CommonJs规范代码实现

QC集成了一个简单的CommonJs规范,只有几十行代码。这节里我和大家一起实现一个简单的CommonJs规范

这系列的文章从今天起开连载...

上一篇:300行Go代码玩转RPC


下一篇:巧用 -webkit-box-reflect 倒影实现各类动效