不务正业的猿

本文系统介绍了蚂蚁金服开发的微前端框架乾坤(qiankun)的核心知识点和面试要点。乾坤基于single-spa实现，通过沙箱隔离、样式隔离和全局状态管理等特性，解决大型前端应用的复杂性问题。文章详细解析了20个核心概念，包括微前端架构、沙箱机制、路由劫持原理等，并提供了常见面试题及解答策略。特别对比了乾坤与无界框架的区别，总结了面试评分标准，帮助开发者全面掌握这一主流微前端技术。

本文对比了三大图形库：jsPlumb、GoJS和Draw2D，分析其核心特性与适用场景。jsPlumb轻量易用，适合DOM元素快速连线；GoJS功能全面但需付费，适合复杂图表；Draw2D开源提供预定义节点，适合成本敏感项目。在性能方面，GoJS最优，jsPlumb处理大规模图较差。选择时需权衡功能需求、开发成本和学习曲线。文章还探讨了混合方案和迁移策略，建议根据具体项目需求组合使用不同库的优势。

本文介绍了JsPlumb单元测试的核心方法与实践要点： 测试策略：采用模拟环境验证API调用，而非直接测试渲染结果 关键技术： 使用JSDOM模拟DOM环境 通过getAllConnections()等API验证连接状态 使用spy/callback进行事件测试 示例演示：Jest测试连接创建的完整流程 调试技巧：提供常见问题解决方案和性能优化建议 开发辅助：日志记录、代码分离等实用技巧 全文聚焦如何有效测试JsPlumb的核心业务逻辑，规避直接DOM操作测试的复杂性，提供可落地的技术方案。

本文介绍了在可视化编辑器中实现撤销/重做功能的核心原理和实现方法。主要思路是维护操作栈记录用户操作（节点移动、连线创建/删除等），在撤销时执行相反操作，重做时重新应用操作。文章详细说明了操作记录结构、事件捕获机制，并提供了基础代码示例。同时讨论了常见面试问题（如端点恢复、状态快照）和性能优化建议（事务管理、使用第三方库）。该方案适用于需要交互式编辑的场景，通过操作栈管理实现状态回退和恢复，保证用户体验。

JsPlumb提供了灵活的样式定制方案，支持通过CSS类和JS参数控制连接器、端点、覆盖等组件的样式。开发者既可通过PaintStyle/EndpointStyle对象直接设置基础属性（颜色、线宽等），也能使用cssClass参数添加自定义CSS类实现主题化设计。系统默认提供_jsPlumb_connector等类名便于样式覆盖，还支持通过setHoverPaintStyle等方法设置交互状态样式。实际应用中可结合CSS3动画、媒体查询实现动态效果和响应式布局，并通过切换CSS类实现主题切换。这种双轨制（J

JsPlumb源码采用模块化架构，核心包括Anchor、Connector、Endpoint等组件类，通过jsPlumbInstance统一管理。其实现特点：1）支持SVG/VML双渲染引擎适配；2）提供静态/动态锚点定位算法；3）采用事件订阅机制处理交互动作；4）通过工厂模式组合各图形元素。源码中大量使用闭包实现灵活配置，面试时可重点分析connect方法实现流程，理解连接创建与绘制的完整过程。性能优化可关注浏览器适配层和事件系统的设计。

摘要： JsPlumb是构建流程图和网络拓扑可视化的前端工具，支持自定义节点和连接线。它提供Flowchart连接器实现直角折线，并可通过Label标记节点信息。拓扑图需结合D3等算法自动布局。代码示例展示了如何建立流程节点连接，使用CSS区分节点类型。面试问题解析涉及标签添加、自动布局实现和连线优化方案。高级应用包括分层结构、静态快照生成及与其他图形库集成，以提升性能和功能扩展。

摘要：针对JsPlumb在大规模节点连接场景下的性能优化，重点介绍了减少DOM操作的核心策略。通过setSuspendDrawing控制绘制时机，合并批量操作；简化连接样式降低渲染开销；利用requestAnimationFrame合并更新。示例代码展示了暂停绘制-批量添加-统一重绘的完整流程，可有效提升千级节点的渲染效率。同时提出虚拟化渲染、数据结构优化等进阶方案，为处理复杂拓扑图提供了系统性的性能优化思路。

jsPlumb支持创建多个独立实例来实现不同画布的隔离管理。通过getInstance()方法可为每个容器创建专属实例，各自维护连接、端点和配置，互不干扰。代码示例展示了如何为canvasA和canvasB分别创建instance1和instance2，实现不同区域的独立绘图。典型应用场景包括同时显示子流程和主流程的设计界面。使用时需注意：多个实例会加大页面负担，应合理管理实例生命周期，避免性能问题，必要时可手动清除DOM元素和解绑事件。

HTML5拖放与JsPlumb结合应用摘要 HTML5原生Drag&Drop API可与JsPlumb配合实现流程图编辑功能。核心实现包括：在dragstart事件中通过dataTransfer.setData传递节点信息，在画布容器监听drop事件获取数据并创建节点。关键点在于拖放后调用JsPlumb的draggable()和addEndpoint()方法初始化新节点。两者分工明确：HTML5 DnD处理外部元素拖入，JsPlumb管理画布内节点交互。典型应用场景包括从工具栏拖入节点、外部资源导入

在将JsPlumb集成到现代前端框架（如Vue和React）时，关键是在组件的生命周期内正确初始化和销毁JsPlumb实例。通常，在组件挂载完成后（如Vue的mounted或React的componentDidMount）进行初始化，并在组件销毁前（如Vue的beforeDestroy或React的componentWillUnmount）调用jsPlumb.reset()清理实例。由于JsPlumb操作的是原生DOM，需确保组件渲染完成后再执行相关代码。可以通过jsPlumb.getInstance创建独

状态持久化在可视化编辑器中是指将节点和连接的状态保存到外部存储（如服务器或本地），以便后续恢复。JsPlumb虽不直接提供持久化接口，但支持获取节点位置和连接信息，开发者需自行组织数据结构并序列化为JSON格式。通过遍历节点容器和调用jsPlumb.getAllConnections()，可以获取节点坐标和连接关系，并将其打包为结构化JSON。导入时，解析JSON并依次创建节点和连接，最后调用jsPlumb.repaintEverything()刷新视图。实际应用中，通常在用户保存时发送数据到后端，加载时恢

JsPlumb库在动态可视化编辑器中用于管理节点和连接线的增删操作。添加节点时，需创建DOM元素并调用JsPlumb的API使其可拖动、添加端点并建立连接。删除节点时，使用jsPlumb.remove方法移除节点及其所有连接，并手动清理DOM元素。连接线的增删可通过jsPlumb.connect和jsPlumb.detach等方法实现。此外，JsPlumb支持批量导入流程数据、动画效果、结构快照记录以及局部刷新等高级功能，以优化性能和用户体验。常见面试问题涉及节点删除后的后端同步、批量导入流程及删除所有连接

jsPlumb.makeSource 和 jsPlumb.makeTarget 是用于将普通DOM元素转换为可交互式连线源或目标的快捷API。它们通过自动创建隐形端点并监听鼠标事件，简化了连线交互逻辑。makeSource 将元素设为连线源，允许用户从特定区域拖出连接线；makeTarget 将元素设为连接目标，限制最大连接数或禁止自连。这些方法常用于实现拖放式连线功能，如图形编辑器中的节点连接。通过 options 参数，可以自定义端点样式、锚点、过滤器等。此外，unmakeSource 和 unmake

JsPlumb提供了一套丰富的事件机制，允许开发者在连接器和端点的生命周期中插入自定义逻辑。常见的事件类型包括连接创建、移除、移动、拖拽开始/停止以及端点点击等。这些事件可以绑定到全局的jsPlumb实例或特定的连接/端点对象上，事件触发时会传递包含上下文信息（如连接、源元素ID等）的对象，使回调函数能够获取必要的数据。开发者可以利用这些事件来验证连接的有效性、更新后台数据或实现撤销等功能。此外，JsPlumb还支持事件的解绑、阻止默认行为以及自定义事件的发射，提供了灵活的事件处理方式。在实际应用中，通过合

JsPlumb中的Overlay是用于在连接线或端点上显示辅助信息或图形的装饰元素。默认提供五种覆盖类型：Arrow（箭头）、Label（标签）、PlainArrow（无折叠的箭头）、Diamond（菱形）和自定义DOM元素。覆盖的位置可以通过比例或像素进行配置，并支持动态更新和样式定制。通过API，可以在连接或端点上添加多个覆盖，并控制其显示与隐藏。在实际应用中，覆盖常用于标记连线含义、指示方向或简化复杂界面。高级功能包括交互式覆盖、按需加载、统一样式类和动画效果，以提升用户体验和性能优化。

JsPlumb中的端点是连接线的可视端点，用于表示连接附着在元素上的图形标识。JsPlumb开源版提供了三种内置端点类型：点（Dot）、矩形（Rectangle）和图片（Image），每种端点都支持自定义CSS样式和交互反馈。通过API，开发者可以创建、操作和控制端点的样式，例如使用jsPlumb.connect或jsPlumb.addEndpoint来添加端点，并通过paintStyle和cssClass参数进行样式设置。端点还可以响应事件，如endpointClick和endpointDrag，用于捕获

JsPlumb提供四种默认连接器：Bezier曲线、直线、流程图和状态机，每种连接器都有其特定的应用场景和配置参数。Bezier曲线通过控制点绘制平滑曲线，直线适用于简单连线，流程图由水平和垂直折线段组成，状态机则用于简化视觉流程。通过jsPlumb.connect方法可以指定连接器类型和参数，如Bezier曲线的张弛度或流程图连接器的角半径。此外，可以通过jsPlumb.importDefaults配置全局默认连接器，或使用jsPlumb.registerConnectorType注册自定义连接器。在性能

JsPlumb提供了四种锚点类型：静态、动态、周边和连续，用于定义连接线在元素上的附着位置。静态锚点固定于元素的特定位置，如四角或中心；动态锚点由一组静态锚点组成，JsPlumb会根据元素间距离自动选择最佳位置；周边锚点沿元素边缘的几何形状分布，可自定义形状和点数；连续锚点则根据元素相对方向自动选择连接面。通过API，开发者可以灵活配置锚点，如使用数组自定义静态锚点位置或设置动态锚点列表。在实际应用中，合理配置锚点可以优化流程图的布局和连接美观性。此外，JsPlumb支持自定义锚点类，满足特殊需求，并通过调

JsPlumb是一个用于在网页中创建和管理元素间连线的JavaScript库。其核心功能包括通过端点（Endpoint）和锚点（Anchor）定义连接位置，以及通过jsPlumb.draggable方法使元素可拖动，从而自动更新连接线位置。主要API包括jsPlumb.connect用于创建连接，以及事件监听如connectionDrag和endpointClick，用于处理拖动和点击事件。代码示例展示了如何使两个节点可拖动并相互连接，使用流程图连接器和箭头覆盖层。常见面试问题涉及如何限制拖动、获取元素新位

JsPlumb是一个功能强大的JavaScript库，专为在网页中实现元素间的可视化连接而设计，广泛应用于流程图、拓扑图和工作流编辑等场景。它支持多种渲染技术（SVG、Canvas、VML），并自动适配浏览器能力。JsPlumb提供丰富的功能，包括元素拖拽、端点与连接管理、锚点定位和覆盖装饰等。其核心概念围绕连接（Connection）、端点（Endpoint）和连接器（Connector）展开，通过API可以动态创建、移除连接，并响应交互事件。JsPlumb分为开源免费版和商业版，免费版已能满足基础的连线

属性是一个强大的工具，适用于前端开发中的多种场景。合理利用它可以提升代码的可读性和可维护性，同时简化与 DOM 元素的交互。是 HTML5 自定义属性的一部分，用于在元素上嵌入自定义数据，而无需影响页面的语义和样式。key：自定义属性的名称，必须以字母开头，可以包含字母、数字、短横线（-）。value：属性的值，通常是字符串，但可以包含 JSON 格式的数据。：在 HTML 元素中存储数据，便于 JavaScript 操作。data-：固定前缀，表示这是一个自定义属性。为前缀，自定义的名称和值紧随其后。

全局变量的修改对其他页面立即生效，但如果其他页面已经加载，可能需要手动刷新以同步最新数据。在微信小程序开发中，管理和使用全局变量是一种常见的需求。例如，可以通过小程序的。对于复杂的项目，建议将全局状态管理抽离成单独模块（如使用。来实现全局变量的存储和共享。方法获取全局应用实例，从而访问或修改。中，可以将大数据存储到本地（如。或者封装自己的状态管理工具）。和globalData对象。函数，其中可以定义一个。对象，用于存储全局变量。不要将大量数据存储在。在页面中使用全局变量。

1. 问题: 什么是HTML语义化？语义化标签对网页结构和SEO有什么作用？回答: HTML语义化是指在编写页面时，使用具有明确含义的标签来表达内容结构，而不是乱用无语义的标签。语义化标签（如<header>, <nav>, <article>, <section>, <footer>等）能够让页面结构清晰，增强可读性和可访问性。这样的标签标明了内容的角色，例如导航、主要内容、侧栏等，使浏览器和搜索引擎更容易理解页面内容，从而提升SEO效果。良好的语义结构有助于搜索引擎爬虫确定页面主题和关键字权重，提升网

微信提供了一个插件市场，开发者可以在其中找到许多功能丰富、开箱即用的插件，涵盖了支付、地图、云开发、UI 组件等多个领域。在小程序的 app.json 配置文件中，通过 usingComponents 来引入外部插件组件，并在页面中使用。小程序对性能要求较高，使用第三方库时需要关注其对小程序性能的影响，尤其是一些大型库可能会增加小程序的启动时间。在集成第三方库时，要注意库的体积、性能以及与微信小程序的兼容性，合理使用可以有效提升开发效率。通常这种方式适用于较小的库，或者没有 npm 支持的第三方库。

小程序的启动速度受多方面的因素影响，包括网络请求、资源加载、页面渲染等。通过合理的优化手段，可以显著减少小程序的启动时间。小程序的每个页面都是独立的模块，可以将小程序拆分成多个页面和功能模块，按需加载。页面的代码只有在用户访问该页面时才会被加载，而不是在初次加载时全部加载。比如，先加载页面的骨架和基础内容，再加载图片和其他资源。对于一些页面元素（如列表中的大量数据、图片等），可以采用懒加载技术，只有当用户滚动到视口时才加载这些元素。通过删除无用的代码、合并和压缩文件，减少 JS 文件的体积，减少加载时间。

你可以存储数据时记录当前时间，在获取缓存时检查时间差，如果超过一定时间，则认为缓存过期，重新请求数据。定期检查缓存时间，并清除无效缓存，保持缓存数据的清洁。：通过 wx.setStorageSync() 和 wx.getStorageSync()，用于存储小数据。：通过 wx.setStorage() 和 wx.getStorage()，支持更大数据的存储。wx.setStorageSync() 和 wx.getStorageSync()wx.setStorage() 和 wx.getStorage()

微信小程序对授权功能进行了更新，wx.getUserInfo 接口在 2021 年以后不再自动弹出授权框，需要开发者使用 wx.authorize 进行授权请求，之后通过 wx.getUserProfile 获取用户信息。微信小程序为用户隐私和数据保护提供了严格的授权机制，用户在使用相关功能时需要明确授权，开发者需要通过相应的 API 来请求授权。在用户拒绝授权的情况下，开发者需要做出友好的提示，避免应用流程的中断。当用户授权后，开发者可以使用授权后的数据进行操作，如展示用户的头像、昵称、位置信息等。

后台会向微信支付发起统一下单请求，返回一个 prepay_id，然后小程序使用这个 prepay_id 发起支付请求。：从小程序向后台请求支付信息，后台生成 prepay_id 并返回，最后小程序调用 wx.requestPayment() 发起支付。支付过程需要通过服务器端调用微信支付的 API，因此需要搭建服务器并配置与微信支付交互的逻辑，生成 prepay_id 和签名等。通过微信小程序的支付功能，开发者可以实现丰富的支付场景，包括商品支付、服务支付等，为用户提供便捷的支付体验。

微信小程序的分享功能提供了灵活的分享方式，允许用户将小程序内容分享给朋友、微信群、朋友圈等。，允许用户将小程序的内容分享给朋友、微信群、朋友圈等，从而提升小程序的曝光率和用户互动。在分享时，你可以通过在 path 中传递参数，使得被分享的页面能够根据传递的参数来定制内容。微信小程序也支持分享到朋友圈，用户可以将小程序的内容分享到自己的朋友圈，以便更多的人看到和参与。与分享给朋友不同的是，朋友圈分享是公开的。可以通过统计用户分享的路径、分享的来源（微信群、朋友、朋友圈）等信息，优化分享策略。

审核通过后，你可以选择立即发布该版本的小程序，或者选择发布到指定的日期和时间。：点击“上传”按钮后，微信开发者工具会将代码上传到微信的服务器，上传成功后会显示上传成功的提示。在微信开发者工具中，开发者完成了小程序的代码编写后，需要上传代码到微信服务器进行审核和发布。发布后的小程序并不代表结束，开发者仍需不断更新和优化小程序，以便适应市场的变化和用户需求。：发布后，你可以继续通过微信公众平台管理小程序的版本、查看使用数据、进行功能更新等。：登录微信公众平台，选择你的小程序，在左侧菜单栏选择“版本管理”。

微信开发者工具支持各种调试功能，包括实时查看小程序的运行状态、调试代码、查看网络请求、模拟不同环境等。微信开发者工具提供了代码调试功能，开发者可以直接在工具中查看和修改代码，实时预览小程序的效果。微信开发者工具提供了性能分析工具，可以帮助开发者查看小程序的性能瓶颈，找到影响性能的因素。开发者工具可以查看小程序的本地存储和缓存，帮助开发者调试存储功能，查看和管理存储的数据。功能，帮助开发者查看小程序发起的网络请求，包括接口请求、图片加载、文件上传/下载等。

微信小程序提供了 wx.getStorage() 和 wx.setStorage() 方法，可以缓存请求数据，在需要时直接从缓存中读取，避免重复请求。在获取大量数据时，可以使用分页加载的方式，避免一次性加载所有数据，减少对服务器和用户端的压力。：例如，对于一组连续的操作，如果前一个操作和后一个操作依赖于相同的数据，可以考虑将这些操作合并为一个请求，避免重复请求。通过合理地优化网络请求，小程序可以更快加载，响应更及时，从而提供更好的用户体验。设置请求的超时时间，并在请求失败时进行重试，确保网络请求的稳定性。

wx.request() 通过提供一个配置对象来进行配置，配置对象中包括请求的 URL、请求方法、请求头、请求参数等。wx.request() 用于发送 HTTP 请求，可以进行 GET、POST、PUT、DELETE 等请求类型。wx.request() 的回调函数 success 用于处理成功的响应，fail 用于处理请求失败的情况。：请求的 HTTP 方法，常见的有 GET、POST、PUT、DELETE。通过 wx.request()，你也可以进行文件上传，通常用于上传图片、视频等文件。

wx.request() 通过提供一个配置对象来进行配置，配置对象中包括请求的 URL、请求方法、请求头、请求参数等。wx.request() 用于发送 HTTP 请求，可以进行 GET、POST、PUT、DELETE 等请求类型。wx.request() 的回调函数 success 用于处理成功的响应，fail 用于处理请求失败的情况。：请求的 HTTP 方法，常见的有 GET、POST、PUT、DELETE。通过 wx.request()，你也可以进行文件上传，通常用于上传图片、视频等文件。

WebP 是 Google 推出的图片格式，相比传统的 JPEG 和 PNG 格式，WebP 能提供更好的压缩效果，图片质量和文件大小方面更具优势。微信小程序支持 WebP 格式的图片，可以使用 WebP 格式替代 JPEG 或 PNG 格式，进一步减少图片的大小，提高加载速度。图片通常是小程序页面中的主要资源，合理的图片优化能显著提高小程序的性能，尤其是在用户网络状况较差的情况下。不同的图片格式有不同的特点，选择合适的格式能够有效减小图片的大小，同时保证图片质量。图片优化是提高微信小程序性能的重要手段。

是一种常用的性能优化技术，指的是将资源或内容的加载推迟到真正需要的时候，而不是在页面初始化时一次性加载所有内容。懒加载能够显著减少页面的加载时间，提升页面的响应速度，尤其在资源较多或者页面较复杂的应用中，效果尤为显著。通过分包，您可以将小程序的不同功能模块或页面拆分为多个包，只有当用户访问某个页面时，相关的代码和资源才会被加载。组件懒加载是在用户需要时才加载相应的组件。微信小程序支持通过 import() 动态加载模块，您可以在需要时加载某个组件的代码，而不是在小程序启动时就加载所有组件。

通过合理的页面拆分、分包、懒加载和动态组件加载等技术，能够有效地减少初次加载的代码量和资源占用，提升小程序的启动速度和用户体验。通过将小程序的功能分拆成多个小模块，用户在访问小程序时可以先加载必需的模块，而其他模块可以在后续需要时再加载。小程序中的每个页面都是一个独立的模块，可以将页面的代码拆分成独立的文件，只有在需要跳转到该页面时才会加载该页面的代码。：通过将小程序的不同功能分拆成独立的包，用户只有在访问相应页面时才会加载相关代码，减少了初次加载的代码量。用户访问某个分包中的页面时，相关代码才会被加载。

常见的事件类型包括点击事件（bindtap）、输入事件（bindinput）、选择事件（bindchange）、触摸事件（bindtouchstart 等）等。常见的事件包括点击事件、输入事件、触摸事件等。在这个例子中，点击子元素时，只有 childTap 会被触发，父元素的 parentTap 事件不会被触发，因为使用了 catchtap 来阻止事件冒泡。catch 与 bind 的区别：bind 事件会触发父元素的事件，而 catch 会阻止冒泡，仅触发当前元素的事件。通过 bindtap 来绑定。

双向数据绑定指的是视图的变化会影响数据，数据的变化同样会更新视图。点击按钮时，increment 方法会增加 count 的值，并通过 setData 更新数据，视图也会随之自动更新。当用户在输入框中输入内容时，bindinput 事件会触发，并更新 inputValue 的值，从而更新视图。当数据发生变化时，视图会自动更新。是微信小程序中视图和数据的桥梁，自动同步数据和视图的变化，减少手动操作 DOM 的复杂度。：数据与视图之间的双向同步，视图的变化可以反映到数据，数据的变化也可以更新视图。