Chameleon 簡介

CML (Chameleon) 是一個小程序跨端開發(fā)統(tǒng)一解決方案，它可以像變色龍一樣適應不同的環(huán)境。

一次開發(fā)，多端運行，一端所見即多端所見。

CML

多端高度一致，無需關注各端文檔?；诙鄳B(tài)協(xié)議，不影響各端的差異化與靈活性。

Web	微信小程序	Weex	百度小程序	支付寶小程序

背景

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

設計理念

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

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

雖然各端環(huán)境千變萬化，但萬變不離其宗的是 MVVM 架構思想，CML 目標是讓 MVVM 跨端環(huán)境大統(tǒng)一。

開發(fā)語言

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

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

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

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

CML 采用與 Vue 一致的組件化方案、單文件組織方式、生命周期，同時數(shù)據(jù)響應能力對齊 Vue，數(shù)據(jù)管理能力對齊 Vuex，非常方便開發(fā)者上手、維護。

代碼示例

<template>
  <view>
    <text>{{ title }}</text>
  </view>
</template>

<script>
class Index {
  data = {
    title: 'CML',
  };
  beforeCreate() {}

  created() {}

  beforeMount() {}

  mounted() {}

  beforeDestroy() {}

  destroyed() {}
}

export default new Index();
</script>

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

多端高度一致

深入到編程語言維度保障一致性，包括框架、生命周期、內置組件、事件通信、路由、界面布局、界面單位、組件作用域、組件通信等高度統(tǒng)一

豐富的組件與 API

CML 提供了豐富的內置組件和擴展組件來抹平多端差異。開發(fā)者可通過組合這些組件，創(chuàng)建出強大的應用程序。

內置的有 button switch radio checkbox 等組件，擴展的有 c-picker c-dialog c-loading等等，覆蓋了開發(fā)工作中常用的組件。

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

自由定制組件與 API

基于強大的多態(tài)協(xié)議，可自由擴展任意 API 和組件，不強依賴框架的更新。各端原始項目中已積累大量組件，也能直接引入到跨端項目中使用，充分隔離各端差異化實現(xiàn)，輕松維護一套代碼實現(xiàn)跨多端

智能規(guī)范校驗

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

漸進式跨端

既想一套代碼運行多端，又不用大刀闊斧的重構項目？不僅可以用 cml 開發(fā)頁面，也可以將多端重用組件用 cml 開發(fā)，直接在原有項目里面調用。

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

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

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

命令行工具

基于 node 開發(fā)的命令行工具，提供簡潔的命令，進行初始化與構建項目。

目錄結構

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

視圖層

視圖層由 CML 與 CMSS 編寫，CML 的核心是一個標準響應式數(shù)據(jù)驅動視圖更新的 MVVM 框架。

邏輯層

邏輯層由 javascript 編寫，邏輯層將處理數(shù)據(jù)后自動更新視圖，同時提供視圖層的事件響應方法。

多態(tài)協(xié)議

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

規(guī)范校驗

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