zoukankan      html  css  js  c++  java
  • 前端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规范

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

  • 相关阅读:
    iframe嵌入页面自适应目标页面的高度
    pc端适配
    页面之间传值,接数值
    表单直传文件到七牛
    前端一些小技巧
    css3的一些知识点
    禁止用户长按选中
    修改Html的title值
    判断时间是多久前
    图片裁剪
  • 原文地址:https://www.cnblogs.com/blowfish/p/5209402.html
Copyright © 2011-2022 走看看