從React到Domcom： 一個提供DOM部件的web框架
從React到Domcom： 一個提供DOM部件的web框架
github.com/taijiweb/domcom
設計背景
ReactJS給前端Web應用開發的思路帶來巨大轉變，顛覆了很多以前的觀念。我有多次機會接觸和學習ReactJS，在理解它先進的理念的同時也發現它存在一些問題，最初主要集中在性能方面，比如重復生成部件的虛擬dom，整體性計算Diff和進行patch，更新檢測機制不夠完善等。我的思路是用一種方法標識所有Dom節點特性以及其它所有部件特性的有效性和可變性。首先想到的用普通的值和特殊的對象來加以區別，后來發現用響應函數是最合適的手段。響應函數的采用使我得以進一步改善部件的更新檢測機制。后來我發現，相比于性能，不斷演進后得到的這些設計決策給數據管理和應用設計帶來的提升和便利更為明顯和重要。最終Domcom超出預期地實現了我所有的設計目標，不但避免了影響ReactJS性能的基本因素，也同時彌補了ReactJS整體架構影響應用設計和實現復雜性的一些明顯缺陷。
Domcom整體特性
Domcom是DOM和Component合并后的縮寫，宗旨是為開發Web應用提供DOM部件。通過Domcom，可以整體上改善數據管理，盡可能減少不必要的DOM操作，提升程序運行效率。Domcom提供的部件是聲明式和響應式的，充分運用函數范式和對象范式兩種程序設計風格，提高代碼復用，簡化設計。以下是本框架主要特性的一個列表：
-
基于響應函數的聲明式部件
任何dom特性以及部件的其它合適屬性都可以是響應函數。
-
最小化Dom訪問和更新
Domcom預先通過部件聲明和描述了整個Dom，web應用絕大部分時間不需要訪問Dom特性和狀態。更新的時候應用能跳過有效的部件，只處理當前失效的部件和特性。
-
便于組合擴展的部件
Domcom可以利用函數范式組合生成部件和設置傳遞參數，也可以利用對象范式通過繼承機制定義新部件。這能提高web應用的代碼復用，降低復雜度，令設計更為簡單清晰。
-
最大化解耦模型和控制器
Domcom作為Dom部件的提供者，，在MVC或者MVV*模式專注于解決視圖的問題。對模型和控制器完全保持中立和開放的視角。普通的值、變量和響應函數成為通往數據的橋梁和管道。借助這種方法，domcom最大化解耦視圖于模型和控制器，給實現帶來便利，簡化設計。利用 Domcom，很多時候我們甚至不需要為Model或者Controller作特意的設計。根據應用的復雜度和相關需求，Domcom當然也可以與 POJO, 事件、observable, 基于類的擴展、Flux， immutable等不同解決方案聯合使用，甚至可能借用backbone.js, ember.js， react.js等現有框架或庫中的相關組件。
-
不向Dom附加任何框架性元素和特性
Domcom沒有針對框架目的在Dom中設置元素id，class或其它輔助特性；也不需要為組合部件添加父元素或者任何其它輔助元素。利用Domcom可以得到一個最小最清潔的Dom。
-
簡單強大的路由部件
Domcom自帶路由部件，實現非常簡單，然而提供了強大的功能，支持正則表達式、通配符，允許多層次、多點嵌入的參數化路由。
-
方便的Promise支持
除了通常的Promise使用方式以外，Domcom的特性值和子部件可以直接是Promise，還另外提供了便利的Defer部件，更方便于使用Promise。
-
兼容各種瀏覽器，甚至IE 6, 7, 8
框架的設計特點使得自然而然具有良好的兼容性。雖然瀏覽器兼容性不是Domcom最初的設計目標，但是因為它管理Dom的模式使得它只需用到很少的瀏覽器及Dom相關的API，剛實現完畢框架即已經自然支持IE9及其它各大主流瀏覽器，繼而用了很少時間就通過修改實現將支持擴展到了IE 6, 7, 8。
-
無需依賴，無需不可變數據結構，無需瀏覽器或語言補丁，無需搭配程序庫,無需補充解決方案
Domcom自身具有比較適度的代碼規模，當前最小化大約60K+。因為框架在更新檢測以及數據傳遞上采用的機制，使得它可以更靈活地使用數據，沒有使用不可變數據結構的硬性需求。框架的實現代碼不涉及任何非主流的、尖端的瀏覽器或javascript語言特性。這些方面使得 Domcom無需依賴，無需瀏覽器或語言補丁，無需搭配程序庫,無需補充解決方案即可以解決應用程序的通常需求。因為Domcom已經全面徹底地代理 Dom，連angular那種通過指令直接操作Dom的需求都已經消失，因此即使是jQuery這樣的庫都變得不再必要。、
-
不需要模板語言
Domcom設計的中盡量方便直接使用Coffee-script語言和javascript語言。用Javascript語言的代碼已經非常簡練可讀，還可以用Coffee-script達到更好的效果，基本上能媲美Jade模板語言而靈活性更強。因此Domcom不存在多強的模板語言需求。當然，要為之加上適當的模板語言也是很可行的。如果有人能完成這項工作，我非常歡迎并期待合作。我個人更傾向于縮進風格而不是類似JSX那種 XML風格的模板語言。考慮到不同用戶的習慣，如果能夠兩種并存就更好了。
鏈接、文檔和下載
可以用npm下載安裝
npm install --save domcom
或者使用cdn
http://cdn.jsdelivr.net/domcom/0.1.1/domcom.min.js 文檔
Domcom已經提供全面的文檔（特別是中文文檔），都在 doc/文件夾 。中文文檔集中在 doc/Chinese文件夾 ：
介紹和輔導教程： Domcom的基本介紹和入門的輔導教程。
概念和原理：了解Domcom有關的基本概念和原理。
API參考：關于Domcom所有公開的API的正式而詳細的參考資料。
速查表：熟悉Domcom的API，常用技巧和慣用法。
常問問題：大家經常想了解的一些關于Domcom的問題。
doc/ 文件夾還有更多的文檔內容。
社區
QQ群：DomcomJS社區 371409830
Google groups: Domcom
說明
本框架從2015年1月產生思路，4月份開始開發，其間經歷了多次迭代，核心代碼進行了多次很大的重構，當前實現合理，簡明、優化，具備豐富的測試。今年上半年我的一個項目已經徹底棄用jQuery和Angular轉向Domcom，有良好的體驗。歡迎參與Domcom項目，共建社區，讓Web 開發更輕松，開發出更多改變世界的應用。