探索Web Components

news2024/10/6 18:26:40

title: 探索Web Components
date: 2024/6/16
updated: 2024/6/16
author: cmdragon

excerpt:
这篇文章介绍了Web Components技术，它允许开发者创建可复用、封装良好的自定义HTML元素，并直接在浏览器中运行，无需依赖外部库。通过组合HTML模板、Shadow DOM、自定义元素和HTML imports，Web Components增强了原生DOM的功能，提高了组件化开发的封装性和可维护性，同时支持组件的生命周期管理和高级设计模式，有利于提升网页应用的性能和开发效率。

categories:

  • 前端开发

tags:

  • Web Components
  • 原生DOM
  • 封装性
  • 组件化
  • 生命周期
  • 高级设计
  • 性能优化

在这里插入图片描述

在这里插入图片描述

扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

第1章：引言

Web Components的起源与发展

Web Components是一种基于Web标准的新兴技术，旨在解决Web应用程序开发中的可重用组件化问题。Web
Components的核心思想是，将HTML、CSS和JavaScript结合起来，实现可重用、可组合和可封装的组件。

Web Components的起源可以追溯到2011年，由W3C（万维网联盟）提出的一个名为Web Components Specifications（Web
Components规范）的项目。该项目包括四个主要模块：

  1. Templates and Slots（模板和插槽）：提供一种在HTML中声明模板的方式，并在组件中使用插槽来实现内容分发。
  2. Shadow DOM（影子DOM）：提供一种在组件内部创建独立的DOM树，与外部DOM树隔离开来，实现样式和内容的封装。
  3. Custom Elements（自定义元素）：提供一种在HTML中定义和注册新元素的方式，扩展HTML标准元素集。
  4. Decorators（装饰器）：提供一种在组件生命周期中添加额外功能的方式，如属性观察器、事件监听器和生命周期回调。

为什么选择Web Components

Web Components具有以下优点：

  • 可重用性：组件可以在不同的项目中重用，提高开发效率和一致性。
  • 可组合性：组件可以嵌套和组合，构建更加复杂的UI。
  • 可封装性：组件可以在内部实现细节上进行隔离，提高可维护性和可测试性。
  • 与现有Web技术的兼容性：Web Components基于Web标准，与HTML、CSS和JavaScript高度兼容。

第2章：基础知识

Web Components概述

Web Components是一系列不同的技术，允许你创建可重用的自定义元素，并且包含了自定义的样式和行为。这些自定义元素可以像标准HTML元素一样使用，并且可以在任何地方重用。Web
Components主要由以下三个技术组成：

  1. Custom Elements（自定义元素）：允许你定义新的HTML元素，这些元素可以包含自己的HTML结构、CSS样式和JavaScript行为。
  2. Shadow DOM（影子DOM）：提供了一种封装方式，使得自定义元素可以拥有自己的DOM树，与页面的其他部分隔离开来，防止样式冲突。
  3. HTML Templates（HTML模板）：提供了一种声明性的方式来定义HTML结构，可以在运行时插入到文档中。
  4. HTML Imports（HTML导入）：允许你导入HTML文档作为模块，虽然这个特性已经被废弃，但它的理念被其他模块化方案所继承。

HTML、CSS和JavaScript基础知识

在深入Web Components之前，你需要具备一定的HTML、CSS和JavaScript基础知识。以下是这些技术的简要概述：

  • HTML：超文本标记语言，用于创建网页的结构和内容。
  • CSS：层叠样式表，用于设置网页元素的样式，如颜色、字体和布局。
  • JavaScript：一种编程语言，用于实现网页的交互性和动态内容。

Shadow DOM和模板模式

Shadow DOM：

Shadow DOM是Web
Components的核心技术之一，它允许你将一个隐藏的、独立的DOM树附加到一个元素上。这个DOM树被称为“影子DOM”，它与主DOM树（即页面上的其他元素）是隔离的。这意味着影子DOM内的样式和行为不会影响到页面上的其他元素，反之亦然。这种隔离性使得Web
Components能够封装自己的样式和行为，而不必担心与其他元素的冲突。

模板模式：

模板模式是Web
Components中用于创建自定义元素的一种方式。它允许你定义一个HTML模板，这个模板包含了自定义元素的HTML结构。然后，你可以使用JavaScript来实例化这个模板，并将其附加到DOM中。模板模式通常与Shadow
DOM结合使用，以实现自定义元素的封装和样式隔离。

通过结合使用Shadow DOM和模板模式，你可以创建出功能强大、可重用的Web Components，这些组件可以在不同的项目中重复使用，并且能够保持自己的样式和行为。

第3章：基础组件开发

template元素和slot的使用

template元素在Web Components中扮演了重要角色，它允许你定义组件的结构和内容。template
标签内可以包含HTML结构，这些结构会被复制到每个组件实例中。slot
元素则用于定义组件内部可以接收内容的地方，外部可以将内容插入到这些slot中，实现了组件的可扩展性。标准中文电码查询 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)

例如：

<template>
  <div>
    <slot name="header">Default Header</slot>
    <p>Content goes here</p>
    <slot name="footer">Default Footer</slot>
  </div>
</template>

在这个例子中，header和footer是slot，外部可以传递自定义内容替换它们。

custom-element定义与注册

custom-element是Web Components的核心，用于创建自定义的HTML元素。定义一个custom-element通常需要以下步骤：

  1. 使用<custom-element>标签定义元素：

    <custom-element name="my-component"></custom-element>

  2. 实现connectedCallback和可能的其他生命周期方法，如disconnectedCallback、attributeChangedCallback等：

    class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // 在这里添加组件的初始化代码
  }

  // 其他生命周期方法...
}

customElements.define("my-component", MyComponent);

  3. 在connectedCallback中，将自定义元素的shadowRoot（暗影根）添加到模板中：

    connectedCallback() {
  this.shadowRoot.appendChild(this.templateContent);
}

// 假设templateContent是template元素的内容
const templateContent = document.querySelector('template');

style和link元素在组件中的应用

style元素用于定义组件的样式，通常放在<custom-element>标签内部，或作为<style>标签的外部链接（<link rel="stylesheet">
）。外部样式可以通过import导入到组件内部，这样可以保持样式和组件的封装。

<!-- 内部样式 -->
<style>
  /* ... */
</style>

<!-- 外部链接 -->
<link rel="stylesheet" href="styles.css">

在组件内部，可以使用this.shadowRoot来访问和操作样式。例如，添加样式到组件的暗影根：

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.shadowRoot.appendChild(this.styleElement);
  }

  // ...
  constructor() {
    super();
    this.styleElement = document.createElement('style');
    this.styleElement.textContent = `
      /* ... */
    `;
  }
}

这样，外部样式可以影响到组件的渲染，同时保持了组件的封装性。

第4章：原生组件与Web Components的对比

原生DOM元素的特性

原生DOM元素是HTML5中直接提供的，它们具有以下特性：

  1. 简单易用：直接操作DOM元素，API直观，易于学习和使用。
  2. 广泛支持：所有现代浏览器都内置了对DOM的支持。
  3. 性能：对于简单的操作，DOM操作通常很快，但复杂操作可能导致性能问题，特别是当涉及到大量元素时。
  4. 事件处理：DOM提供了丰富的事件模型，可以直接监听和响应元素的事件。
  5. 样式控制：可以直接通过style属性或者CSS类来控制元素的样式。

Web Components的优势和局限性

优势：

  • 封装性：Web Components提供了一种将HTML、CSS和JavaScript封装在一起的方式，提高了代码的复用性和维护性。
  • 组件化：组件可以独立于页面，可以被多个页面复用，减少了代码冗余。
  • 自定义元素：可以创建自定义的HTML元素，扩展HTML元素库。
  • 数据绑定：通过<template>和<slot>，可以实现数据驱动的组件结构。

局限性：

  • 学习曲线：Web Components的API和概念可能对初学者来说较难理解和掌握。
  • 浏览器支持：虽然大部分现代浏览器支持，但一些旧版本浏览器可能不支持，需要使用polyfills或polymer库来弥补。
  • 性能：对于复杂的组件，如果处理不当，可能会有性能问题，尤其是在处理大量数据时。
  • 工具链：虽然有工具如Web Components Workbox等来优化，但整体工具链相比React、Vue等库可能不够成熟。

兼容性问题与解决方案

  • 浏览器兼容性：使用@webcomponents/webcomponentsjs库或者polyfills（如custom-elements-es5-adapter
    ）来提供向后兼容性，确保在不支持Web Components的浏览器中运行。
  • polyfills：对于一些新特性（如Shadow DOM、HTML Templates等），可以使用polyfills来提供支持。
  • Babel和TypeScript：使用这些工具可以将新特性转换为旧版本浏览器可以理解的代码。
  • 测试：确保在各种浏览器和版本上进行充分的测试，确保组件的兼容性。

总的来说，Web Components提供了一种更现代、更模块化的开发方式，但开发者需要在兼容性、学习成本和工具成熟度之间权衡。

第5章：自定义元素API

自定义元素API：生命周期方法

在Web Components中，自定义元素有以下几个关键的生命周期方法：

  1. createdCallback: 当元素被创建（但可能尚未插入到文档中）时调用。这是初始化元素内部状态和处理数据的好时机。
class MyCustomElement extends HTMLElement {
  createdCallback() {
    // 初始化元素内部状态
  }
}
  1. attachedCallback: 当元素被插入到文档中时调用。这时可以绑定事件和处理DOM操作。
attachedCallback() {
  this.addEventListener('click', this.handleClick);
}
  1. detachedCallback: 当元素从文档中移除时调用，可以在这里清理资源。
  2. attributeChangedCallback: 当元素的属性被修改时调用，可以更新内部状态。
attributeChangedCallback(name, oldValue, newValue) {
  // 更新属性值
}
  1. connectedCallback: 在元素被连接到DOM树中（可能是通过<slot>插入）时调用。

属性绑定和事件处理

  • 属性绑定：可以使用<template>元素的<slot>和<slot-scope>来实现数据绑定，或者使用this.set方法来设置和监听属性。
this.set('myProperty', newValue);
  • 事件处理：通过addEventListener方法添加事件监听器，事件处理函数通常在this上下文中。
addEventListener('click', (event) => {
  // 处理点击事件
});

与外部数据交互

  • 数据绑定：可以使用<template>和<slot>来绑定外部数据，或者通过@property装饰器声明响应式属性。
@property({ type: String, reflect: true })
myData;
  • 事件通信：自定义元素可以通过customEvent来触发自定义事件，外部可以通过addEventListener监听这些事件。
this.dispatchEvent(new CustomEvent('myCustomEvent', { detail: data }));
  • 数据交互API：使用fetch、XMLHttpRequest或Web API（如localStorage、IndexedDB）来获取和存储数据。

第6章：高级组件设计

高阶组件（Higher-Order Components, HOCs）

高阶组件（HOCs）是React中用于重用组件逻辑的高级技术。HOC是一个函数，它接受一个组件并返回一个新的组件。HOC可以用来封装组件，使其更易于重用和测试。

示例代码：
import React from 'react';

// 定义一个HOC
function withSubscription(WrappedComponent, selectData) {
  // ...并返回一个新组件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ...那数据源...并订阅变化...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ...并将新的数据传递给被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  }
}

集成状态管理（如Redux或Vue.js）

状态管理库（如Redux）可以帮助管理大型应用程序的状态，使其更易于维护和测试。Redux是一个可预测的状态容器，用于JavaScript应用。

示例代码：
import { createStore } from 'redux';

// 创建一个reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text]);
    default:
      return state;
  }
}

// 创建store
let store = createStore(todos);

// 添加一个todo
store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
});

// 打印state
console.log(store.getState());

使用Shadow DOM实现封装和样式隔离

Shadow DOM提供了一种封装Web组件的方式，可以隔离样式和行为，防止与其他组件冲突。

示例代码：
class MyElement extends HTMLElement {
  constructor() {
    super();
    // 创建一个shadow root
    this.attachShadow({ mode: 'open' });
    // 添加一些内容
    this.shadowRoot.innerHTML = `<h1>Hello, World!</h1>`;
  }
}

// 定义custom element
customElements.define('my-element', MyElement);

通过以上方法，可以设计出更高级、更易于维护和测试的组件

第7章：复用与模块化

元素的rel="import"和模块导入

HTML Imports是HTML和JavaScript的一种模块格式，允许在HTML文档中导入外部资源。可以使用元素的rel="import"属性来导入模块。

示例代码：
<head>
  <link rel="import" href="my-module.html">
</head>
<body>
  <my-element></my-element>
</body>

Web Components库和框架（如Polymer、lit-element等）

Web Components是一种模块化的方法，用于构建可重用和可组合的UI组件。可以使用各种Web Components库和框架来简化开发过程。

示例代码：
// Polymer
import { PolymerElement, html } from '@polymer/polymer';

class MyElement extends PolymerElement {
  static get template() {
    return html`
      <div>Hello, World!</div>
    `;
  }
}

customElements.define('my-element', MyElement);

// lit-element
import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello, World!</div>
    `;
  }
}

customElements.define('my-element', MyElement);

Web Components的模块化最佳实践

为了确保Web Components的可重用性和可维护性，需要遵循一些最佳实践。

  1. 组件应该是可重用的：组件应该是独立的、可重用的，并且不应该依赖于特定的应用程序状态。
  2. 组件应该是可组合的：组件应该可以与其他组件组合在一起，以创建更大的组件。
  3. 组件应该是可测试的：组件应该是可测试的，可以通过单元测试和集成测试来验证其功能。
  4. 组件应该是可维护的：组件应该易于理解和维护，并且应该遵循一致的编码风格和架构。
  5. 组件应该是可访问的：组件应该遵循可访问性的最佳实践，以确保所有用户都可以使用它们。

通过遵循这些最佳实践，可以确保Web Components的可重用性和可维护性，并使得应用程序更加模块化和可扩展。

第8章：现代Web开发中的Web Components

Web Components与现代Web框架的集成

现代Web框架（如Angular、React、Vue）虽然各自有其独特的组件系统，但它们也支持与Web Components的集成，以利用Web
Components的可重用性和模块化优势。以下是一些集成方式：

  • Angular: Angular通过ng-content和@Input、@Output等特性，可以方便地使用Web Components。可以将Web
    Components作为Angular组件的一部分，或者在Angular应用中作为自定义元素使用。
  • React: React通过forwardRef和useRef等API，可以与自定义元素（Custom Elements）配合使用。通过React.forwardRef将Web
    Components包装成React组件，可以在React应用中直接使用。
  • Vue: Vue通过v-bind、v-on等指令，可以与自定义元素或使用Vue.extend创建的组件一起工作。Vue的Composition API也可以与Web
    Components无缝集成。

Web Components在服务端渲染（SSR）中的应用

服务端渲染（SSR）是现代Web开发中的一种策略，它允许在服务器端生成完整的HTML，然后发送到客户端，提高首屏加载速度。对于Web
Components，SSR需要特别处理，因为它们依赖于浏览器环境来创建和渲染。

  • 使用服务器端库：一些库（如@webcomponents/web-component-server）提供了服务端渲染Web
    Components的能力，它允许在服务器上创建虚拟DOM，然后在客户端上进行渲染。
  • 预渲染：在客户端首次渲染时，可以将组件的HTML结构和数据一起发送到客户端，然后在客户端通过JavaScript初始化这些组件。
  • 状态管理：确保在服务器端和客户端之间同步状态，因为Web Components可能依赖于组件内部的状态。

在SSR中使用Web Components时，需要考虑到浏览器环境和服务器环境的差异，确保组件可以在两种环境下正确工作。同时，由于Web
Components的模块化特性，它们通常更容易适应SSR的场景。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1828887.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

刷题记录（240613）

刷题记录（240613）

aliyun0512 1. 小红定义一个数组是好数组&#xff0c;当且仅当所有奇数出现了奇数次&#xff0c;所有偶数出现了偶数次。现在小红拿到了一个数组&#xff0c;她希望取一个该数组的非空子序列(可以不连续)&#xff0c;使得子序列是好数组。你能帮小红求出子序列的方案数吗?由于…
阅读更多...
手机照片免费数据恢复软件EasyRecovery2024免费版下载

手机照片免费数据恢复软件EasyRecovery2024免费版下载

大家好&#xff01;今天我要给大家推荐一款非常棒的软件——EasyRecovery。相信大家都知道&#xff0c;电脑中的重要文件一旦丢失&#xff0c;对我们的工作和学习都会产生很大的影响。 而EasyRecovery软件就是专门解决这个问题的利器&#xff01;它能够帮助我们快速、有效地恢…
阅读更多...
几种经典排序算法

几种经典排序算法

几种经典排序算法 插入排序折半插入排序法 选择排序冒泡排序希尔排序堆排序二路归并排序快速排序 在介绍排序之前&#xff0c;先来说说&#xff0c;研究不同的排序主要是要研究他们的哪些不同&#xff1a; 时间性能。即排序过程中元素之间的比较次数与元素移动次数。我们此次讨…
阅读更多...
【JavaEE进阶】——利用框架完成功能全面的图书管理系统

【JavaEE进阶】——利用框架完成功能全面的图书管理系统

目录 &#x1f6a9;项目所需要的技术栈 &#x1f6a9;项目准备工作 &#x1f388;环境准备 &#x1f388;数据库准备 &#x1f6a9;前后端交互分析 &#x1f388;登录 &#x1f4dd;前后端交互 &#x1f4dd;实现服务器代码 &#x1f4dd;测试前后端代码是否正确 &am…
阅读更多...
Caffe、PyTorch、Scikit-learn、Spark MLlib 和 TensorFlowOnSpark 概述

Caffe、PyTorch、Scikit-learn、Spark MLlib 和 TensorFlowOnSpark 概述

在 AI 框架方面，有几种工具可用于图像分类、视觉和语音等任务。有些很受欢迎，如 PyTorch 和 Caffe，而另一些则更受限制。以下是四种流行的 AI 工具的亮点。 Caffee Caffee是贾扬青在加州大学伯克利分校（UC Berkeley）时开发的深度学习框架。该工具可用于图像分类、语音和…
阅读更多...
Nativefier—使用—快速将网站打包成桌面程序

Nativefier—使用—快速将网站打包成桌面程序

--天蝎座 Nativefier简介 Nativefier是一个命令行工具&#xff0c;仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序&#xff0c;应用程序通过Electron打包成系统可执行文件&#xff08;如.app, .exe等&#xff09;&#xff0c;可以运行在Windows&#xff0c;Mac和L…
阅读更多...
需求：如何给文件添加水印

需求：如何给文件添加水印

今天给大家介绍一个简单易用的水印添加框架&#xff0c;框架抽象了各个文件类型的对于水印添加的方法。仅使用几行代码即可为不同类型的文件添加相同样式的水印。 如果你有给PDF、图片添加水印的需求&#xff0c;EasyWatermark是一个很好的选择&#xff0c;主要功能就是传入一…
阅读更多...
Mybatis工作流程和插件开发

Mybatis工作流程和插件开发

在了解插件开发之前&#xff0c;我们先总体的来梳理一下Mybatis的大致执行流程&#xff1a; 1.new SqlSessionFactoryBuilder().build(inputStream):先根据配置文件&#xff08;包含了全局配置文件和映射配置文件&#xff09;初始化一个对象Configuration&#xff08;这里对象里…
阅读更多...
LaTex入门教程

LaTex入门教程

目录 1.说明 2.页面的分区 3.入门介绍 &#xff08;1&#xff09;命令 &#xff08;2&#xff09;环境 &#xff08;3&#xff09;声明 &#xff08;4&#xff09;注释 4.代码结构 &#xff08;1&#xff09;导言区 &#xff08;2&#xff09;支持中文 &#xff08;3…
阅读更多...
2024都市解压爆笑喜剧《脑洞大开》6月28日上映

2024都市解压爆笑喜剧《脑洞大开》6月28日上映

随着暑期档的临近&#xff0c;电影市场迎来了一剂强心针——由何欢、王迅、克拉拉、卜钰、孙越、九孔等众多实力派笑星联袂主演的都市解压爆笑喜剧《脑洞大开》正式宣布定档&#xff0c;将于6月28日在全国各大影院欢乐上映&#xff0c;誓为观众带来今夏最畅快淋漓的笑声风暴。 …
阅读更多...
逆天改命 17岁中专女生横扫全球数学竞赛

逆天改命 17岁中专女生横扫全球数学竞赛

“逆天改命！17岁中专女生横扫全球数学竞赛，清华北大高手纷纷落马！” 最近全网被这则消息震惊了。 来！随便挑几个题目，让大家体验一下阿里巴巴全球数学竞赛的难度？ 数学是人工智能算法的基石。它为算法提供了逻辑框架和分析工具，使得人工智能能够处理复杂的数据和问…
阅读更多...
驾考模拟 | 电脑上使用浏览器模拟科目一考试

驾考模拟 | 电脑上使用浏览器模拟科目一考试

驾考模拟 背景 有个亲戚要考科目一&#xff0c;大叔之前没怎么用过电脑&#xff0c;想要在电脑上练习科目一&#xff0c;找找使用电脑考试的感觉。 有一些本地安装的软件可以满足这个需求&#xff0c;但通常要付费&#xff0c;没这个必要&#xff0c;毕竟只是用来模拟考的。 …
阅读更多...
【最新鸿蒙应用开发】——鸿蒙中的“Slot插槽”？@BuilderParam

【最新鸿蒙应用开发】——鸿蒙中的“Slot插槽”？@BuilderParam

构建函数-BuilderParam 传递 UI 1. 引言 BuilderParam 该装饰器用于声明任意UI描述的一个元素&#xff0c;类似slot占位符。 简而言之&#xff1a;就是自定义组件允许外部传递 UI Entry Component struct Index {build() {Column({ space: 15 }) {SonCom() {// 直接传递进来…
阅读更多...
《大数据分析》期末考试整理

《大数据分析》期末考试整理

一、单项选择题&#xff08;1*9&#xff09; 1.大数据发展历程&#xff1a;出现阶段、热门阶段和应用阶段 P2 2.大数据影响 P3 1&#xff09;大数据对科学活动的影响 2&#xff09;大数据对思维方式的影响 3&#xff09;大数据对社会发展的影响 4&#xff09;大数…
阅读更多...
昂科烧录器支持Prolific旺玖科技的电力监控芯片PL7413C1FIG

昂科烧录器支持Prolific旺玖科技的电力监控芯片PL7413C1FIG

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中Prolific旺玖科技的高度集成的电力监控芯片PL7413C1FIG已经被昂科的通用烧录平台AP8000所支持。 PL7413C1FIG是一款高度集成的电力监控芯片&#xff0c;用于测量电力使用情况的…
阅读更多...
vue-饼形图-详细

vue-饼形图-详细

显示效果 代码 <template> <div style"height: 350px;"> <div :class"className" :style"{height:height,width:width}"></div> </div> </template> <script> import * as echarts from echarts; req…
阅读更多...
Typora实现设置代码块默认语言_亲测有效（AutoHotKey方式和修改配置文件）

Typora实现设置代码块默认语言_亲测有效（AutoHotKey方式和修改配置文件）

Typora实现设置代码块默认语言&#xff08;AutoHotKey方式和修改配置文件&#xff09; 前言&#xff0c;需求使用AutoHotKey热键脚本【最简单方便】实现步骤建议 最终效果其他方法自定义Typora代码块快捷键设置。应对ctrlshiftk快捷键被其他占用的情况。 前言&#xff0c;需求 …
阅读更多...
07--Zabbix监控告警

07--Zabbix监控告警

前言&#xff1a;和普米一样运维必会的技能&#xff0c;这里总结一下&#xff0c;适用范围非常广泛&#xff0c;有图形化界面&#xff0c;能帮助运维极快确定问题所在&#xff0c;这里记录下概念和基础操作。 1、zabbix简介 Zabbix是一个基于 Web 界面的企业级开源解决方案&a…
阅读更多...
厂里资讯之自媒体文章自动审核

厂里资讯之自媒体文章自动审核

自媒体文章-自动审核 1)自媒体文章自动审核流程 1 自媒体端发布文章后&#xff0c;开始审核文章 2 审核的主要是审核文章的内容&#xff08;文本内容和图片&#xff09; 3 借助第三方提供的接口审核文本 4 借助第三方提供的接口审核图片&#xff0c;由于图片存储到minIO中&…
阅读更多...
高速信号——NRZ，PAM4调制技术

高速信号——NRZ，PAM4调制技术

1&#xff1a;码元 了解调制技术需要引出“码元”的概念。 一个码元就是一个脉冲信号&#xff0c;即一个最小信号周期内的信号&#xff0c;我们都能够理解&#xff0c;最简单的电路&#xff0c;以高电平代表1&#xff0c;低电平代表0&#xff0c;一个代表1或者0的信号&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023