-
本文介绍如何将React组件打包为独立可嵌入的JS库，并通过全局API（如window.MyClient.boot()）在任意网页DOM节点中安全、高效地挂载组件，适用于客服按钮、埋点工具、浮动面板等场景。
-
fetch调用免费汇率API总返回CORS错误，是因为服务端未配置Access-Control-Allow-Origin，需通过后端代理或改用支持CORS的CDN源（如currency-api）解决。
-
小屏幕Flex布局溢出应组合使用flex-wrap:wrap（允许多行）与overflow-x:auto（支持滚动），按需选择：可换行则用wrap，禁换行则用nowrap+横向滚动，并通过媒体查询响应式切换，注意宽度设置、子项收缩性及iOS兼容性。
-
面包屑导航必须用<navaria-label="Breadcrumb">包裹，内部用<ul>或<ol>结构，当前页用aria-current="page"标识，分隔符通过CSS实现，图标需配visually-hidden文本确保可访问性。
-
组合式API弹窗服务核心是解耦状态与UI、脱离模板依赖、支持跨组件调用，通过定义open/close/register接口、创建全局状态管理器、实现通用ModalContainer容器及可复用弹窗组件，使弹窗成为可注入、可编程的服务。
-
padding-top百分比技巧通过父容器宽度计算内边距来实现等比例缩放，需配合relative/absolute定位，兼容IE8+，但依赖父宽明确且不缩放内容本身。
-
<p>在JavaScript中对数组进行精确排序的核心方法是使用Array.prototype.sort()并传入自定义比较函数。1.对于数字排序，必须提供比较函数(a,b)=>a-b实现升序，或(b-a)实现降序，否则默认按字符串Unicode码点排序会导致9排在10之后等错误结果。2.对复杂对象排序时，比较函数应根据对象属性（如age或name）进行逻辑判断，支持多级排序：先按主要字段比较，相等时再按次要字段，例如先按age升序再按name字母顺序排列。3.字符串排序推荐使用loca
-
直接在浏览器中打开HTML5文件最简单，双击即可用默认浏览器查看，适合静态页面测试；通过浏览器菜单打开可方便进行多浏览器兼容性测试；若涉及JavaScript异步加载或API请求，推荐使用本地服务器运行，如VSCode的LiveServer插件、Node.js的http-server或Python的http.server模块，能避免跨域和路径问题，更贴近真实线上环境。
-
使用状态机管理UI组件生命周期可提升可维护性。通过定义明确的状态（如空闲、上传中）与事件（如开始、暂停），利用状态转移表控制状态切换，结合UI框架监听状态变化更新视图，并在状态变更时处理异步操作与副作用，实现逻辑与视图分离，降低复杂度。
-
固定侧边栏需设flex-shrink:0（如flex:00240px），主内容区用flex:1并加min-width:0防溢出，小屏可通过改sidebarflex-basis为0隐藏。
-
必须显式设置appearance:none（含-webkit-appearance:none和-moz-appearance:none）才能真正清空默认样式；之后需手动补全border、padding、background，并用inline-flex实现文字垂直居中，同时组合:active和:focus-visible控制点击阴影，避免Safari闪烁需加transform:translateZ(0)。
-
background-repeat从IE8起无需任何前缀；IE8仅支持repeat、no-repeat、repeat-x、repeat-y，space/round等值需IE9+；Autoprefixer不加前缀但会过滤不支持的值。
-
多级组件联动应避免链式$emit，优先采用provide/inject、事件总线（mitt）或Pinia状态管理；基础组件可合理使用语义化$emit，业务逻辑事件应在页面层组合。
-
本文介绍在CI环境（如AzurePipelines）中避免端口冲突的实践方案：通过Playwright配置动态选取空闲端口启动devserver，无需修改Webpack配置，兼顾本地调试与持续集成稳定性。
-
border-width默认增加元素总宽度，如width:200px加border:10px后实际宽220px；box-sizing:border-box可将其纳入width计算，但不改变渲染厚度且对table、动画等有局限。
