前端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规范

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