前端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規範

這系列的文章從今天起開連載...