【重磅】Chameleon开放跨端扩大规范协定

新框架太多？学不动啦？有这一套跨端范例，以后再也不必进修新框架了。

各个小顺序按本身喜欢“各不相谋”？有了这套范例，再也不必反复开辟种种新平台啦。

如今前端比较盛行的 React Native、Weex、Flutter 等跨平台开辟框架，关于开辟来讲属于手艺计划的挑选，比方，我们会斟酌用这个手艺开辟，机能会不会凌驾 h5，开辟效力会不会凌驾原生开辟等等。

然则从 2017 年微信推出小顺序，到至今各大厂商都推出本身的小顺序，跨端开辟就不仅仅是手艺的问题了。已变成了必争的流量进口。如今的小顺序大战像极了当前的浏览器大战。大战中刻苦的是我们一线开辟者，一样的运用要开辟 N 次，面对了亘古未有的应战，所以跨端框架的发生是大趋势下的必定产品。

chameleon 基于对跨端事情的积聚， 范例了一套跨端范例，称之为 MVVM+协定；开辟者只须要依据范例扩大流程，即可疾速扩大恣意 MVVM 架构形式的终端。并让已有项目无缝运转新端。所以假如你愿望让 chameleon 疾速支撑淘宝小顺序、React Native？只需按范例完成即可扩大。

终究让开辟者只须要用 chameleon 开辟，就能够在恣意端运转，再也不必进修新平台框架啦。

新端接入状况

滴滴、芒果 TV、阿里的同砚协作，正在依据跨端协定流程举行字节跳动小顺序的共建开辟。

• 分工排期以下：https://github.com/didi/chame&＃8230;
• 堆栈地点： https://github.com/chameleon-&＃8230;

快运用官方研发团队也正在接入中

• 分工排期以下：https://github.com/didi/chame&＃8230;
• 堆栈地点： https://github.com/quickappcn&＃8230;

跨端道理

跨端框架最中心的事情是一致，chameleon 定义了范例的跨端协定，经由历程编译时+运转时的手腕去完成各端的代码和功用，其完成道理以下图所示。

个中运转时和基础库部份应用多态协定完成各端的自力性与框架的一致性。chameleon 现在支撑的端都是采纳这类体式格局，我们定义了扩大一个新端所须要完成的一切范例，用户只须要依据这些范例完成即可完成一个新端的扩大。

跨端范例协定

我们再来看一张 chameleon 的设计图，能够完成范例化的扩大新端，得益于多态协定中对各层代码举行了接口的定义，各端代码依据接口定义举行完成，向用户代码供应一致挪用，同时还供应”多态协定“让用户代码保证可维护性的前提下，直打仗达各端原生才能的体式格局。

• API 接口协定：定义基础接口才能范例。
• 内置组件协定：定义基础 UI 组件范例。
• 框架协定：定义生命周期、路由等框架范例。
• DSL 协定：定义视图和逻辑层的语法范例。
• 多态完成协定：定义许可用户运用差异化才能范例。

怎样扩大新端？

简朴来讲只须要完成 6 个 npm 包。

完成 API 接口协定

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文件

// 扩大完成新端（以头条小顺序为例，假定端扩大标识为：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文件


编写 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文件

// 复用官方的完成


完成 DSL 协定（编译时插件）

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-store供应了相似 Vuex 的数据管理解决计划，细致范例拜见数据管理。一样应用多态协定完成其功用。

更多

• 扩大新端 demo 示例堆栈: https://github.com/chameleon-&＃8230;。 完成了微信端的基础扩大，用户能够以此为模板举行开辟。
• 更细致的教程拜见扩大新端操纵教程。

期待更多人的到场开源。想相识更多 chameleon 信息请接见官网 cmljs.org

预报：chameleon 1.0正式版行将到来