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

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