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

背景

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

設(shè)計理念

軟件架構(gòu)設(shè)計里面最基礎(chǔ)的概念“拆分”和“合并”，拆分的意義是“分而治之”，將復(fù)雜問題拆分成單一問題解決，比如后端業(yè)務(wù)系統(tǒng)的”微服務(wù)化“設(shè)計；“合并”的意義是將同樣的業(yè)務(wù)需求抽象收斂到一塊，達(dá)成高效率高質(zhì)量的目的，例如后端業(yè)務(wù)系統(tǒng)中的“中臺服務(wù)”設(shè)計。

而 Chameleon 屬于后者，通過定義統(tǒng)一的語言框架 + 統(tǒng)一多態(tài)協(xié)議，從多端（對應(yīng)多個獨立服務(wù)）業(yè)務(wù)中抽離出自成體系、連續(xù)性強、可維護(hù)強的“前端中臺服務(wù)”。

跨端目標(biāo)

雖然不同各端環(huán)境千變?nèi)f化，但萬變不離其宗的是 MVVM 架構(gòu)思想，Chameleon 目標(biāo)是讓 MVVM 跨端環(huán)境大統(tǒng)一。

學(xué)習(xí)全景圖

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

JS 語法用于處理頁面的邏輯層，與普通網(wǎng)頁編程相比，本項目目標(biāo)定義標(biāo)準(zhǔn) MVVM 框架，擁有完整的生命周期，watch，computed，數(shù)據(jù)雙向綁定等優(yōu)秀的特性，能夠快速提高開發(fā)速度、降低維護(hù)成本。

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

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

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

豐富的組件

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

詳情請查看：

https://cmljs.org/doc/component/component.html

豐富的 API

為了方便開發(fā)者的高效開發(fā)，chameleon 提供了豐富的 API 庫，發(fā)布為 npm 包 chameleon-api，里面包括了網(wǎng)絡(luò)請求、數(shù)據(jù)存儲、地理位置、系統(tǒng)信息、動畫等方法。

詳情請查看：

https://cmljs.org/doc/api/api.html

自由定制 API 和組件

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

智能規(guī)范校驗

代碼規(guī)范校驗，當(dāng)出現(xiàn)不符合規(guī)范要求的代碼時，編輯器會展示智能提示，不用挨個調(diào)試各端代碼，同時命令行啟動窗口也會提示代碼的錯誤位置。

詳情請查看：

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

漸進(jìn)式跨端

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

先進(jìn)前端開發(fā)體驗

Chameleon 不僅僅是跨端解決方案?；趦?yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來積累的最有用的工程化設(shè)計，提供了前端基礎(chǔ)開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調(diào)、測試、上線等全流程高效的完成業(yè)務(wù)開發(fā)。

1. 框架：Chameleon 不僅僅是跨端解決方案，讓開發(fā)者高效、低成本開發(fā)多端原生應(yīng)用?；趦?yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來積累的最有用的工程化設(shè)計，提供了前端基礎(chǔ)開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調(diào)、測試、上線等全流程高效的完成業(yè)務(wù)開發(fā)?？蚣芴峁┝俗约旱囊晥D層描述語言 CML 和 CMSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

2. 腳手架工具：基于 node 開發(fā)的腳手架工具，提供簡潔的命令，進(jìn)行初始化與構(gòu)建項目。

3. 目錄結(jié)構(gòu)：提供規(guī)范化的項目結(jié)構(gòu)，適合于企業(yè)級大型應(yīng)用的開發(fā)，CML 單文件組件的開發(fā)模式更有利于提高開發(fā)效率與優(yōu)化文件組織結(jié)構(gòu)。

4. 視圖層與邏輯層：視圖層由 CML 與 CMSS 編寫，邏輯層由 JS 編寫，chameleon 的核心是一個標(biāo)準(zhǔn)響應(yīng)式數(shù)據(jù)驅(qū)動視圖更新的 MVVM 框架。

5. 多態(tài)協(xié)議：提供了跨端時各端底層組件與接口統(tǒng)一的解決方案，使開發(fā)者可以自由擴(kuò)展原生 api 與組件。

6. 規(guī)范校驗：為了提高開發(fā)的效率與代碼的可維護(hù)性，chameleon 提供了全面的代碼規(guī)范與校驗，幫助開發(fā)者能夠得到更好的開發(fā)體驗。

后續(xù)規(guī)劃

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

• FAQ：https://cmljs.org/doc/framework/faq.html

• GitHub：https://github.com/didi/chameleon

• chameleon 官網(wǎng)：cmljs.org/