近日，滴滴在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提供了全面的代碼規範與校驗，幫助開發者能夠得到更好的開發體驗。
後續規劃
有關安裝、使用過程以及常見問題解答，請查看以下鏈接：
-
chameleon官網：https://cmljs.org/
更多內容，請關注前端之巔。
