热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chameleon开放跨端扩展标准协议

新框架太多?学不动啦?有这一套跨端标准,今后再也不用学习新框架了。各个小程序按自己喜好“各自为政”?有了这套标准,再也不用重复开发各种新平台啦。如今前端比较流行的ReactNative、Weex、Flutter等跨平台开发框架,对于开发来说属于技术方案的选择,比如,我们会考虑用这个技术开发,性能会不会超过h5,开发效率会不会超过原生开发等等。

新框架太多?学不动啦?有这一套跨端标准,今后再也不用学习新框架了。

各个小程序按自己喜好“各自为政”?有了这套标准,再也不用重复开发各种新平台啦。

如今前端比较流行的 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 目前支持的端都是采用这种方式,我们定义了扩展一个新端所需要实现的所有标准,用户只需要按照这些标准实现即可完成一个新端的扩展。

跨端标准协议

我们再来看一张 chameleon 的设计图,能够实现标准化的扩展新端,得益于多态协议中对各层代码进行了接口的定义,各端代码按照接口定义进行实现,向用户代码提供统一调用,同时还提供”多态协议“让用户代码保障可维护性的前提下,直接触达各端原生能力的方式。

Chameleon 开放跨端扩展标准协议

  • API 接口协议:定义基础接口能力标准。
  • 内置组件协议:定义基础 UI 组件标准。
  • 框架协议:定义生命周期、路由等框架标准。
  • DSL 协议:定义视图和逻辑层的语法标准。
  • 多态实现协议:定义允许用户使用差异化能力标准。

Chameleon 开放跨端扩展标准协议

如何扩展新端?

简单来说只需要实现 6 个 npm 包。

Chameleon 开放跨端扩展标准协议

实现 API 接口协议

chameleon-api 提供了网络请求,数据存储,获取系统信息,交互反馈等方法,用户需要创建一个 npm 包,结构参考 cml-demo-api 。将 chameleon-api 中提供的每个方法利用多态接口扩展语法扩展新端的实现。 以扩展一个 alert 方法为例, chameleon-apialert 方法的接口定义文件为 chameleon-api/src/interfaces/alert.interface ,其中的接口定义内容如下:

 
 

用户实现的 interface 文件中采用 语法引入 chameleon-apialert 方法的 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 节点的 lessstylus 处理等等。  Chameleon 开放跨端扩展标准协议

节点的数据结构如下:

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 示例仓库: github.com/chameleon-t… 。实现了微信端的基本扩展,用户可以以此为模板进行开发。

  • 更详细的教程参见扩展新端操作教程。

期待更多的人加入开源。想了解更多 chameleon 信息请访问官网cmljs.org

预告:chameleon 1.0正式版即将到来


以上所述就是小编给大家介绍的《Chameleon 开放跨端扩展标准协议》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 我们 的支持!


推荐阅读
  • Java多重继承的替代方案及设计考量
    本文探讨了Java为何不支持多重继承,并深入分析了其背后的原理和替代方案。通过理解Java的设计哲学,开发者可以更好地利用接口和其他特性来实现复杂的类结构。 ... [详细]
  • JavaScript 基础语法指南
    本文详细介绍了 JavaScript 的基础语法,包括变量、数据类型、运算符、语句和函数等内容,旨在为初学者提供全面的入门指导。 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 本文介绍了如何利用 Spring Boot 和 Groovy 构建一个灵活且可扩展的动态计算引擎,以满足钱包应用中类似余额宝功能的推广需求。我们将探讨不同的设计方案,并最终选择最适合的技术栈来实现这一目标。 ... [详细]
  • Java项目分层架构设计与实践
    本文探讨了Java项目中应用分层的最佳实践,不仅介绍了常见的三层架构(Controller、Service、DAO),还深入分析了各层的职责划分及优化建议。通过合理的分层设计,可以提高代码的可维护性、扩展性和团队协作效率。 ... [详细]
  • 深入解析Serverless架构模式
    本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构,探讨Serverless如何简化应用开发与运维流程,并介绍当前主流的Serverless平台。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • PostgreSQL 最新动态 —— 2022年4月6日
    了解 PostgreSQL 社区的最新进展和技术分享 ... [详细]
  • Python 工具推荐 | PyHubWeekly 第二十一期:提升命令行体验的五大工具
    本期 PyHubWeekly 为大家精选了 GitHub 上五个优秀的 Python 工具,涵盖金融数据可视化、终端美化、国际化支持、图像增强和远程 Shell 环境配置。欢迎关注并参与项目。 ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • JavaScript中的数组是数据集合的核心结构之一,内置了多种实用的方法。掌握这些方法不仅能提高开发效率,还能显著提升代码的质量和可读性。本文将详细介绍数组的创建方式及常见操作方法。 ... [详细]
  • 设计模式在软件开发中被广泛应用,但如果不当使用,可能会导致系统复杂性增加。例如,过度添加类可能导致类图难以理解,代码跟踪变得复杂。本文探讨如何在使用设计模式时保持系统的简洁和高效。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 本文介绍百度AI Studio这一集成开发平台,涵盖丰富的AI教程、经典数据集及云端计算资源。通过具体示例——在AI Studio上构建线性回归项目,帮助初学者快速掌握其核心功能与操作方法。 ... [详细]
author-avatar
gjfeh46999
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有