-
JavaScript可选链(?.)用于安全访问嵌套属性、方法、数组索引及动态属性,遇null/undefined即短路返回undefined;可与??搭配设默认值;不可用于赋值左端或链式调用中非可选部分。
-
保存HTML文件后双击可直接在默认浏览器预览;2.右键选择指定浏览器打开能快速查看效果;3.使用VSCode的LiveServer插件可实现保存即刷新的实时预览;4.拖拽HTML文件到浏览器窗口也能迅速加载显示页面内容。
-
JavaScript解构赋值是简洁语法,支持从数组(按位置,用[])和对象(按属性名,用{})提取变量;支持跳过、剩余元素、默认值、重命名、嵌套及函数参数解构,但源为null/undefined时会报错。
-
数据劫持是通过Object.defineProperty拦截对象属性的读取和修改操作,实现对数据变化的监听,在Vue2中用于响应式系统;其核心是利用get和set捕获属性访问与赋值,结合递归遍历实现深度监听,但存在无法监控数组索引变化、动态增删属性等局限,需配合$set等方法弥补,最终被Vue3的Proxy方案取代。
-
前端路由与后端同步的关键是处理HistoryAPI模式下的非根路径请求。使用Vue或React的history模式时,页面跳转由前端控制,但用户刷新或直接访问路径时请求会发送到后端,若未正确配置将返回404。为实现协同,Node后端需将所有未知路由转发至前端入口文件index.html,由前端接管渲染。前端路由通过JavaScript监听URL变化实现无刷新跳转,主要有Hash和History两种模式。Hash模式自带#,不触发后端请求,无需后端配合;History模式生成更友好的URL如/user/pr
-
Proxy是ES6用于实现双向绑定的核心特性,通过拦截对象的get和set操作,可在数据变化时自动更新视图,用户交互时同步修改数据;相比Object.defineProperty,Proxy能监听动态属性和数组方法,语法更简洁,支持对整个对象的代理,无需递归定义响应式属性,是现代前端框架响应式系统的基础。
-
浮动容器中混用浮动与非浮动子元素会导致布局错乱,因浮动元素脱离文档流;解决方式有三:1.非浮动子项加clear属性;2.父容器用伪元素清除浮动;3.将非浮动项移至独立容器并清浮。
-
Symbol通过创建唯一属性键避免命名冲突,确保扩展内建对象时的唯一性和未来兼容性,其非枚举特性提升代码可维护性与可读性,同时需注意误用Symbol.for、序列化丢失及过度依赖等问题,最佳实践包括使用描述性名称、避免直接修改原型链并做好文档说明。
-
JavaScript通过HistoryAPI实现无刷新路由控制,核心是pushState添加、replaceState替换历史条目,并通过popstate事件响应导航,需手动更新视图。
-
使用CSSGrid结合grid-auto-flow:dense可高效实现等间距瀑布流布局,1.将容器设为display:grid;2.使用repeat(auto-fill,minmax(200px,1fr))定义自适应列;3.设置grid-auto-rows:auto使行高随内容变化;4.启用grid-auto-flow:dense实现密集填充以减少空白;5.通过gap:16px统一行列间距;该方案利用Grid二维布局优势,相比浮动或Flexbox能真正实现错落有致的视觉效果,且无需JavaScript干
-
FetchAPI是广义Ajax的一部分,非XMLHttpRequest替代品;它返回Promise但不自动拒绝4xx/5xx错误,需手动检查response.ok;POST传JSON需设Content-Type并JSON.stringify;不支持同步请求、上传进度事件和内置超时,需AbortController实现。
-
使用grid-template-areas可直观定义页面布局。1.设置Grid容器,通过字符串定义三行两列结构:header占首行,sidebar与main居中,footer在底部;2.子元素用grid-area分配对应区域;3.响应式下重排为单列并隐藏sidebar,提升移动端体验。命名需一致以确保正确渲染。
-
媒体查询断点应匹配真实设备逻辑并分层设置(如320px、480px、768px等),配合rem实现字号与间距自适应,优先使用Flexbox/Grid布局,确保viewport正确设置,并区分核心响应对象与视觉细节。
-
背景色叠加变暗的本质是子元素遮盖父元素导致背景裁剪,或半透明背景使父背景透出形成混合效果;误用多层background、opacity或跨主题复用rgba值会加剧该问题。
-
零基础做网页应从写出可访问、能打开、带样式的最小HTML5页面开始:包含<!DOCTYPEhtml>、<htmllang="zh-CN">、<head>(含<metacharset="UTF-8">和<title>)、<body>四部分;CSS用外部style.css文件通过<link>引入;优先掌握<header><nav><main><f