六卿_社区达人页

2024年09月

• 09.25 23:02:51
  发表了文章 2024-09-25 23:02:51

  Twaver-HTML5基础学习(26)背景

  这篇文章介绍了如何在Twaver-HTML5中设置背景，包括栅格图片、颜色、颜色渐变、基本形状以及图片与形状结合的背景类型，并提供了代码示例。

  
• 09.25 23:00:35
  发表了文章 2024-09-25 23:00:35

  Twaver-HTML5基础学习(25)网元可视化视图组件(Network)

  这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构，包括view、rootCanvas和topCanvas的使用方法和示例。
• 09.25 15:33:59
  发表了文章 2024-09-25 15:33:59

  Twaver-HTML5基础学习(24)快速查找(QuickFinder)

  文章介绍了Twaver中的快速查找工具QuickFinder，用于根据属性值快速查找网络图中的元素，并提供了使用步骤和React代码示例。

  
• 09.25 12:00:38
  发表了文章 2024-09-25 12:00:38

  Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)

  本文介绍了Twaver HTML5中的页管理容器（TabBox）和选中模型（SelectionModel）。文章解释了如何使用TabBox来管理Tab页，并通过示例代码展示了SelectionModel的多种功能，包括追加选中元素、设置选中元素、选中所有元素、移除元素选中状态、清除所有选中状态等。此外，还介绍了如何监听选中状态的变化事件以及如何设置不同的选中模式，如多选、单选和不可选。

  
• 09.25 11:59:53
  发表了文章 2024-09-25 11:59:53

  Twaver-HTML5基础学习(22)层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)、属性管理容器(PropertyBox)

  本文介绍了Twaver HTML5中的多种管理容器：层管理容器（LayerBox）、告警管理容器（AlarmBox）、列管理容器（ColumnBox）和属性管理容器（PropertyBox）。文章解释了这些容器的作用、如何获取它们，并提供了一些基本的操作方法。这些容器分别用于管理图层、告警、表格列和属性对象，是TWaver中数据管理和组织的重要部分。
• 09.25 11:57:49
  发表了文章 2024-09-25 11:57:49

  Twaver-HTML5基础学习(21)网元管理容器(ElementBox)

  本文介绍了Twaver HTML5中的网元管理容器（ElementBox），包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化，并通过控制台输出相关的事件信息。

  
• 09.25 11:57:00
  发表了文章 2024-09-25 11:57:00

  Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)

  本文介绍了Twaver HTML5中数据的批量加载方法，通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能，以减少界面重绘次数并提升效率。

  
• 09.25 11:56:13
  发表了文章 2024-09-25 11:56:13

  Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json

  本文介绍了Twaver HTML5中的数据序列化，包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串，以及如何从这些字符串中反序列化数据，重建DataBox中的对象。此外，还提到了用户自定义属性的序列化注册方法。
• 09.25 11:55:33
  发表了文章 2024-09-25 11:55:33

  Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断

  本文介绍了Twaver HTML5中的数据容器（DataBox），包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象，如ElementBox、LayerBox、AlarmBox等，并通过示例代码展示了其常用方法的使用。

  
• 09.25 11:54:49
  发表了文章 2024-09-25 11:54:49

  Twaver-HTML5基础学习(17)子网(SubNetwork)

  本文介绍了Twaver HTML5中的子网（SubNetwork）概念，子网用于表示大型网络中的一小部分网络。文章通过示例代码展示了如何在React组件中创建子网，并添加网元到子网中。默认情况下，用户可以通过双击进入子网或返回上层子网。

  
• 09.25 11:54:04
  发表了文章 2024-09-25 11:54:04

  Twaver-HTML5基础学习(16)跟随者(Follower)

  本文介绍了Twaver HTML5中的跟随者（Follower）元素，它是一种可以依附于其他节点的元素，通常用于表示设备面板等组件。文章通过示例代码展示了如何创建跟随者并设置其宿主节点，以及如何通过方法判断跟随者是否依附在特定节点上。

  
• 09.25 11:53:18
  发表了文章 2024-09-25 11:53:18

  Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)

  本文介绍了Twaver HTML5中的形状连线（ShapeLink），包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型：直线（lineto）、正交（orthogonalto）、二次贝塞尔曲线（quadto）和三次贝塞尔曲线（cubicto），并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
• 09.25 11:52:33
  发表了文章 2024-09-25 11:52:33

  Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)

  本文介绍了Twaver HTML5中连线（Link）的不同类型，包括直线、延伸直线和正交直线，并通过示例代码展示了如何在React组件中设置Link的类型和样式。

  
• 09.25 11:51:34
  发表了文章 2024-09-25 11:51:34

  Twaver-HTML5基础学习(13)连线(Link)连线的绑定与展开

  本文介绍了Twaver HTML5中连线（Link）的绑定与展开功能，包括分组绑定、自环绑定、绑定与展开以及展开间隙等属性的设置。通过示例代码展示了如何在React组件中创建Link并设置其绑定属性，实现连线的分组管理。

  
• 09.25 11:50:45
  发表了文章 2024-09-25 11:50:45

  Twaver-HTML5基础学习(12)连线(Link)

  本文介绍了Twaver HTML5中的连线（Link）元素，包括设置起始和结束节点的方法，以及如何管理和操作多个连线。通过示例代码展示了如何在React组件中创建和管理Link，包括设置连线颜色和标签偏移量。

  
• 09.25 11:50:03
  发表了文章 2024-09-25 11:50:03

  Twaver-HTML5基础学习(11)形状节点(ShapeNode)

  本文介绍了Twaver HTML5中的形状节点（ShapeNode），它通过一系列点连接成形状来表示物体，支持直线和曲线绘制。文章通过示例代码展示了如何在React组件中创建ShapeNode并设置其形状和样式。

  
• 09.25 11:49:23
  发表了文章 2024-09-25 11:49:23

  Twaver-HTML5基础学习(10)嵌入Table

  本文介绍了如何在Twaver HTML5中嵌入表格（Table），并设置表格的列（Column）和样式。通过示例代码展示了如何在React组件中创建表格并添加数据，以及如何通过样式设置表格元素的颜色。

  
• 09.25 11:48:37
  发表了文章 2024-09-25 11:48:37

  Twaver-HTML5基础学习(9)HTML节点(HTMLNode)

  本文介绍了Twaver HTML5中的HTML节点（HTMLNode），这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点，以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素，以及如何自定义告警显示样式。

  
• 09.25 11:47:58
  发表了文章 2024-09-25 11:47:58

  Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)

  本文介绍了Twaver HTML5中的拓扑元素（Element），包括网元（Element）、节点（Node）和连线（Link）的基本概念和使用方法。文章详细解释了Element的属性和方法，并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。

  
• 09.25 11:47:13
  发表了文章 2024-09-25 11:47:13

  Twaver-HTML5基础学习(7)Layer图层元素

  本文介绍了Twaver HTML5中的图层元素（Layer），包括图层的属性和使用方法。文章详细解释了如何创建图层、设置图层属性（如可见性、可编辑性、可移动性和可旋转性），并通过示例代码展示了如何在React组件中使用图层。

  
• 09.25 11:46:26
  发表了文章 2024-09-25 11:46:26

  Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果

  本文介绍了在Twaver HTML5中如何为告警元素（Alarm）创建闪烁效果，以提醒用户注意。文章通过示例代码展示了如何通过定时器间隔性地改变告警标签的颜色，从而实现闪烁提示效果。

  
• 09.25 11:45:43
  发表了文章 2024-09-25 11:45:43

  Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)

  本文介绍了在Twaver HTML5中如何设置告警元素（Alarm）的位置，包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置，并解释了如何通过百分比来确定告警在Link网元上的位置。

  
• 09.25 11:45:05
  发表了文章 2024-09-25 11:45:05

  Twaver-HTML5基础学习(4)告警元素(Alarm)

  本文介绍了Twaver HTML5中的告警元素（Alarm），包括告警的属性、级别、状态以及如何使用告警。文章详细解释了Alarm类及其方法，并提供了示例代码展示如何在React组件中创建告警元素并与网元关联。

  
• 09.25 11:44:14
  发表了文章 2024-09-25 11:44:14

  Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group

  本文介绍了Twaver HTML5中Data类的其他功能函数，如获取和操作子网元的方法，以及组（Group）的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中，并通过toChildren函数获取满足特定条件的图元。

  
• 09.25 11:43:16
  发表了文章 2024-09-25 11:43:16

  Twaver-HTML5基础学习(2)基本数据元素(Data)

  本文介绍了Twaver HTML5中的基本数据元素，包括Data、Element、Alarm和Layer等，它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法，并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。

  
• 09.25 11:42:27
  发表了文章 2024-09-25 11:42:27

  Twaver-HTML5基础学习(1)两点一线

  本文介绍了Twaver HTML5的基本概念和使用方法，包括图元、容器和画布，并通过官方示例代码演示了如何创建节点和连线，以及如何在React组件中集成Twaver。

  
• 09.25 11:39:43
  发表了文章 2024-09-25 11:39:43

  React使用hooks遇到的坑_state中的某几个属性数据变成了空字符

  本文讨论了在React使用hooks时遇到的一个问题：state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值，解决了因数据更新不及时导致的问题。
• 09.25 11:38:47
  发表了文章 2024-09-25 11:38:47

  react字符串转为dom标签，类似于Vue中的v-html

  本文介绍了在React中将字符串转换为DOM标签的方法，类似于Vue中的`v-html`指令，通过使用`dangerouslySetInnerHTML`属性实现。

  
• 09.25 11:33:07
  发表了文章 2024-09-25 11:33:07

  React中使用worker线程

  本文介绍了在React项目中使用worker线程的方法，包括配置webpack以使用worker-loader，创建worker文件，并在组件中使用worker进行大量计算以避免阻塞主线程。

  
• 09.25 11:32:22
  发表了文章 2024-09-25 11:32:22

  java基础(13)String类

  本文介绍了Java中String类的多种操作方法，包括字符串拼接、获取长度、去除空格、替换、截取、分割、比较和查找字符等。

  
• 09.25 11:31:28
  发表了文章 2024-09-25 11:31:28

  Call to ‘super()‘ must be first statement in constructor body

  文章解释了在Java中子类构造函数中调用父类构造函数时，必须首先调用`super()`，且不能有返回值。

  
• 09.25 11:30:20
  发表了文章 2024-09-25 11:30:20

  java基础(12)抽象类以及抽象方法abstract以及ArrayList对象使用

  本文介绍了Java中抽象类和抽象方法的使用，以及ArrayList的基本操作，包括添加、获取、删除元素和判断列表是否为空。

  
• 09.25 11:28:43
  发表了文章 2024-09-25 11:28:43

  鼠标移动淡入淡出Canvas小球效果_TS版本

  使用TypeScript重新实现鼠标移动产生淡入淡出Canvas小球效果。涉及到TS的数据类型、泛型定义、函数与接口定义、类的实现及作为接口的使用，以及枚举类型。通过定义Ball类实现小球的属性和行为，使用事件监听鼠标移动并创建小球实例，然后使用requestAnimationFrame实现动画效果。

  
• 09.25 11:26:23
  发表了文章 2024-09-25 11:26:23

  async和await的错误处理

  在TypeScript中，`async`和`await`是处理异步操作的语法糖，能够让异步代码看起来像同步代码。`async`函数返回的总是`Promise`对象。当`await`后跟的表达式为`reject`状态的`Promise`时，会抛出错误，需要通过`try/catch`、链式`.catch()`或外部`Promise`包装来处理错误，防止代码崩溃。

  
• 09.25 11:10:15
  发表了文章 2024-09-25 11:10:15

  typeScript进阶(14)_泛型和注意事项

  TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类，支持传递类型参数，实现类型安全。泛型可以用于数组，约束类型参数必须符合特定的接口，也可以在接口和类中使用。泛型类可以包含多个类型参数，甚至在泛型约束中使用类型参数。

  
• 09.25 11:08:13
  发表了文章 2024-09-25 11:08:13

  typeScript进阶(13)_类与注意事项(八项特性)

  TypeScript的类支持特性包括：构造函数、继承（使用`extends`）、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器（getters/setters）、抽象类（用`abstract`声明）。类可用作类型。

  
• 09.25 11:05:17
  发表了文章 2024-09-25 11:05:17

  typeScript进阶(12)_枚举类型

  TypeScript中的枚举类型（Enum）允许值限定在一定范围内，枚举成员默认从0开始递增，也支持手动赋值及反向映射。枚举可以用于定义常量，提高代码可读性和维护性。枚举项可以是整数、浮点数或字符串，未手动赋值的项将按顺序递增。
• 09.25 10:51:41
  发表了文章 2024-09-25 10:51:41

  React_函数式Hooks和Class比较优缺点

  React Hooks与Class组件都能返回JSX并接收props，但Hooks无`this`指向问题，用`useEffect`模拟生命周期，`memo`优化性能，状态更新用`useState`；Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化，状态用`this.state`和`this.setState`管理。

  
• 09.25 10:48:57
  发表了文章 2024-09-25 10:48:57

  在一般编写代码时可以不写分号 ； 但是遇到中括号 小括号 模板字符串的时候必须在前面加一个分号，否则会报错

  JavaScript中通常可以省略分号，但在某些语法结构前必须加分号，如中括号、小括号或模板字符串前，以避免语法错误。
• 09.25 10:46:06
  发表了文章 2024-09-25 10:46:06

  Hooks中使用useReducer实现表单数据的提交，解决多次使用useState的问题

  在React Hooks中，使用`useReducer`可以解决表单数据提交时多次使用`useState`的问题。`useReducer`允许你将表单的多个状态整合到一个 reducer 函数中管理，简化状态更新逻辑。通过dispatch分派不同的action来更新state，适用于表单状态管理，特别是当表单元素较多时。
• 09.25 10:43:38
  发表了文章 2024-09-25 10:43:38

  Hooks使用useReducer、createContext 、useContext实现模块数据共享，类似全局状态管理但不推荐做全局管理

  使用React的`useReducer`和`createContext`钩子实现模块间的数据共享，类似于全局状态管理，但不推荐用作全局状态管理。`useReducer`适用于复杂的状态逻辑，而`createContext`和`useContext`则用于跨组件传递数据。
• 09.25 10:39:25
  发表了文章 2024-09-25 10:39:25

  Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能

  使用React Hooks实现connect功能，通过createStore创建仓库，Provider提供store，useSelector获取state，useDispatch触发action，从而在函数式组件中管理状态，替代类组件中的connect功能。

  
• 09.25 10:36:16
  发表了文章 2024-09-25 10:36:16

  ES6中map对象的使用，确实比Object好使哈

  ES6中Map对象的使用优势，包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等，支持forEach循环和for...of循环。

  
• 09.25 10:35:35
  发表了文章 2024-09-25 10:35:35

  hooks实现toDoList

  使用React Hooks实现ToDoList应用，包括添加和删除待办事项功能，通过useState管理状态，并对输入进行唯一性校验以避免姓名重复。
• 09.25 10:34:41
  发表了文章 2024-09-25 10:34:41

  前端base64转Blob，Blob转文件下载

  前端将base64字符串转换为Blob对象，再将Blob对象转换为文件并实现下载。包括处理数据URL和纯base64字符串的情况，并提供了一个辅助函数用于转换。
• 09.25 10:33:53
  发表了文章 2024-09-25 10:33:53

  判断对象是否含有改属性，三个方法

  JavaScript中判断对象是否包含属性的三种方法：1. 使用`'property' in object`检查自有属性和继承属性；2. 使用`object.hasOwnProperty('property')`仅检查自有属性；3. 使用`if (object.property)`判断，但返回属性值。

  
• 09.25 10:32:57
  发表了文章 2024-09-25 10:32:57

  hooks实现左添右减

  React Hooks实现左添右减组件，允许用户输入值并进行添加或删除操作，同时支持正则表达式校验和默认值设置，通过回调函数将数据传回父组件。

  
• 09.25 10:32:08
  发表了文章 2024-09-25 10:32:08

  antd table合并行或者列（动态添加合并行、列）

  在Ant Design的Table组件中实现行或列的合并，通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制，支持对特定字段进行行或列合并，包括多选框列的合并处理。

  
• 09.25 10:23:28
  发表了文章 2024-09-25 10:23:28

  this.props.history.listen路由监听与取消监听

  在React中使用`this.props.history.listen`进行路由变化监听，并在组件卸载时通过调用返回的函数取消监听，以避免不必要的回调执行或内存泄漏。
• 09.25 10:22:32
  发表了文章 2024-09-25 10:22:32

  transition第一次不生效

  解决CSS transition第一次不生效的问题，确保在动画属性变化前已经设置了初始值，如示例中需给`left`属性一个初始值以实现平滑过渡效果。