前端UI组件【免费下载链接】golden-layoutA multi window layout manager for webapps项目地址https://gitcode.com/gh_mirrors/go/golden-layout点击查看免费下载Golden Layout本仓库即 golden-layout一个面向 Web 应用的多窗口布局管理器在 2.0 版本中从 JavaScript 整体移植到了 TypeScript并以此为契机对内部结构进行了大规模重构。本文以官方 Version 2 迁移说明 为骨架结合仓库源码config.ts、golden-layout.ts、layout-manager.ts 等逐项梳理 v11.5.9到 v2 的破坏性变更、弃用项与替代 API帮助已有应用开发者完成平滑迁移也帮助新使用者从一开始就采用正确的 v2 写法。从 1.5.9 到 2.0一次以可靠性为核心的 TypeScript 重写v2 相对 v11.5.9是一次实质性的大版本变更官方总结为两点代码移植到 TypeScript整个代码库以 TypeScript 重写并同步完成了大范围的代码清理维护重心转向可靠性v2 的维护工作将优先保证库本身的稳定与健壮。由于这次重构力度很大官方明确提示在从 v1 迁移之前务必先通读本节及以下各节的变更说明尤其是被移除的特性与弃用 API两部分避免在不知情的情况下依赖已失效的能力。被移除的特性Dropped Features作为移植的一部分代码库被显著重构一批在 v1 中实现不够健壮、无法达到 v2 可靠性要求的特性被正式移除被移除的特性说明与替代方案React 支持官方不再在 Golden Layout 内提供 React 组件支持并建议 React 开发者改用专为 React 组件设计的 FlexLayout 库嵌套 StackNested Stacksv1 虽可拼出嵌套 Stack 布局但实现并不完整由于修复成本过高官方决定直接移除该能力。v2 明确不允许嵌套 Stack内部/公开 API 混用所有类、接口、函数与属性都被标记为internal或public两种之一应用只能使用public元素详见下文Public and Internal APIs旧浏览器支持库现在只面向现代浏览器目标浏览器列表browserslist配置在 package.json 中最近 1 个版本的 Chrome / Firefox、最近 2 个版本的 Edge / Safari / iOS Safari以及 Firefox ESRjQuery 依赖Golden Layout 内部不再使用 jQuery很多人把这视为新增特性而非损失迁移到 v2 的总体原则v2 用 TypeScript 重写并伴随整体代码清理。API 方面官方尽量保留了向后兼容凡是为兼容而保留的函数与属性都被标记为deprecated并强烈建议应用迁移到新 API。需要注意弃用项相关的缺陷会被赋予低优先级甚至不修复且弃用的别名、方法与属性可能在后续版本中被移除。Config 与 Resolved Config双层配置体系v2 最核心的架构变化是配置系统被拆成两层并且全部强类型化Config配置应用开发者日常打交道的类型。支持可选属性未指定的属性会使用默认值同时负责向后兼容会把已弃用的旧属性自动迁移到新属性上。Golden Layout API 方法中的配置参数类型均为Config接口即LayoutConfig。唯一的例外是LayoutManager.saveLayout()它返回的是 Resolved ConfigResolved Config已解析配置Golden Layout 内部统一使用 Resolved Config。每当 API 函数收到一个 Config库内部会调用LayoutConfig.resolve()将其解析为 Resolved Config——该过程为所有未指定的可选属性填充默认值并处理向后兼容从而保证库始终在全量配置下工作。从源码看ResolvedLayoutConfig带有resolved: true标记字段LayoutConfig.isResolved()正是据此区分两类对象见 resolved-config.ts 与 config.ts。配置持久化的正确姿势保存总是保存LayoutManager.saveLayout()返回的Resolved Config加载先通过LayoutConfig.fromResolved()把保存的 Resolved Config 转回 Config再交给loadLayout()。ResolvedLayoutConfig还直接提供了两个配置压缩/解压函数minifyConfig()—— 递归地把配置的键与值替换为单字母代号替代旧LayoutManager.minifyConfig()unminifyConfig()—— 把压缩后的配置还原替代旧LayoutManager.unminifyConfig()。这两者内部都经由ConfigMinifier.translateObject()实现见 resolved-config.ts并且弹窗窗口的配置传输localStorage 中转也依赖该机制见 virtual-layout.ts。接口层级ItemConfig 与 LayoutConfigResolved Config 与 Config 各自拥有两套接口层级ItemConfig描述一个内容项content item的配置LayoutConfigv1 中名为Config的接口描述整个布局的配置。其中RowOrColumnItemConfig、StackItemConfig、ComponentItemConfig等均继承自ItemConfigRootItemConfig表示可以作为布局根的内容项类型row、column、stack、component四选一见 config.ts。ItemConfig.id类型收窄为stringItemConfig.id的可选属性类型从 v1 的string | string[]收窄为string。为向后兼容解析resolve时仍接受字符串数组类型的id以兼容旧的已保存配置。解析规则见HeaderedItemConfig.resolveIdAndMaximised()config.ts若id是数组先检查其中是否包含旧版最大化标记__glMaximised若存在则提取该标记作为maximised状态数组的第一个元素成为id的字符串值其余元素被丢弃。componentType取代componentNameComponentItemConfig.componentName已被ComponentItemConfig.componentType取代。componentType的类型为JsonValue即可被 JSON 序列化的任意值可以是字符串、数字、布尔等但如果该组件类型要通过以下任一函数注册componentType必须为string类型GoldenLayout.registerComponent()已弃用GoldenLayout.registerComponentConstructor()GoldenLayout.registerComponentFactoryFunction()。从源码看解析时若componentType未定义会回退读取旧的componentName见 config.ts而getComponentInstantiator()通过ResolvedComponentItemConfig.resolveComponentTypeName()把componentType解析为注册表可用的字符串名称非字符串的componentType将无法命中注册表见 golden-layout.ts。componentType是字符串时还会被用作组件标题的默认值ComponentItemConfig.componentTypeToTitle()。LayoutConfig.root必填属性LayoutConfig的root属性指定布局根内容项的ItemConfig它不是可选的必须始终指定类型为RootItemConfig | undefined其中undefined表示空布局见 config.ts。源码中的LayoutConfig.resolve()也保留了 v1 的兼容路径若root未指定而旧content数组存在则取content[0]作为根见 config.ts。selectionEnabled移除改用stackHeaderClickLayoutConfig的selectionEnabled属性已被移除。点击 Stack 标题栏的选中行为改为通过新的stackHeaderClick事件处理且该事件始终启用。更多被弃用的 Config 属性许多 Config 属性因为与其他属性重叠或迁移到了更合适的位置而被标记弃用官方建议直接查阅源码注释了解详情见 config.ts 中的deprecated标注如width/height→sizeminWidth/minHeight→minSizehasHeaders/showPopoutIcon/showCloseIcon/showMaximiseIcon→header下的show/popout/close/maximise等。其中值得注意的新尺寸语法ItemConfig.size格式为数字单位目前仅支持fr与%对 row 表示高度、对 column 表示宽度。分配算法为先按%比例分配空间若不足 100% 则由fr按比例补足若超过 100%则给fr项额外分配 50% 后再统一回缩到 100%ItemConfig.minSize格式为数字单位目前仅支持px。配置解析parseSize()会对非数字部分、未知单位、不支持的单位分别抛出ConfigurationError见 config.ts。创建LayoutConfig的完整可运行示例可直接参考仓库中的 apitest 演示程序。类层次GoldenLayout → VirtualLayout → LayoutManagerv2 中GoldenLayout成为独立类继承关系为LayoutManager抽象基类 └── VirtualLayout └── GoldenLayout应用应总是创建GoldenLayout或VirtualLayout的实例而不是直接实例化LayoutManager。GoldenLayout/VirtualLayout构造函数接收 3 个可选参数HTML 元素承载 Golden Layout 实例的 DOM 元素不指定时默认挂在body下setContainer()会把body的 height/margin/padding 重置为 0、overflow 设为 clip见 layout-manager.tsbindComponentEvent事件处理器用于以事件方式绑定组件v2 新增绑定方式unbindComponentEvent事件处理器。重要变更初始布局不再传入构造函数而是在构造后通过LayoutManager.loadLayout()加载。旧式的new GoldenLayout(config)构造签名仍在但已被标记deprecated见 golden-layout.ts 的兼容重载。组件注册 API 的调整v2 把组件注册职责收拢到GoldenLayout类中LayoutManager不再包含任何组件注册函数。注册函数的具体变化registerComponentConstructor()新函数行为与旧registerComponent()相同但仅用于注册组件构造函数registerComponentFactoryFunction()新函数行为与旧LayoutManager.registerComponent()相同但仅用于注册创建组件的回调函数闭包不要使用registerComponent()改用上述两个新函数之一。registerComponent()目前仍会按是否有prototype属性自动分派到构造函数或工厂函数注册但已被标记弃用见 golden-layout.ts。另外还有registerComponentFunction()已弃用与registerGetComponentConstructorCallback()后者注册一个按配置返回组件构造函数的回调仅在组件类型未注册时兜底调用见 golden-layout.ts。LayoutManager 的方法迁移清单LayoutManager是EventEmitter的抽象子类v2 对其公开方法做了系统性调整核心对照如下v1 用法v2 用法说明new GoldenLayout(config, container)new GoldenLayout(container)loadLayout(config)构造后通过loadLayout()加载布局loadLayout()可随时再次调用以整体替换当前布局见 layout-manager.ts手动调用init()不要手动调用只要不在构造函数传入旧式 LayoutConfiginit()会被内部自动调用toConfig()saveLayout()saveLayout()返回当前布局的Resolved Config见 layout-manager.tsminifyConfig()/unminifyConfig()ResolvedLayoutConfig.minifyConfig()/unminifyConfig()迁移到 Resolved Config 上updateSize()setSize(width, height)以像素设置 Golden Layout 实例尺寸见 layout-manager.tsroot属性rootItem新属性rootItem是布局的根内容项Ground 内容项的唯一子级root已被内部属性groundItem取代且groundItem仅限内部使用组件焦点Focus相关新 APIfocusComponent(item, suppressEvent?)聚焦指定组件项。任意时刻只有一个组件项持有焦点若此前有其他组件项聚焦它会自动失焦blur。焦点变化时会触发对应的focus/blur事件除非suppressEvent参数为trueclearComponentFocus(suppressEvent?)移除现有组件项焦点若焦点被移除会触发blur事件除非suppressEvent为true。底层由LayoutManager.setFocusedComponentItem()实现切换焦点时会先对旧焦点项调用setBlurred()再对新项调用setFocused()并同步更新父级ComponentParentableItem的聚焦态见 layout-manager.ts。VirtualLayout 与组件绑定VirtualLayout实现了除组件注册函数以外的全部 Golden Layout 功能若应用只打算通过bindComponentEvent使用虚拟组件可直接创建VirtualLayout实例而非GoldenLayout。相关事件变更getComponentEvent仍在VirtualLayout中实现但已弃用改用VirtualLayout.bindComponentEventreleaseComponentEvent已弃用改用VirtualLayout.unbindComponentEvent。关于 v2 引入的四种组件绑定方式Embedding via Registration / Embedding via Events / Virtual via Registration / Virtual via Events的完整说明、事件签名与代码示例见 绑定组件Binding Components文档。Content Items命名与行为变化v2 对内容项体系做了大量重命名与语义调整v1 名称v2 名称说明AbstractContentItemContentItem内容项基类ItemContainerComponentContainer组件容器ComponentComponentItem布局内的组件项Component 一词现在专指被 Golden Layout 承载的外部组件RootGroundItem已标记为 internal应用永远不应访问 GroundItem布局的根 ContentItem 是 GroundItem 的唯一子级可通过LayoutManager.rootItem访问Stack.getActiveContentItem()/setActiveContentItem()Stack.getActiveComponentItem()/setActiveComponentItem()语义不变仅更名其余行为调整config属性已移除改用toConfig()方法这也是原版 Golden Layout 文档一直推荐的写法此前config中的部分属性如id、type现在作为ContentItem或其子类的属性直接可用id类型为string不再支持string | string[]ContentItem.select()/deselect()已移除改用新的ComponentItem.focus()与ComponentItem.blur()ComponentItem.focus()新函数聚焦指定组件项同时移除先前其他组件项的焦点任意时刻只有一个组件项有焦点若布局焦点发生变化会触发focus事件除非suppressEvent为trueComponentItem.blur()新函数移除指定组件项的焦点调用后布局内将没有任何组件项持有焦点若组件失去焦点会触发blur事件除非suppressEvent为true。一个值得注意的实现细节createContentItem()会自动为不在 Stack 内的 Component 配置包一层 Stack除非它是弹窗窗口的顶层项因此即使配置中直接写了component根项最终也会以 Stack 容纳见 layout-manager.ts。ComponentContainer 的新能力ComponentContainer旧ItemContainer在 v2 中新增了多项能力element新属性替代getElement()返回承载组件的 HTMLElementgetElement()已弃用initialState新 getter获取创建该组件所用ComponentItemConfig的componentStatestateRequestEvent新事件一旦设置每当 Golden Layout 需要组件的最新状态时就会触发该事件。调用LayoutManager.saveLayout()会触发它若已定义若未定义则保存 ItemConfig 中的初始状态或最近一次setState()设置的状态beforeComponentRelease新 EventEmitter 事件组件被释放前在容器上触发组件可借此释放资源setState()已标记弃用如已迁移到新的stateRequestEvent应优先使用该事件只有仍在使用弃用的setState()时才继续用getState()replaceComponent()可在不影响布局其他部分的情况下替换容器内的组件内部会先释放旧组件、用新 ItemConfig 重新绑定见 component-container.ts。此外虚拟组件绑定还依赖容器的virtualRectingRequiredEvent、virtualVisibilityChangeRequiredEvent、virtualZIndexChangeRequiredEvent等事件与virtual属性用于区分虚拟/嵌入绑定方式详见 component-container.ts 与 绑定组件文档。Header 与 Tab属性与函数重命名header.ts 与 tab.ts 中有多个属性与函数被重命名官方建议直接在这两个文件中搜索deprecated标注来获取完整的改名对照清单。事件系统升级v2 的事件系统整体升级所有 DOM 事件现在都会向上传播从而可被父级或全局处理任何事件监听器都不再调用preventDefault()冒泡事件现在携带EventEmitter.BubblingEvent参数或其子类发出。新增的 EventEmitter 事件事件类型触发时机beforeComponentRelease—组件被释放前stackHeaderClickBubbling点击 Stack 标题栏但非 Tab时stackHeaderTouchStartBubbling触摸 Stack 标题栏但非 Tab时focusBubbling组件获得焦点时blurBubbling组件失去焦点时其它行为变化undefined取代null新属性、新事件等一律使用undefined而非null部分内部实现也从null切换到undefined。旧属性大多保持null不变但要注意部分内部改动可能已波及外部属性/事件/方法的取值迁移测试时建议覆盖此类边界。Deprecations弃用项的处理策略大部分变更都保留了旧函数与旧属性但统一标记为deprecated。官方立场明确强烈建议应用重构以摆脱弃用项与弃用项相关的缺陷会被赋予低优先级或完全不修复弃用的别名、方法、属性可能在未来的版本中被移除。因此迁移不应停留在能跑就行而应把消灭弃用告警作为正式目标。Public 与 Internal API 边界v2 中所有 API 元素类、接口、函数等都被标注为public或internal应用只能使用publicAPI 元素internal元素随时可能变化变更时不做任何向后兼容承诺。库分发包含两份 TypeScript 声明.d.ts文件index.d.ts只包含 public API 元素。应用应使用这份声明文件访问库golden-layout-untrimmed.d.ts包含全部public internalAPI 元素。若确需访问库内任意元素可使用它但请充分知悉上述风险。官方同时说明public/internal 的划分尚未最终定型但任何在apitest演示程序或 Angular 示例应用中使用过的元素都会保持为 public——这为迁移者提供了一个安全区判断依据。迁移检查清单综合全文从 v1 迁移到 v2 时建议按以下顺序核对确认不依赖已移除特性React 支持、嵌套 Stack、jQuery、旧浏览器构造函数改为new GoldenLayout(container)布局通过loadLayout()加载将registerComponent()改为registerComponentConstructor()/registerComponentFactoryFunction()把toConfig()→saveLayout()、updateSize()→setSize()、root→rootItem、minifyConfig()/unminifyConfig()→ResolvedLayoutConfig上同名方法配置中把componentName改为componentTypewidth/height/minWidth/minHeight改为size/minSize确认root已指定、id为string持久化保存saveLayout()返回的 Resolved Config加载前用LayoutConfig.fromResolved()转换用ComponentItem.focus()/blur()替代select()/deselect()用Stack.getActiveComponentItem()替代旧命名把getElement()改为element属性评估是否迁移到stateRequestEvent与beforeComponentRelease组件绑定优先采用bindComponentEvent/unbindComponentEvent见 绑定组件文档并处理stackHeaderClick等新事件全程只使用 public API以index.d.ts为准消灭所有deprecated告警。仓库中的 apitest 演示程序与 规格测试如 drag-tests.ts、ground-item-tests.ts是观察 v2 新 API 实际用法的最佳样例迁移过程中可随时对照查阅。赞分享前端UI组件【免费下载链接】golden-layoutA multi window layout manager for webapps项目地址https://gitcode.com/gh_mirrors/go/golden-layout点击查看免费下载相关推荐Golden Layout 2.0 版本深度解析与迁移指南Golden Layout 2.0 版本深度解析与迁移指南 前言 Golden Layout 是一个功能强大的Web布局管理器允许开发者创建复杂的多面板界面。前端UI组件ThingsBoard升级兼容性指南API变更与数据迁移完整策略ThingsBoard升级兼容性指南API变更与数据迁移完整策略 ThingsBoard作为开源IoT平台提供设备管理、数据收集、处理和可视化功能。随着版本物联网后端数据可视化消息队列Tensorpack与TensorFlow 2.0兼容指南平滑迁移策略Tensorpack与TensorFlow 2.0兼容指南平滑迁移策略 Tensorpack作为基于TensorFlow的高效神经网络训练接口在Tensor深度学习人工智能上一篇从8位到32位如何用STM32F103VET6打造高性能CNC控制器下一篇comprehensive-rust 泛型精讲Trait Bounds特质约束从语法到编译原理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考