-
Matter.js是一个轻量级2D物理引擎，适用于网页中的物理模拟。它由Engine、World、Bodies、Runner和Render模块组成，支持重力、碰撞、刚体运动等效果。通过与Canvas或SVG结合，可实现流畅的交互动画。示例中创建了下落方块场景，包含地面和可动物体，展示基础物理行为。实际应用于互动广告、数据可视化、教育工具和创意设计。结合事件可实现拖拽、施力等交互。优化建议包括减少活动物体、合理设置物理参数、关闭调试视图、及时清理对象。Matter.js上手简单，文档清晰，适合构建生动的前端
-
JavaScript通过监听用户操作、动态修改DOM、控制样式动画及异步通信，实现无需刷新的响应式交互。例如用addEventListener处理点击/输入/滚动，innerHTML更新内容，classList切换样式，fetch获取数据，localStorage持久化偏好，确保操作有反馈、变化可预期。
-
JavaScript函数是组织逻辑、避免重复、控制执行流的最小可靠单元，具参数输入、内部处理、结果返回及作用域隔离特性；function声明与箭头函数在this、arguments及new调用上存在关键差异；可复用函数需满足只做一件事、参数明确可控、输入输出清晰三大约束，并规避闭包污染、数据篡改、环境依赖等陷阱。
-
本文详解为何在保存Submission模型时意外触发Form模型的字段验证错误（如title、description必填），并指出根本原因在于误将关联文档的验证逻辑“透传”至被引用模型——关键在于理解Mongoose的ref关系不等于嵌套文档，以及如何正确构造引用而非触发目标模型的完整实例化。
-
JavaScript中常见设计模式有单例、工厂、观察者、发布-订阅、代理、装饰器、策略和适配器模式；其中单例模式因“全局唯一实例”语义，广泛用于配置管理、日志器等场景，可用闭包或class+静态属性实现，但需注意多iframe、SSR及测试时的状态隔离问题。
-
属性选择器可精准选中带特定属性的HTML元素，无需依赖类名或ID。1.基础用法：[title]选所有含title属性的元素；2.精确匹配：a[href="https://example.com"]仅选指定链接；3.部分匹配：[href*="example"]匹配包含"example"的href；4.多属性组合：inputtype="text"同时满足两个属性。
-
section标签必须自带h1–h6标题，表示有主题的独立章节，否则语义失效；它不可替代div做布局，子section须为父主题下的逻辑子章节；与article、div、nav的核心区别在于是否构成依赖上下文的文档大纲节。
-
Proxy是JavaScript的元编程工具，用于拦截并自定义对象基本操作，如get、set、has、apply等，未定义的handler方法走默认行为；它不自动响应式，需手动触发更新，且不能代理原始值。
-
容器与子元素背景重叠导致视觉混乱是因CSS默认简单覆盖，需用background-blend-mode控制混合；它作用于单元素多背景间，可通过伪元素间接调控父子背景混合，常用值如overlay、multiply等。
-
通过CSS的transition和transform属性实现按钮点击时的平滑缩放与颜色变化，.smooth-btn设置背景色、圆角及过渡效果，:active状态触发scale(0.95)缩小和深色背景，结合box-shadow增强质感，动画自然且不干扰布局，提升交互体验。
-
JavaScript国际化（i18n）核心是用Intl对象统一处理本地化需求，包括Intl.DateTimeFormat格式化日期、Intl.NumberFormat处理数字货币，需动态获取locale并避免硬编码和toLocaleString()。
-
不写<metacharset="utf-8">会导致中文乱码、表单提交乱码、JS字符串处理异常、CSS中文解析失败；该标签须置于<head>最前，且HTML文件本身必须为UTF-8编码（无BOM），否则无效。
-
直接用background-image写Base64数据URL时，需严格遵循data:<mimetype>;base64,<encoded-string>格式，确保MIME类型准确、base64,后无空格、url()内用单引号包裹；仅适用于小图标，大图应走独立文件。
-
实现网页拼图游戏需五种方法：一、CSSGrid均分布局配background-position偏移；二、绝对定位精确控制每块坐标；三、Flexbox用order属性动态排序；四、Canvas像素级截取渲染；五、clip-path裁剪加transform微调。
-
微前端通过ModuleFederation实现应用拆分与模块共享，提升开发部署效率。1.按业务、团队或权限拆分子应用，实现独立开发与技术栈自治；2.Webpack5的ModuleFederation支持Host加载Remote暴露的模块，运行时动态引入组件；3.配置shared依赖避免重复加载，设置singleton、eager和version确保版本一致与性能优化；4.子应用间通过事件、URL参数、全局状态或props通信，推荐松耦合机制；5.实践需关注隔离、降级与监控，保障系统稳定性。
