摘要：基于對跨端工作的積累，規(guī)范了一套跨端標(biāo)準(zhǔn)，稱之為協(xié)議開發(fā)者只需要按照標(biāo)準(zhǔn)擴(kuò)展流程，即可快速擴(kuò)展任意架構(gòu)模式的終端。實(shí)現(xiàn)了微信端的基本擴(kuò)展，用戶可以以此為模板進(jìn)行開發(fā)。

新框架太多？學(xué)不動(dòng)啦？有這一套跨端標(biāo)準(zhǔn)，今后再也不用學(xué)習(xí)新框架了。

各個(gè)小程序按自己喜好“各自為政”？有了這套標(biāo)準(zhǔn)，再也不用重復(fù)開發(fā)各種新平臺啦。

如今前端比較流行的 React Native、Weex、Flutter 等跨平臺開發(fā)框架，對于開發(fā)來說屬于技術(shù)方案的選擇，比如，我們會(huì)考慮用這個(gè)技術(shù)開發(fā)，性能會(huì)不會(huì)超過 h5，開發(fā)效率會(huì)不會(huì)超過原生開發(fā)等等。

但是從 2017 年微信推出小程序，到至今各大廠商都推出自己的小程序，跨端開發(fā)就不僅僅是技術(shù)的問題了。已經(jīng)變成了必爭的流量入口。現(xiàn)在的小程序大戰(zhàn)像極了當(dāng)前的瀏覽器大戰(zhàn)。大戰(zhàn)中受苦的是我們一線開發(fā)者，同樣的應(yīng)用要開發(fā) N 次，面對了前所未有的挑戰(zhàn)，所以跨端框架的產(chǎn)生是大趨勢下的必然產(chǎn)物。

chameleon 基于對跨端工作的積累， 規(guī)范了一套跨端標(biāo)準(zhǔn)，稱之為 MVVM+協(xié)議；開發(fā)者只需要按照標(biāo)準(zhǔn)擴(kuò)展流程，即可快速擴(kuò)展任意 MVVM 架構(gòu)模式的終端。并讓已有項(xiàng)目無縫運(yùn)行新端。所以如果你希望讓 chameleon 快速支持淘寶小程序、React Native？只需按標(biāo)準(zhǔn)實(shí)現(xiàn)即可擴(kuò)展。

最終讓開發(fā)者只需要用 chameleon 開發(fā)，就可以在任意端運(yùn)行，再也不用學(xué)習(xí)新平臺框架啦。

滴滴、芒果 TV、阿里的同學(xué)合作，正在按照跨端協(xié)議流程進(jìn)行字節(jié)跳動(dòng)小程序的共建開發(fā)。

分工排期如下：github.com/didi/chamel…

倉庫地址： github.com/chameleon-t…

快應(yīng)用官方研發(fā)團(tuán)隊(duì)也正在接入中

分工排期如下：github.com/didi/chamel…

倉庫地址： github.com/quickappcn/…

跨端框架最核心的工作是統(tǒng)一，chameleon 定義了標(biāo)準(zhǔn)的跨端協(xié)議，通過編譯時(shí)+運(yùn)行時(shí)的手段去實(shí)現(xiàn)各端的代碼和功能，其實(shí)現(xiàn)原理如下圖所示。

其中運(yùn)行時(shí)和基礎(chǔ)庫部分利用多態(tài)協(xié)議實(shí)現(xiàn)各端的獨(dú)立性與框架的統(tǒng)一性。chameleon 目前支持的端都是采用這種方式，我們定義了擴(kuò)展一個(gè)新端所需要實(shí)現(xiàn)的所有標(biāo)準(zhǔn)，用戶只需要按照這些標(biāo)準(zhǔn)實(shí)現(xiàn)即可完成一個(gè)新端的擴(kuò)展。

我們再來看一張 chameleon 的設(shè)計(jì)圖，能夠?qū)崿F(xiàn)標(biāo)準(zhǔn)化的擴(kuò)展新端，得益于多態(tài)協(xié)議中對各層代碼進(jìn)行了接口的定義，各端代碼按照接口定義進(jìn)行實(shí)現(xiàn)，向用戶代碼提供統(tǒng)一調(diào)用，同時(shí)還提供”多態(tài)協(xié)議“讓用戶代碼保障可維護(hù)性的前提下，直接觸達(dá)各端原生能力的方式。

API 接口協(xié)議：定義基礎(chǔ)接口能力標(biāo)準(zhǔn)。

內(nèi)置組件協(xié)議：定義基礎(chǔ) UI 組件標(biāo)準(zhǔn)。

框架協(xié)議：定義生命周期、路由等框架標(biāo)準(zhǔn)。

DSL 協(xié)議：定義視圖和邏輯層的語法標(biāo)準(zhǔn)。

多態(tài)實(shí)現(xiàn)協(xié)議：定義允許用戶使用差異化能力標(biāo)準(zhǔn)。

簡單來說只需要實(shí)現(xiàn) 6 個(gè) npm 包。

chameleon-api提供了網(wǎng)絡(luò)請求，數(shù)據(jù)存儲，獲取系統(tǒng)信息，交互反饋等方法，用戶需要?jiǎng)?chuàng)建一個(gè) npm 包，結(jié)構(gòu)參考cml-demo-api。將chameleon-api中提供的每個(gè)方法利用多態(tài)接口擴(kuò)展語法擴(kuò)展新端的實(shí)現(xiàn)。 以擴(kuò)展一個(gè)alert方法為例,chameleon-api中alert方法的接口定義文件為chameleon-api/src/interfaces/alert.interface，其中的接口定義內(nèi)容如下：

用戶實(shí)現(xiàn)的interface文件中采用語法引入chameleon-api中alert方法的 interface 文件, 實(shí)現(xiàn)uiInterface。

// 引入官方標(biāo)準(zhǔn)interface文件
"chameleon-api/src/interfaces/alert/index.interface">
// 擴(kuò)展實(shí)現(xiàn)新端（以頭條小程序?yàn)槔僭O(shè)端擴(kuò)展標(biāo)識為：tt）

組件分為內(nèi)置組件chameleon-ui-builtin和擴(kuò)展組件cml-ui。所以用戶需要?jiǎng)?chuàng)建兩個(gè) npm 包分別實(shí)現(xiàn)這兩個(gè)組件庫，結(jié)構(gòu)參考cml-demo-ui-builtin和cml-demo-ui。利用多態(tài)組件擴(kuò)展語法，對原有組件庫中的每一個(gè)組件進(jìn)行新端的實(shí)現(xiàn)。

原有組件庫中的組件也分為兩種，一種為各端都有分別實(shí)現(xiàn)的多態(tài)組件，例如chameleon-ui-builtin中的button組件。實(shí)現(xiàn)起來新端基本上也是要多帶帶實(shí)現(xiàn)。另一種例如chameleon-ui-builtin中的radio組件，各端的實(shí)現(xiàn)都是用的chameleon-ui-builtin/components/radio/radio.cml。所以新端基本也可以復(fù)用這個(gè)實(shí)現(xiàn)，(還需要測試情況確實(shí)是否可以復(fù)用)。

新端獨(dú)立實(shí)現(xiàn)

例如：

編寫 my-ui-builtin/components/button/button.interface

// 引入官方標(biāo)準(zhǔn)interface文件
"chameleon-ui-builtin/components/button/button.interface" />

編寫 my-ui-builtin/components/button/button.demo.cml

獨(dú)立實(shí)現(xiàn)的my-ui-builtin/components/button/button.demo.cml文件屬于多態(tài)組件的灰度層，可以調(diào)用各端底層組件和 api，具體例子參見button和scroller的實(shí)現(xiàn)。

新端復(fù)用現(xiàn)有組件

編寫 my-ui-builtin/components/radio/button.interface

// 引入官方標(biāo)準(zhǔn)interface文件
"chameleon-ui-builtin/components/radio/radio.interface">
// 復(fù)用官方的實(shí)現(xiàn)

chameleon 內(nèi)部會(huì)將整個(gè)項(xiàng)目文件編譯為如下編譯圖結(jié)構(gòu)，節(jié)點(diǎn)中的內(nèi)容經(jīng)過了標(biāo)準(zhǔn)編譯，比如script節(jié)點(diǎn)的babel處理，style節(jié)點(diǎn)的less與stylus處理等等。?

節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)如下：

class CMLNode {
  constructor(options = {}) {
    this.realPath; // 文件物理地址  會(huì)帶參數(shù)
    this.moduleType; // template/style/script/json/asset
    this.dependencies = []; // 該節(jié)點(diǎn)的直接依賴       app.cml依賴pages.cml pages.cml依賴components.cml js依賴js
    this.childrens = []; // 子模塊 cml文件才有子模塊
    this.source; // 模塊源代碼
    this.output; // 模塊輸出  各種過程操作該字段
    ......
  }
}

用戶只需要實(shí)現(xiàn)一個(gè)編譯插件類，利用鉤子方法實(shí)現(xiàn)對節(jié)點(diǎn)的編譯，所有節(jié)點(diǎn)編譯完后再進(jìn)行文件的組織。編譯類如下：

module.exports = class DemoPlugin {
  constructor(options) {
    ......
  }
  /**
   * @description 注冊插件
   * @param {compiler} 編譯對象
   * */
  register(compiler) {
    // 編譯script節(jié)點(diǎn)，比如做模塊化
    compiler.hook("compile-script", function(currentNode, parentNodeType) {
    })
    // 編譯template節(jié)點(diǎn) 語法轉(zhuǎn)義
    compiler.hook("compile-template", function(currentNode, parentNodeType) {
    })
    // 編譯style節(jié)點(diǎn)  比如尺寸單位轉(zhuǎn)義
    compiler.hook("compile-style", function(currentNode, parentNodeType) {
    })
    // 編譯結(jié)束進(jìn)入打包階段
    compiler.hook("pack", function(projectGraph) {
      // 遍歷編譯圖的節(jié)點(diǎn)，進(jìn)行各項(xiàng)目的拼接
      // 調(diào)用writeFile方法寫入文件
      // compiler.writeFile()
    })
    ......
  }
}

運(yùn)行時(shí)主要是對 cml 文件的邏輯對象進(jìn)行適配，chameleon 內(nèi)部將 cml 文件的邏輯對象分為三類 App、Page、Component。對應(yīng)會(huì)調(diào)用用戶運(yùn)行時(shí) npm 包的createApp、createPage、createComponent方法，所以對外只需要實(shí)現(xiàn)這三個(gè)方法。

例如一個(gè) Page 的邏輯對象如下：

class PageIndex {
  data = {
    name: "chameleon"
  }
  computed = {
    sayName () {
      return "Hello" + this.name;
    }
  }
  mounted() {
  }
}
export default new PageIndex();

編譯時(shí)就會(huì)自動(dòng)插入用戶的運(yùn)行時(shí)方法處理邏輯對象，例如cml-demo-runtime：

class PageIndex {
  ......
}
export default new PageIndex();

// 編譯時(shí)自動(dòng)插入用戶配置的運(yùn)行時(shí)方法
import {createPage} from "cml-demo-runtime";
createPage(exports.default);

createApp、createPage、createComponent方法,參考cml-demo-runtime的結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)，需要include chameleon-runtime中相應(yīng)的接口進(jìn)行實(shí)現(xiàn)，才能夠?qū)崿F(xiàn)對chameleon-runtime的擴(kuò)展。用戶的工作量主要在于對邏輯對象的處理，可以參考chameleon-runtime中的實(shí)現(xiàn)方式，一般需要如下方面的適配工作。

從宏觀來看，運(yùn)行時(shí)處理可分為：

輸入Options對象的適配，參考

跨端運(yùn)行時(shí)能力注入，參考

從微觀來看，有以下處理：

生命周期：映射表參考 和 實(shí)現(xiàn)參考

組件 props 屬性：適配參考 和 變化監(jiān)聽參考

數(shù)據(jù)響應(yīng)：數(shù)據(jù)響應(yīng)實(shí)現(xiàn)參考

computed 計(jì)算能力：實(shí)現(xiàn)參考

watch 監(jiān)聽能力：適配參考 和 實(shí)現(xiàn)參考

methods 方法屬性：適配參考

mixins 能力：適配參考 和 合并參考

生命周期多態(tài)

例如： createPage 方法的實(shí)現(xiàn)

"chameleon-runtime/src/interfaces/createPage/index.interface">

chameleon-store提供了類似 Vuex 的數(shù)據(jù)管理解決方案，具體標(biāo)準(zhǔn)參見數(shù)據(jù)管理。同樣利用多態(tài)協(xié)議實(shí)現(xiàn)其功能。

擴(kuò)展新端 demo 示例倉庫: github.com/chameleon-t…?。實(shí)現(xiàn)了微信端的基本擴(kuò)展，用戶可以以此為模板進(jìn)行開發(fā)。

更詳細(xì)的教程參見擴(kuò)展新端操作教程。

期待更多的人加入開源。想了解更多 chameleon 信息請?jiān)L問官網(wǎng) cmljs.org

預(yù)告：chameleon 1.0正式版即將到來