滴滴开源跨平台统一 MVVM 框架 Chameleon

克日，滴滴在 GitHub 上开源了跨端办理方案 Chameleon，简写 CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能顺应差异情形的跨端整体办理方案，具有易用、开拓快、高机能等特点。下文将具体先容 Chameleon 项目标研发配景和机能特点。

研发同窗在端内既追求 h5 的机动性，也要追求机能趋近于原生。 面临进口扩张，主端、独立端、微信小措施、付出宝小措施、百度小措施、Android 厂商同盟快应用，单一成果在各平台都要一再实现，开拓和维护本钱成倍增进。急切必要维护一套代码可以构建多进口的办理方案，历经近 20 个月打磨，滴滴跨端办理方案 Chameleon 终于宣布，真正专注于让一套代码运行多端。

软件架构计划内里最基本的观念“拆分”和“归并”，拆分的意义是“分而治之”，将伟大题目拆分成单一题目办理，好比后端营业体系的”微处事化“计划；“归并”的意义是将同样的营业需求抽象收敛到一块，告竣高服从高质量的目标，譬喻后端营业体系中的“中台处事”计划。

而 Chameleon 属于后者，通过界说同一的说话框架 + 同一多态协议，从多端（对应多个独立处事）营业中抽离出自成系统、持续性强、可维护强的“前端中台处事”。

固然差异各端情形变化多端，但万变不离其宗的是 MVVM 架构想想，Chameleon 方针是让 MVVM 跨端情形大同一。

从事过网页编程的人知道，网页编程回收的是 HTML + CSS + JS 这样的组合，同样原理，chameleon 中回收的是 CML + CMSS + JS。

JS 语法用于处理赏罚页面的逻辑层，与平凡网页编程对比，本项目方针界说尺度 MVVM 框架，拥有完备的生命周期，watch，computed，数据双向绑定等优越的特征，可以或许快速进步开拓速率、低落维护本钱。

CML（Chameleon Markup Language）用于描写页面的布局，我们知道 HTML 是有一套尺度的语义化标签，譬喻文本是<span> 按钮是<button>。CML 同样具有一套尺度的标签，我们将标签界说为组件，CML 为用户提供了一系列组件。同时 CML 中还支持模板语法，譬喻前提渲染、列表渲染，数据绑定等等。同时，CML 支持行使类 VUE 语法，让你更快入手。

CMSS(Chameleon Style Sheets) 用于描写 CML 页面布局的样式说话，其具有大部门 CSS 的特征，而且还可以支持各类 css 的预处说话 less stylus。

通过以上对付开拓说话的先容，信托你看到只要是有过网页编程常识的人都可以快速的上手 chameleon 的开拓。

在用 CML 写页面时，chameleon 提供了富厚的组件供开拓者行使，内置的有 button switch radio checkbox 等组件，扩展的有 c-picker c-dialog c-loading 等等，包围了开拓事变中常用的组件。

详情请查察：

https://cmljs.org/doc/component/component.html

为了利便开拓者的高效开拓，chameleon 提供了富厚的 API 库，宣布为 npm 包 chameleon-api，内里包罗了收集哀求、数据存储、地理位置、体系信息、动画等要领。

详情请查察：

https://cmljs.org/doc/api/api.html

基于强盛的多态协议，可自由扩展恣意 API 和组件，不强依靠框架的更新。各端原始项目中已蕴蓄大量组件，也能直接引入到跨端项目中行使。

代码类型校验，当呈现不切合类型要求的代码时，编辑器会展示智能提醒，不消挨个调试各端代码，同时呼吁行启动窗口也会提醒代码的错误位置。

详情请查察：

https://cmljs.org/doc/framework/linter.html

许多人已经开拓小措施了，又不肯意大多阔斧从头改革，也但愿行使 CML？虽然可以，2 种方法行使 CML：

Chameleon 不只仅是跨端办理方案。基于优越的前端打包器材 Webpack，接收了业内多年来蕴蓄的最有效的工程化计划，提供了前端基本开拓脚手架呼吁器材，辅佐端开拓者从开拓、联调、测试、上线等全流程高效的完成营业开拓。

1. 框架：Chameleon 不只仅是跨端办理方案，闪开拓者高效、低本钱开拓多端原生应用。基于优越的前端打包器材 Webpack，接收了业内多年来蕴蓄的最有效的工程化计划，提供了前端基本开拓脚手架呼吁器材，辅佐端开拓者从开拓、联调、测试、上线等全流程高效的完成营业开拓。框架提供了本身的视图层描写说话 CML 和 CMSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和变乱体系，闪开拓者可以或许专注于数据与逻辑。

2. 脚手架器材：基于 node 开拓的脚手架器材，提供简捷的呼吁，举办初始化与构建项目。

3. 目次布局：提供类型化的项目布局，得当于企业级大型应用的开拓，CML 单文件组件的开拓模式更有利于进步开拓服从与优化文件组织布局。

4. 视图层与逻辑层：视图层由 CML 与 CMSS 编写，逻辑层由 JS 编写，chameleon 的焦点是一个尺度相应式数据驱动视图更新的 MVVM 框架。

5. 多态协议：提供了跨端时各端底层组件与接口同一的办理方案，使开拓者可以自由扩展原生 api 与组件。

6. （编辑：河北网）

   【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!