摘要：基于對跨端工作的積累，規范了一套跨端標準，稱之為協議開發者只需要按照標準擴展流程，即可快速擴展任意架構模式的終端。實現了微信端的基本擴展，用戶可以以此為模板進行開發。

新框架太多？學不動啦？有這一套跨端標準，今后再也不用學習新框架了。

各個小程序按自己喜好“各自為政”？有了這套標準，再也不用重復開發各種新平臺啦。

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

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

chameleon 基于對跨端工作的積累， 規范了一套跨端標準，稱之為 MVVM+協議；開發者只需要按照標準擴展流程，即可快速擴展任意 MVVM 架構模式的終端。并讓已有項目無縫運行新端。所以如果你希望讓 chameleon 快速支持淘寶小程序、React Native？只需按標準實現即可擴展。

最終讓開發者只需要用 chameleon 開發，就可以在任意端運行，再也不用學習新平臺框架啦。

滴滴、芒果 TV、阿里的同學合作，正在按照跨端協議流程進行字節跳動小程序的共建開發。

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

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

快應用官方研發團隊也正在接入中

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

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

跨端框架最核心的工作是統一，chameleon 定義了標準的跨端協議，通過編譯時+運行時的手段去實現各端的代碼和功能，其實現原理如下圖所示。

其中運行時和基礎庫部分利用多態協議實現各端的獨立性與框架的統一性。chameleon 目前支持的端都是采用這種方式，我們定義了擴展一個新端所需要實現的所有標準，用戶只需要按照這些標準實現即可完成一個新端的擴展。

我們再來看一張 chameleon 的設計圖，能夠實現標準化的擴展新端，得益于多態協議中對各層代碼進行了接口的定義，各端代碼按照接口定義進行實現，向用戶代碼提供統一調用，同時還提供”多態協議“讓用戶代碼保障可維護性的前提下，直接觸達各端原生能力的方式。

API 接口協議：定義基礎接口能力標準。

內置組件協議：定義基礎 UI 組件標準。

框架協議：定義生命周期、路由等框架標準。

DSL 協議：定義視圖和邏輯層的語法標準。

多態實現協議：定義允許用戶使用差異化能力標準。

簡單來說只需要實現 6 個 npm 包。

chameleon-api提供了網絡請求，數據存儲，獲取系統信息，交互反饋等方法，用戶需要創建一個 npm 包，結構參考cml-demo-api。將chameleon-api中提供的每個方法利用多態接口擴展語法擴展新端的實現。 以擴展一個alert方法為例,chameleon-api中alert方法的接口定義文件為chameleon-api/src/interfaces/alert.interface，其中的接口定義內容如下：

用戶實現的interface文件中采用語法引入chameleon-api中alert方法的 interface 文件, 實現uiInterface。

// 引入官方標準interface文件
"chameleon-api/src/interfaces/alert/index.interface">
// 擴展實現新端（以頭條小程序為例，假設端擴展標識為：tt）

組件分為內置組件chameleon-ui-builtin和擴展組件cml-ui。所以用戶需要創建兩個 npm 包分別實現這兩個組件庫，結構參考cml-demo-ui-builtin和cml-demo-ui。利用多態組件擴展語法，對原有組件庫中的每一個組件進行新端的實現。

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

新端獨立實現

例如：

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

// 引入官方標準interface文件
"chameleon-ui-builtin/components/button/button.interface" />

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

獨立實現的my-ui-builtin/components/button/button.demo.cml文件屬于多態組件的灰度層，可以調用各端底層組件和 api，具體例子參見button和scroller的實現。

新端復用現有組件

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

// 引入官方標準interface文件
"chameleon-ui-builtin/components/radio/radio.interface">
// 復用官方的實現

chameleon 內部會將整個項目文件編譯為如下編譯圖結構，節點中的內容經過了標準編譯，比如script節點的babel處理，style節點的less與stylus處理等等。?

節點的數據結構如下：

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

用戶只需要實現一個編譯插件類，利用鉤子方法實現對節點的編譯，所有節點編譯完后再進行文件的組織。編譯類如下：

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

運行時主要是對 cml 文件的邏輯對象進行適配，chameleon 內部將 cml 文件的邏輯對象分為三類 App、Page、Component。對應會調用用戶運行時 npm 包的createApp、createPage、createComponent方法，所以對外只需要實現這三個方法。

例如一個 Page 的邏輯對象如下：

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

編譯時就會自動插入用戶的運行時方法處理邏輯對象，例如cml-demo-runtime：

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

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

createApp、createPage、createComponent方法,參考cml-demo-runtime的結構進行實現，需要include chameleon-runtime中相應的接口進行實現，才能夠實現對chameleon-runtime的擴展。用戶的工作量主要在于對邏輯對象的處理，可以參考chameleon-runtime中的實現方式，一般需要如下方面的適配工作。

從宏觀來看，運行時處理可分為：

輸入Options對象的適配，參考

跨端運行時能力注入，參考

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

生命周期：映射表參考 和 實現參考

組件 props 屬性：適配參考 和 變化監聽參考

數據響應：數據響應實現參考

computed 計算能力：實現參考

watch 監聽能力：適配參考 和 實現參考

methods 方法屬性：適配參考

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

生命周期多態

例如： createPage 方法的實現

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

chameleon-store提供了類似 Vuex 的數據管理解決方案，具體標準參見數據管理。同樣利用多態協議實現其功能。

擴展新端 demo 示例倉庫: github.com/chameleon-t…?。實現了微信端的基本擴展，用戶可以以此為模板進行開發。

更詳細的教程參見擴展新端操作教程。

期待更多的人加入開源。想了解更多 chameleon 信息請訪問官網 cmljs.org

預告：chameleon 1.0正式版即將到來