Chameleon 簡(jiǎn)介

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

一次開(kāi)發(fā)，多端運(yùn)行，一端所見(jiàn)即多端所見(jiàn)。

CML

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

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

背景

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

設(shè)計(jì)理念

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

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

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

開(kāi)發(fā)語(yǔ)言

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

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

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

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

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

代碼示例

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

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

  created() {}

  beforeMount() {}

  mounted() {}

  beforeDestroy() {}

  destroyed() {}
}

export default new Index();
</script>

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

多端高度一致

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

豐富的組件與 API

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

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

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

自由定制組件與 API

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

智能規(guī)范校驗(yàn)

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

漸進(jìn)式跨端

既想一套代碼運(yùn)行多端，又不用大刀闊斧的重構(gòu)項(xiàng)目？不僅可以用 cml 開(kāi)發(fā)頁(yè)面，也可以將多端重用組件用 cml 開(kāi)發(fā)，直接在原有項(xiàng)目里面調(diào)用。

先進(jìn)前端開(kāi)發(fā)體驗(yàn)

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

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

命令行工具

基于 node 開(kāi)發(fā)的命令行工具，提供簡(jiǎn)潔的命令，進(jìn)行初始化與構(gòu)建項(xiàng)目。

目錄結(jié)構(gòu)

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

視圖層

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

邏輯層

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

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

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

規(guī)范校驗(yàn)

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