JavaScript与Vue面试重点：闭包、跨域、性能优化解析

"面试题1.0不完整版包含了关于JavaScript、前端开发、Vue.js以及HTML5等领域的常见面试问题，如闭包、跨域、CSS布局、浮动清除、性能优化、Vue组件通信和数组方法等。" 1. **闭包**：闭包是一个能够访问并操作函数内部变量的函数，即使该函数已经执行完毕。闭包中的变量不会被垃圾回收机制回收，这使得它们可以用于变量持久化、函数防抖和函数节流等场景。例如，你可以创建一个立即执行函数表达式(IIFE)来创建一个闭包： ```javascript function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 输出 1 counter(); // 输出 2 ``` 2. **跨域**：浏览器的同源策略限制了不同源（协议、域名、端口）之间的交互，这是为了安全考虑。解决跨域的方法包括： - JSONP：利用`<script>`标签的跨域特性，通过动态插入带有回调函数名的脚本，服务端返回JSON数据包裹在回调函数中。 - CORS（Cross-Origin Resource Sharing）：需要后端服务器配置允许跨域头（Access-Control-Allow-Origin）。 - Vue.js中的代理：在`vue.config.js`中配置devServer的proxy属性，将请求转发到指定代理地址。 3. **垂直居中**：CSS中实现元素垂直居中的方法： - 弹性布局（Flexbox）：设置`align-items: center`。 - 行高对齐：`line-height`等于元素高度，适用于单行文本。 - 绝对定位：`position: absolute; top: 50%; margin-top: -50%;` 或 `transform: translate(-50%, -50%);`。 4. **清除浮动**：处理因浮动元素引起的父元素高度塌陷： - 添加空标签并设置`clear: both`。 - 使用伪元素，如`::before`或`::after`并添加`clear: both`。 - 父元素使用`overflow: hidden`，但需配合`zoom: 1`以触发hasLayout机制。 - 给父元素设定固定高度。 5. **性能优化**：常见的前端性能优化手段： - 减少HTTP请求：合并CSS和JS文件，压缩图片。 - 懒加载：延迟加载非首屏图片和路由。 - 使用CDN（内容分发网络）加载外部资源。 - 组件和逻辑复用，减少冗余代码。 - 函数防抖和节流控制执行频率，节省资源。 - 减少全局变量，遵循HTML语义化。 6. **Vue中的传值方法**： - 父组件向子组件传递数据：使用`props`。 - 子组件向父组件传递数据：通过触发`$emit`事件。 - 非父子组件间的通信：使用`eventBus`（事件总线）或Vuex状态管理库。 7. **数组的常用方法**：JavaScript中的数组方法： - `filter`：根据条件过滤数组元素。 - `map`：映射数组元素，创建新数组。 - `sort`：对数组进行排序。 - `splice`：在数组中添加、删除元素。 - `slice`：返回数组的一部分。 - `push`、`shift`、`unshift`、`pop`：分别用于在数组末尾添加元素、删除/添加首位元素。 - `indexOf`：查找元素索引。 - `concat`：合并数组。 - `join`：将数组元素连接成字符串。 8. **HTML5的新特性**： - 语义化标签：如`<nav>`、`<header>`、`<footer>`、`<aside>`、`<section>`，增强网页结构意义。 - Canvas和SVG：用于绘制图形。 - Web Storage（localStorage和sessionStorage）：替代cookies存储数据。 - Web Workers：后台处理任务，提高性能。 - Geolocation：获取用户地理位置信息。 - WebSocket：实现双向通信，建立持久连接。 这些知识点是前端开发面试中常见的考察点，掌握它们有助于提升你的技术水平和面试表现。