近日，滴滴在 GitHub 上開源了跨端解決方案 Chameleon，簡寫 CML，中文名卡梅龍；中文意思變色龍，意味著就像變色龍一樣能適應不同環境的跨端整體解決方案，具有易用、開發快、高性能等特點。下文將詳細介紹 Chameleon 項目的研發背景和性能特點。

背景

研發同學在端內既追求 h5 的靈活性，也要追求性能趨近于原生。 面對入口擴張，主端、獨立端、微信小程序、支付寶小程序、百度小程序、Android 廠商聯盟快應用，單一功能在各平臺都要重復實現，開發和維護成本成倍增加。迫切需要維護一套代碼可以構建多入口的解決方案，歷經近 20 個月打磨，滴滴跨端解決方案 Chameleon 終于發布，真正專注于讓一套代碼運行多端。

設計理念

軟件架構設計里面最基礎的概念“拆分”和“合并”，拆分的意義是“分而治之”，將復雜問題拆分成單一問題解決，比如后端業務系統的”微服務化“設計；“合并”的意義是將同樣的業務需求抽象收斂到一塊，達成高效率高質量的目的，例如后端業務系統中的“中臺服務”設計。

而 Chameleon 屬于后者，通過定義統一的語言框架 + 統一多態協議，從多端（對應多個獨立服務）業務中抽離出自成體系、連續性強、可維護強的“前端中臺服務”。

跨端目標

雖然不同各端環境千變萬化，但萬變不離其宗的是 MVVM 架構思想，Chameleon 目標是讓 MVVM 跨端環境大統一。

學習全景圖

開發語言

從事過網頁編程的人知道，網頁編程采用的是 HTML + CSS + JS 這樣的組合，同樣道理，chameleon 中采用的是 CML + CMSS + JS。

JS 語法用于處理頁面的邏輯層，與普通網頁編程相比，本項目目標定義標準 MVVM 框架，擁有完整的生命周期，watch，computed，數據雙向綁定等優秀的特性，能夠快速提高開發速度、降低維護成本。

CML（Chameleon Markup Language）用于描述頁面的結構，我們知道 HTML 是有一套標準的語義化標簽，例如文本是 < span> 按鈕是 < button>。CML 同樣具有一套標準的標簽，我們將標簽定義為組件，CML 為用戶提供了一系列組件。同時 CML 中還支持模板語法，例如條件渲染、列表渲染，數據綁定等等。同時，CML 支持使用類 VUE 語法，讓你更快入手。

CMSS(Chameleon Style Sheets) 用于描述 CML 頁面結構的樣式語言，其具有大部分 CSS 的特性，并且還可以支持各種 css 的預處語言 less stylus。

通過以上對于開發語言的介紹，相信你看到只要是有過網頁編程知識的人都可以快速的上手 chameleon 的開發。

豐富的組件

在用 CML 寫頁面時，chameleon 提供了豐富的組件供開發者使用，內置的有 button switch radio checkbox 等組件，擴展的有 c-picker c-dialog c-loading 等等，覆蓋了開發工作中常用的組件。

詳情請查看：https://cmljs.org/doc/component/component.html

豐富的 API

為了方便開發者的高效開發，chameleon 提供了豐富的 API 庫，發布為 npm 包 chameleon-api，里面包括了網絡請求、數據存儲、地理位置、系統信息、動畫等方法。

詳情請查看：https://cmljs.org/doc/api/api.html

自由定制 API 和組件

基于強大的多態協議，可自由擴展任意 API 和組件，不強依賴框架的更新。各端原始項目中已積累大量組件，也能直接引入到跨端項目中使用。

智能規范校驗

代碼規范校驗，當出現不符合規范要求的代碼時，編輯器會展示智能提示，不用挨個調試各端代碼，同時命令行啟動窗口也會提示代碼的錯誤位置。

詳情請查看：

https://cmljs.org/doc/framework/linter.html

漸進式跨端

很多人已經開發小程序了，又不愿意大多闊斧重新改造，也希望使用 CML？當然可以，2 種方式使用 CML：

先進前端開發體驗

Chameleon 不僅僅是跨端解決方案。基于優秀的前端打包工具 Webpack，吸收了業內多年來積累的最有用的工程化設計，提供了前端基礎開發腳手架命令工具，幫助端開發者從開發、聯調、測試、上線等全流程高效的完成業務開發。

框架

Chameleon 不僅僅是跨端解決方案，讓開發者高效、低成本開發多端原生應用。基于優秀的前端打包工具 Webpack，吸收了業內多年來積累的最有用的工程化設計，提供了前端基礎開發腳手架命令工具，幫助端開發者從開發、聯調、測試、上線等全流程高效的完成業務開發。

框架提供了自己的視圖層描述語言 CML 和 CMSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注于數據與邏輯。

腳手架工具

基于 node 開發的腳手架工具，提供簡潔的命令，進行初始化與構建項目。

目錄結構

提供規范化的項目結構，適合于企業級大型應用的開發，CML 單文件組件的開發模式更有利于提高開發效率與優化文件組織結構。

視圖層與邏輯層

視圖層由 CML 與 CMSS 編寫，邏輯層由 JS 編寫，chameleon 的核心是一個標準響應式數據驅動視圖更新的 MVVM 框架。

多態協議

提供了跨端時各端底層組件與接口統一的解決方案，使開發者可以自由擴展原生 api 與組件。

規范校驗

為了提高開發的效率與代碼的可維護性，chameleon 提供了全面的代碼規范與校驗，幫助開發者能夠得到更好的開發體驗。

后續規劃

有關安裝、使用過程以及常見問題解答，請查看以下鏈接：

• FAQ：https://cmljs.org/doc/framework/faq.html
• GitHub：https://github.com/didi/chameleon
• chameleon 官網：http://cml.js.org

總結

以上是生活随笔為你收集整理的小程序采用mvvm设计模式_滴滴重磅开源跨平台统一 MVVM 框架 Chameleon的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。