数控车床密码锁怎么解锁

Taro Next 将支持使用多框架开发数控车床密码锁怎么解锁。过去的 Taro 1 与 Taro 2 只能使用 React 语法进行开发,但下一代的 Taro 框架对整体架构进行了升级,支持使用 React、Vue、Nerv 等框架开发多端应用。

为了支持使用多框架进行开发,Taro 需要对自身的各端适配能力进行改造。本文将重点介绍对 Taro H5 端组件库的改造工作。

Taro H5
Taro 遵循以微信小程序为主,其他小程序为辅的组件与 API 规范。

但浏览器并没有小程序规范的组件与 API 可供使用,例如我们不能在浏览器上使用小程序的 view 组件和 getSystemInfo API。因此我们需要在 H5 端实现一套基于小程序规范的组件库和 API 库。

Taro H5 架构图

在 Taro 1 和 Taro 2 中,Taro H5 的组件库使用了 React 语法进行开发。但如果开发者在 Taro Next 中使用 Vue 开发 H5 应用,则不能和现有的 H5 组件库兼容。

所以本文需要面对的核心问题就是:我们需要在 H5 端实现 React、Vue 等框架都可以使用的组件库。

方案选择
我们最先想到的是使用 Vue 再开发一套组件库,这样最为稳妥,工作量也没有特别大。

但考虑到以下两点,我们遂放弃了此思路:

组件库的可维护性和拓展性不足。每当有问题需要修复或新功能需要添加,我们需要分别对 React 和 Vue 版本的组件库进行改造。
Taro Next 的目标是支持使用任意框架开发多端应用。倘若将来支持使用 Angular 等框架进行开发,那么我们需要再开发对应支持 Angular 等框架的组件库。
那么是否存在着一种方案,使得只用一份代码构建的组件库能兼容所有的 web 开发框架呢?

答案就是 Web Components。

但在组件库改造为 Web Components 的过程并不是一帆风顺的,我们也遇到了不少的问题,故借此文向大家娓娓道来。

Web Components 简介
Web Components 由一系列的技术规范所组成,它让开发者可以开发出浏览器原生支持的组件。

技术规范
Web Components 的主要技术规范为:

Custom Elements
Shadow DOM
HTML Template
Custom Elements 让开发者可以自定义带有特定行为的 HTML 标签。

Shadow DOM 对标签内的结构和样式进行一层包装。

标签为 Web Components 提供复用性,还可以配合 标签提供灵活性。

示例
定义模板:

Hello World!

构造 Custom Element:

class App extends HTMLElement {
constructor () {
super(…arguments)

// 开启 Shadow DOM
const shadowRoot = this.attachShadow({ mode: 'open' })

// 复用