-
ECharts是成熟开源图表库，支持Canvas渲染、2D/3D、响应式与交互；推荐模块化引入，初始化需四步：准备容器、init实例、配置option、setOption渲染；支持动态更新、事件监听与resize响应。
-
不能。transition仅在起始和结束状态间插值，方向由transform的起始/结束值决定，如translateX(-100px)→translateX(0)为左进；需确保起始态明确且函数类型一致，否则动画失效。
-
应使用CSSfont-family属性指定字体族或@font-face引入外部字体，避免废弃标签和内联font；需提供通用字体兜底，注意中文字体引号、跨平台顺序及加载验证。
-
cubic-bezier()是CSS中通过四个参数定义缓动函数的标准方法，x1/x2∈[0,1]决定时间轴形态，y1/y2可越界实现过冲或回弹；x超界则整个函数失效，y过大易致跳动，需结合属性与设备实测调试。
-
ReactNative是用JavaScript构建原生移动应用的框架，通过桥接机制将JSX映射为iOS/Android原生组件，实现“写一次，两端运行”，适合中后台、内容型App，但不适用于高复杂度动画或图形计算场景。
-
Chart.js适合静态或低频图表，echarts/Plotly.js适合高频更新与深度交互；D3.js灵活但需手动实现细节；封装图表组件应避免过度抽象，推荐用hook管理生命周期。
-
HTML5本身不支持建模，所谓“HTML5建模”实为通过WebGL库（如Three.js）加载渲染3D模型；合并多个glTF模型应使用Group逻辑组合而非修改geometry；动画需共用AnimationMixer；性能敏感时慎用mergeGeometries；浏览器无法导出glTF，拼装应在建模工具或服务端完成。
-
HTML组件化是利用WebComponents标准创建可复用、封装性强的自定义元素，其核心在于customElements.define()API。1.定义类继承HTMLElement实现组件逻辑；2.使用customElements.define()注册自定义标签名（含连字符）；3.通过ShadowDOM实现样式与结构的隔离；4.利用插槽（slot）支持内容动态注入；5.通过属性和特性实现组件配置；6.使用自定义事件进行内外通信；7.支持继承现有元素或自定义元素以增强复用性。这些技巧相互配合，解决了传统
-
DOM操作重在安全高效可维护：优先用textContent防XSS与重排，getElementById因底层索引比querySelector快且稳妥，动态元素须用事件委托，批量修改应避免频繁重排重绘。
-
transition必须写在颜色要变化的元素本身，默认状态中声明，如.btn{color:blue;transition:color0.3sease;}，hover时仅改变颜色值；避免混用颜色格式、优先级冲突及all简写。
-
CSS优先级由选择器权重决定，权重越高样式越优先。权重分为四部分：内联样式、ID、类/属性/伪类、标签/伪元素，依次按位比较。例如#header.title权重为0,1,1,0，nava:hover为0,0,1,2，前者更高。当权重相等时，后写的规则覆盖前面的。!important可打破权重规则，但应慎用以避免维护难题。提升权重可用ID、多类组合、属性选择器或嵌套结构，如.container.sidebar.menu比单一类更特异。正确理解这些规则可减少冲突与!important依赖，写出更清晰的CSS。
-
background-color不生效最常见原因是颜色值格式错误、background复合属性覆盖、内联元素盒模型限制及父容器overflow裁剪。
-
CSS无法监听图片加载失败，但可通过属性选择器匹配src为空或缺失的img元素实现样式兜底，如img[src=""],img:not([src])；真实404等错误需JSonerror处理。
-
border-width必须带单位（0除外），border-style是边框渲染的开关，单边设置需包含width、style、color三值，border-radius过大或与border-width不匹配易致渲染异常。
-
本文介绍如何使用ESLint的no-shadow规则精准识别子作用域中对父作用域同名变量的遮蔽（shadowing），避免因变量名复用引发的可读性与维护性问题，并提供配置示例与注意事项。
