前端面试题详解整理52|自定义拖拽的模块，优化，hooks类组件和hooks,react理解，nodejs,前端这个角色

金色的雨570
81 阅读12分钟

阿里云前端二面

  1. 自我介绍
  2. 项目优化相关 20min
  3. 项目分工相关

1. 如果你手写一个自定义拖拽的模块 实现的全思路 从开始拖拽 拖拽过程 到拖拽结束

下面是一个简单的手写自定义拖拽模块的实现思路，包括开始拖拽、拖拽过程和拖拽结束：

开始拖拽：

  1. 给需要拖拽的元素绑定 mousedown 或 touchstart 事件，当鼠标按下或触摸开始时，触发拖拽操作。
  2. 在事件处理函数中，记录鼠标点击或触摸点相对于被拖拽元素的位置，并将其存储起来作为拖拽的起始点。
  3. 可以在开始拖拽时执行一些预处理操作，如添加拖拽样式、设置元素的 z-index 等。

拖拽过程：

  1. 在 document 上绑定 mousemove 或 touchmove 事件，当鼠标移动或触摸移动时，触发拖拽过程。
  2. 在事件处理函数中，计算鼠标当前位置相对于拖拽起始点的偏移量，并根据这个偏移量调整被拖拽元素的位置。
  3. 可以根据需要实现限制拖拽范围、吸附效果等拖拽交互的功能。

拖拽结束：

  1. 在 document 上绑定 mouseup 或 touchend 事件，当鼠标抬起或触摸结束时，触发拖拽结束。
  2. 在事件处理函数中，移除 document 上绑定的 mousemove 或 touchmove 事件，以停止拖拽过程。
  3. 可以在拖拽结束时执行一些收尾操作，如移除拖拽样式、保存拖拽后的位置信息等。

示例代码：

// 获取需要拖拽的元素
const draggableElement = document.getElementById('draggable');

// 记录拖拽起始点的坐标
let startX, startY;

// 绑定 mousedown 或 touchstart 事件开始拖拽
draggableElement.addEventListener('mousedown', startDrag);
draggableElement.addEventListener('touchstart', startDrag);

function startDrag(event) {
  // 阻止默认事件（如选中文本）
  event.preventDefault();

  // 记录起始点坐标
  if (event.type === 'mousedown') {
    startX = event.clientX;
    startY = event.clientY;
  } else if (event.type === 'touchstart') {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  }

  // 绑定 mousemove 或 touchmove 事件，实现拖拽过程
  document.addEventListener('mousemove', drag);
  document.addEventListener('touchmove', drag);

  // 绑定 mouseup 或 touchend 事件，监听拖拽结束
  document.addEventListener('mouseup', endDrag);
  document.addEventListener('touchend', endDrag);
}

function drag(event) {
  // 计算鼠标移动距离
  const deltaX = event.clientX - startX;
  const deltaY = event.clientY - startY;

  // 根据鼠标移动距离调整被拖拽元素的位置
  draggableElement.style.left = draggableElement.offsetLeft + deltaX + 'px';
  draggableElement.style.top = draggableElement.offsetTop + deltaY + 'px';

  // 更新起始点坐标
  startX = event.clientX;
  startY = event.clientY;
}

function endDrag() {
  // 移除事件监听
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('touchmove', drag);
  document.removeEventListener('mouseup', endDrag);
  document.removeEventListener('touchend', endDrag);
}

以上代码实现了一个简单的自定义拖拽模块，当鼠标按下或触摸开始时，可以拖拽指定的元素，并在鼠标移动或触摸移动时调整元素位置，当鼠标抬起或触摸结束时停止拖拽。你可以根据实际需求对其进行扩展和优化。

3. 还有哪些可以优化的点吗

当然，以上代码是一个简单的拖拽功能的实现，还有一些可以进一步优化的地方，例如：

  1. 节流和防抖：可以对鼠标移动事件或触摸移动事件进行节流或防抖处理，以减少事件触发频率，提高性能。

  2. 限制拖拽范围：可以限制拖拽元素的移动范围，确保拖拽元素不会移出指定区域。

  3. 拖拽边界检测：可以实现拖拽边界检测，当拖拽元素触碰到容器边界时，可以执行一些特定的操作，如吸附到边界。

  4. 使用 CSS 动画：可以使用 CSS 动画来实现拖拽效果，这样可以更加流畅地展现拖拽过程。

  5. 优化移动事件的绑定：可以考虑在拖拽开始时绑定移动事件，在拖拽结束时解绑移动事件，以减少不必要的事件监听。

  6. 使用 transform 属性：可以使用 transform 属性来调整元素的位置，而不是直接操作元素的 left 和 top 属性，这样可以提高性能，并且更加灵活。

  7. 事件委托：如果有多个拖拽元素，可以考虑使用事件委托，将拖拽事件绑定在它们的父元素上，以减少事件监听器的数量。

  8. 代码模块化：将拖拽功能封装成一个可复用的模块，提高代码的可维护性和可复用性。

以上是一些常见的拖拽功能的优化点，根据具体的需求和场景，可以选择适合的优化策略进行改进。

  1. 为什么选择前端

6. hooks和类组件的区别

React 中的 Hooks 是 React 16.8 版本引入的一项新特性，它可以让你在函数组件中使用状态、副作用等 React 特性。Hooks 和类组件之间有几个主要的区别：

  1. 语法和编写方式：

    • Hooks：Hooks 是函数组件中的特殊函数，例如 useState、useEffect、useContext 等。你可以在函数组件内部调用这些 Hooks，从而实现状态管理、副作用处理等功能。
    • 类组件：类组件是继承自 React.Component 的 JavaScript 类，需要定义一个继承自 React.Component 的类，并在类中定义 render 方法来返回组件的 JSX 结构。

  2. 状态管理：

    • Hooks：Hooks 提供了 useState 等钩子函数来管理状态。使用 Hooks 可以在函数组件中管理组件的内部状态，而无需使用类组件中的 this.state 和 this.setState。
    • 类组件：类组件通过 this.state 和 this.setState 方法来管理组件的状态。

  3. 生命周期方法：

    • Hooks：Hooks 提供了 useEffect 钩子函数来处理副作用，可以替代类组件中的生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等。
    • 类组件：类组件中可以使用一系列生命周期方法来处理组件的生命周期，如 componentDidMount、componentDidUpdate、componentWillUnmount 等。

  4. 代码复用和逻辑抽离：

    • Hooks：Hooks 提供了更好的代码复用和逻辑抽离的能力。你可以定义自定义的 Hooks，将一些常用逻辑抽离为自定义的钩子函数，然后在不同的函数组件中重复使用这些 Hooks。
    • 类组件：类组件中的逻辑抽离相对比较困难，通常需要使用高阶组件（Higher Order Components）或渲染属性（Render Props）等模式来实现代码复用。

总的来说，Hooks 提供了一种更加简洁、灵活的方式来编写 React 组件，尤其适用于函数组件。它们不仅可以更好地处理组件状态和副作用，还提供了更好的代码复用和逻辑抽离能力。但是，对于一些复杂的组件逻辑，类组件可能仍然是一种更合适的选择。

8. 谈一下对react的理解

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并开源。它被设计为简单、灵活、高效，并且具有可组合性。下面是我对 React 的理解：

  1. 组件化开发：React 的核心思想是组件化开发。组件是 React 应用的构建块，可以将复杂的 UI 拆分成独立的、可复用的组件，每个组件都有自己的状态（state）和生命周期。组件化开发使得代码更易于维护、扩展和重用。

  2. 声明式编程：React 采用了声明式编程的方式，通过描述 UI 在不同状态下应该呈现的样子来编写代码，而不是直接操作 DOM。开发者只需关注 UI 的状态变化，React 负责更新 DOM。这种方式使得代码更加清晰、易于理解。

  3. 虚拟 DOM：React 使用虚拟 DOM（Virtual DOM）来提高页面渲染性能。虚拟 DOM 是一个轻量级的 JavaScript 对象树，它对真实 DOM 进行了抽象。React 通过比较虚拟 DOM 的差异，然后批量更新真实 DOM，从而减少了 DOM 操作的次数，提高了页面渲染的效率。

  4. 单向数据流：React 中数据流是单向的，从父组件传递数据到子组件。子组件通过 props 接收父组件传递的数据，并且不能直接修改 props。这种单向数据流的设计使得组件之间的通信更加清晰，易于追踪数据流动的路径。

  5. 生命周期：React 组件具有生命周期方法，包括挂载、更新和卸载等阶段。通过生命周期方法，可以在组件不同的生命周期阶段执行一些操作，如初始化状态、发送网络请求、清理资源等。

  6. 状态管理：React 中使用状态（state）来管理组件的内部数据。状态是可变的，当状态发生变化时，React 会重新渲染组件。除了组件内部的状态，React 还提供了上下文（Context）和全局状态管理库（如 Redux、MobX 等）等方式来管理跨组件的状态。

总的来说，React 是一个强大、灵活的前端框架，它的设计理念和特性使得前端开发变得更加简单、高效、可维护。通过组件化、声明式编程、虚拟 DOM 等特性，React 使得开发者可以更专注于 UI 的设计和交互，同时提供了丰富的生态系统和社区支持，为构建复杂的 Web 应用提供了强大的支持。

10. 有了解过nodejs吗

Yes，我对Node.js有一定的了解。

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建快速、可扩展的网络应用。它是一个事件驱动、非阻塞I/O模型的服务器端JavaScript环境。

以下是我对Node.js的理解：

  1. 事件驱动和非阻塞I/O：Node.js采用事件驱动的编程范式，通过使用事件循环和回调函数来处理异步操作，实现了非阻塞I/O，使得Node.js能够处理大量并发请求而不会阻塞线程。

  2. 单线程：Node.js采用单线程模型，但通过事件循环和异步I/O，能够有效地处理并发请求。在I/O密集型应用中，Node.js表现得非常出色，但在计算密集型应用中，可能会存在性能瓶颈。

  3. 模块化：Node.js支持CommonJS模块规范，允许开发者将代码拆分为多个模块，并使用require语句引入模块。此外，Node.js还支持ES6的模块化语法。

  4. 内置库和第三方模块：Node.js提供了丰富的内置库，包括文件系统、网络、加密、HTTP等模块，可以满足各种常见的服务器端编程需求。此外，Node.js拥有一个庞大的第三方模块生态系统，通过npm包管理器，开发者可以轻松地安装和使用各种第三方模块。

  5. 适用场景：Node.js适用于构建高性能、可扩展的网络应用，特别适用于实时应用、聊天应用、API服务器、代理服务器等。

  6. 跨平台：Node.js可以运行在多个操作系统上，包括Windows、MacOS、Linux等。

总的来说，Node.js是一个强大、灵活的服务器端JavaScript运行时环境，它的事件驱动和非阻塞I/O模型使得开发者能够构建高性能、可扩展的网络应用。Node.js在Web开发、后端开发、微服务等领域都有广泛的应用。

  1. 学习前端的路线

13. 对于前端这个角色的理解

前端工程师是负责构建用户界面的专业人士，主要关注网站或应用程序的前端开发和设计。以下是我对前端工程师这个角色的理解：

  1. 构建用户界面：前端工程师负责构建网站或应用程序的用户界面，包括页面布局、样式设计、交互设计等。他们使用HTML、CSS和JavaScript等技术来实现界面的各种元素和功能。

  2. 跨平台兼容性：前端工程师需要确保用户界面在不同浏览器和设备上的兼容性，以确保用户在任何情况下都能正常访问和使用网站或应用程序。

  3. 性能优化：前端工程师需要优化用户界面的性能，包括页面加载速度、渲染性能、响应时间等，以提升用户体验并提高网站或应用程序的流畅度。

  4. 交互设计：前端工程师需要设计并实现用户界面的交互功能，包括表单提交、点击事件、动画效果等，以提升用户的交互体验。

  5. 前端框架和工具：前端工程师需要熟悉各种前端框架和工具，如React、Vue.js、Angular等，以及构建工具如Webpack、Babel等，来提高开发效率并加速项目开发。

  6. 与后端协作：前端工程师需要与后端工程师紧密合作，确保前端与后端的数据交互和接口对接正常，以实现完整的网站或应用程序功能。

  7. 持续学习：前端工程师需要不断学习新的技术和工具，跟进行业发展的最新趋势，以保持竞争力并不断提升自己的技能水平。

总的来说，前端工程师是负责构建用户界面的专业人士，他们通过使用HTML、CSS和JavaScript等技术，设计、开发和优化网站或应用程序的前端部分，以提供优秀的用户体验和用户界面。前端工程师的工作涉及到多个方面，需要具备扎实的技术功底、良好的团队合作能力和持续学习的精神。

#前端#

作者：Ditto___
链接：www.nowcoder.com/discuss/529…
来源：牛客网

avatar
文章
阅读
粉丝