Webpack是现代JS应用的模块打包工具，能将各类资源作为模块打包。其核心概念包括入口、输出、加载器、插件和模式。通过配置entry、output、module.rules、plugins等选项，可实现资源处理与优化。常用loader如babel-loader、css-loader、url-loader用于解析不同文件，plugin如HtmlWebpackPlugin、CleanWebpackPlugin、MiniCssExtractPlugin用于生成HTML、清空目录、提取CSS。建议区分开发与生产

JavaScript中遍历对象属性和值的主要方法有四种：1.使用Object.keys()获取自身可枚举属性名数组，结合forEach或for...of遍历；2.使用Object.values()获取自身可枚举属性值数组，适用于仅需处理值的场景；3.使用Object.entries()获取键值对数组，可结合解构赋值同时处理键和值，是现代开发中最推荐的方式；4.for...in循环虽能遍历可枚举属性（含继承属性），但需配合hasOwnProperty()过滤以确保只处理自身属性，否则易引入意外行为。最佳实践

JavaScript的try...catch用于捕获同步运行时错误，防止脚本崩溃；支持catch捕获Error对象并推荐用message属性，finally确保清理代码执行；但无法捕获异步错误，需在回调或Promise中单独处理。

querySelector和querySelectorAll支持完整CSS选择器语法，前者返回首个匹配元素（无匹配时为null），后者返回静态NodeList；需转数组才能用map/forEach；不支持伪元素，仅支持伪类；作用域限于调用对象，不解析未挂载的HTML字符串。

HTML5原生<video>标签可跨设备播放视频，需设置width/height、controls属性，嵌套多个<source>提供MP4/WebM/Ogg格式，添加muted+autoplay实现静音自动播放，并通过CSS和JavaScript实现响应式与自定义控制。

JavaScript是让网页具备交互性、动态性和智能化的核心技术，支持事件响应、DOM操作、数据处理、异步请求及框架开发，显著提升用户体验与开发效率。

使用Flexbox可解决响应式导航栏中图标与文字的对齐问题。通过设置display:flex、align-items:center和justify-content，确保不同屏幕尺寸下布局一致；结合媒体查询调整断点样式，统一图标尺寸并利用gap控制间距，实现视觉整齐与良好用户体验。

HTML5更新需覆盖文件并穿透多层缓存。关键步骤：禁用HTML强缓存（设Cache-Control:no-cache），资源文件用哈希命名+长缓存，HTML最后上传，验证响应头、状态码及资源URL，同时清理CDN、更新preload/prefetch标签、触发ServiceWorker跳过等待。

Canvas绘图完全依赖JavaScript控制，需先获取2d或webgl上下文并确认可用性，再通过ctx方法绘制图形、实现动画和响应交互。

map返回新数组，forEach无返回值（undefined）；map用于转换生成新数据，forEach用于执行副作用；二者均不支持break，且跳过稀疏数组空槽。

快速入门JavaScript的关键是先写出能运行的小功能，通过console.log、修改页面内容和弹窗获得即时反馈，再聚焦操作元素、响应点击、存储数据三件小事，边抄边改现成例子建立动手确定感。

抽象工厂模式用于创建一组相互依赖的对象家族而不指定具体类，适用于UI组件库等需统一风格的场景。通过定义抽象产品和工厂接口，由具体工厂如浅色或深色主题工厂实现对象创建，确保同族产品协同工作。示例中按钮和输入框按主题统一渲染，客户端可切换整套界面风格而无需修改代码。优势包括解耦、易扩展产品族、保证兼容性，但新增产品类型需修改所有工厂，违反开闭原则。JavaScript中可用构造函数模拟抽象类，适合大型应用维护。

微前端JavaScript沙箱通过拦截全局操作实现隔离。1.基于Proxy的动态沙箱劫持window读写，运行时记录变更，卸载时还原；2.快照沙箱在不支持Proxy时保存window属性快照，卸载时对比恢复，但无法处理不可枚举属性；3.构建时隔离通过模块化和CSP减少全局污染；4.针对定时器、事件监听、Promise等需特殊清理机制。现代框架如qiankun已集成完善沙箱，原理理解有助于问题排查。

使用min-width和max-width可设置容器宽度范围，.sidebar{min-width:200px;}防止过小，.content{max-width:800px;margin:0auto;}限制过宽，结合width:100%实现响应式弹性布局，适配多设备显示效果。

JavaScript隐式类型转换分字符串拼接、逻辑判断、相等比较和数学运算四类：+遇字符串转拼接，if/&&/||转布尔但返原值，==复杂转换易出错，-*/%等强制转数字。