滴滴前端实习二面面经

这次晚上好好睡了一觉，精力充沛的来面试了，感觉脑子好使了很多！面试了大概50多分钟左右。

面试官终于开摄像头了，简单自我介绍了一下，直接开始问项目了。

1.了解过jsbridge吗，做啥的

是的，JavaScript Bridge（JSBridge）是一种用于在 WebView（Web浏览器内部的网页视图）和原生应用程序之间进行通信的技术。它允许前端（JavaScript）和后端（原生代码）之间进行双向通信，从而实现 Web 页面与原生应用的交互。

JSBridge 的主要作用包括但不限于：

调用原生功能： 允许在 WebView 中调用原生应用程序提供的功能，例如相机、地理位置、传感器等。
传递数据： 允许在 WebView 和原生应用程序之间传递数据，从而实现数据的双向交换。
事件通知： 允许原生应用程序向 WebView 发送事件通知，以便 Web 页面可以做出相应的处理。
性能优化： 可以通过 JSBridge 在 JavaScript 和原生代码之间优化性能，例如在 JavaScript 中执行较重的计算任务，或者在原生代码中执行性能要求较高的操作。

JSBridge 的实现方式多种多样，常见的包括：

Android WebView 中的 WebViewClient 和 WebChromeClient： Android 平台上的 WebView 可以通过 WebViewClient 和 WebChromeClient 来实现与 JavaScript 的交互。
iOS WKWebView： iOS 平台上的 WKWebView 提供了 JavaScript 与原生代码之间的通信接口，可以实现类似的功能。
第三方框架： 也有一些第三方的 JSBridge 框架可供选择，例如腾讯的 TBSBridge、阿里的 Weex 等。

总的来说，JSBridge 技术使得 Web 页面能够更好地与原生应用程序进行交互，从而提供更丰富的用户体验和功能。

2.如何在h5实现点击后退出现提示弹窗？类似pdd第一次点击退出以后送个优惠券不让退，第二次点击退出才退出

在 HTML5 中实现点击后弹出提示弹窗并控制退出的功能，你可以通过以下步骤实现：

监听点击事件： 在退出按钮上绑定点击事件的监听器。
弹出提示弹窗： 当用户点击退出按钮时，弹出一个提示弹窗，询问用户是否确定要退出。
控制退出： 根据用户的操作结果，决定是否执行退出操作。

下面是一个简单的示例代码，演示了如何实现上述功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>提示弹窗示例</title>
  <style>
    /* 样式可以根据需求自定义 */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      z-index: 9999;
    }
  </style>
</head>
<body>

<button id="exitBtn">退出</button>

<div id="popup" class="popup" style="display: none;">
  <p>确定要退出吗？</p>
  <button id="confirmBtn">确定</button>
  <button id="cancelBtn">取消</button>
</div>

<script>
  // 获取退出按钮和弹窗元素
  const exitBtn = document.getElementById('exitBtn');
  const popup = document.getElementById('popup');

  // 给退出按钮绑定点击事件监听器
  exitBtn.addEventListener('click', function() {
    // 显示弹窗
    popup.style.display = 'block';
  });

  // 获取确定按钮和取消按钮
  const confirmBtn = document.getElementById('confirmBtn');
  const cancelBtn = document.getElementById('cancelBtn');

  // 给确定按钮绑定点击事件监听器
  confirmBtn.addEventListener('click', function() {
    // 执行退出操作
    alert('执行退出操作'); // 这里可以替换为真正的退出逻辑
  });

  // 给取消按钮绑定点击事件监听器
  cancelBtn.addEventListener('click', function() {
    // 隐藏弹窗
    popup.style.display = 'none';
  });
</script>

</body>
</html>

在这个示例中，当用户点击退出按钮时，会弹出一个提示弹窗询问用户是否确定要退出。用户点击确定按钮后，会执行退出操作；点击取消按钮或者弹窗外部区域，则会关闭弹窗，不执行退出操作。

3.看你项目做了弹幕视频网，说一下弹幕怎么实现的？

在弹幕视频网站中，实现弹幕功能的基本思路如下：

前端接收弹幕数据： 前端通过 WebSocket 或者 HTTP 请求等方式从服务端获取弹幕数据。
展示弹幕： 前端将接收到的弹幕数据进行解析，并在视频播放界面上展示出来。通常会根据弹幕的时间戳和位置等信息，在视频播放器的相应位置上显示弹幕内容。
发送弹幕： 用户可以在视频播放页面上输入弹幕内容，并发送给服务端。
后端接收并存储弹幕： 后端接收到用户发送的弹幕内容后，将其存储到数据库或者消息队列等持久化存储中。
推送弹幕数据给前端： 后端将接收到的弹幕数据推送给所有正在观看视频的用户，以实现实时展示弹幕的效果。

基于以上流程，实现弹幕功能的具体步骤如下：

前端部分：
- 使用 HTML、CSS 和 JavaScript 实现视频播放器界面。
- 使用 WebSocket 或者 HTTP 请求从服务端获取弹幕数据。
- 根据接收到的弹幕数据，在视频播放器上动态展示弹幕内容。
- 实现用户发送弹幕的功能，包括输入框和发送按钮等交互组件。
后端部分：
- 使用 Node.js、Python、Java 等后端技术实现服务端程序。
- 设计数据库模型，存储弹幕数据。
- 实现接收用户发送的弹幕内容的接口，并将其存储到数据库中。
- 实现推送弹幕数据给前端的逻辑，可以使用 WebSocket 进行实时推送，或者定时轮询等方式。

总的来说，弹幕功能的实现涉及到前端展示、用户交互以及后端数据处理等多个方面，需要前后端配合完成。同时，需要考虑到弹幕数据的实时性和可靠性，以及用户发送弹幕时的数据验证和安全性等问题。

4.如果很多弹幕一起来，怎么控制不会重叠？怎么控制占半屏、四分之一屏？说一下思路

控制弹幕不会重叠，并且可以控制弹幕的显示位置（如占据半屏或四分之一屏的位置），是弹幕系统中的重要问题。以下是一些思路和解决方法：

时间戳控制： 对弹幕消息的显示时间进行控制，确保弹幕不会在同一时间段内同时出现在屏幕上，可以根据弹幕的显示时长和播放进度来调整显示时间，避免弹幕重叠。
位置控制：
- 随机位置： 在屏幕上随机生成弹幕的显示位置，确保弹幕不会重叠。这种方法简单快捷，但可能会导致弹幕过于密集或者出现在不可见区域。
- 分布均匀： 将屏幕分成多个区域，并对每个区域的弹幕数量进行控制，确保弹幕分布均匀。可以根据屏幕宽度和弹幕宽度来计算每个区域可以容纳的弹幕数量。
- 根据优先级分配位置： 为每条弹幕设置优先级，并根据优先级大小分配显示位置。优先级高的弹幕可以占据屏幕上较大的位置，而优先级低的弹幕则放置在较小的位置。
位置调整： 当弹幕数量过多时，可以动态调整弹幕的显示位置，让弹幕在屏幕上滚动显示，而不是固定在某个位置。这样可以确保所有弹幕都能够显示在屏幕上，避免重叠。
屏幕密度控制： 根据屏幕的分辨率和尺寸，调整弹幕的密度和显示效果。对于屏幕较小的设备，可以减少弹幕的数量或者采用滚动显示的方式，以保证用户体验。

综合以上思路，可以通过控制弹幕的显示时间、位置和密度等方式，有效地避免弹幕重叠和混乱，提升用户体验。具体实现时，可以根据项目需求和技术条件选择合适的方法，并进行适当的调整和优化。

5.前端怎么实现弹幕自动识别人像不遮挡功能？只说前端实现思路

前端实现弹幕自动识别人像不遮挡功能的思路如下：

人像检测： 使用前端人像识别库（如face-api.js）或者调用后端接口进行人像检测。这些库可以识别图像中的人脸位置，并返回人脸的位置信息。
弹幕位置调整： 在弹幕发送或者展示时，根据人像检测的结果调整弹幕的位置。如果检测到人像的位置与弹幕的预计位置重叠，就需要将弹幕位置向其他方向移动，避开人像区域，以确保人像不被弹幕遮挡。
位置调整算法： 开发一个位置调整算法，根据人像位置和弹幕预计位置计算出合适的弹幕位置。可以采用以下几种方法：
- 随机位置： 将弹幕随机分配到除了人像区域以外的其他位置。
- 人像周围位置： 将弹幕放置在人像周围的位置，避开人像区域，但又不会过远离人像，以保持弹幕的可读性。
- 动态调整： 实时监测人像位置的变化，根据人像的移动调整弹幕的位置，确保人像和弹幕的相对位置保持不变。
定时检测： 定期（如每隔一段时间）对页面进行人像检测，以确保弹幕位置的准确性和及时性。可以使用定时器或者监听页面滚动等方式触发人像检测。
用户交互： 在弹幕发送时，允许用户手动调整弹幕位置，以适应不同场景下的人像位置。提供一个可拖拽或者选择位置的界面，让用户自定义弹幕位置。

综上所述，通过人像检测技术和弹幕位置调整算法，可以实现弹幕自动识别人像不遮挡的功能。在实现过程中需要考虑弹幕位置的合理性、准确性和用户体验，以提升页面的交互性和视觉效果。

6.vue双向绑定了解多少

Vue双向绑定是Vue.js框架中的一个重要特性，它能够使得视图层与数据模型之间的同步变得更加简单和高效。下面是关于Vue双向绑定的一些了解：

概念： 双向绑定是指视图层（DOM）和数据模型（JavaScript对象）之间的双向关联。当数据模型发生变化时，视图层会自动更新以反映这些变化；反之，当视图层的输入发生变化时，数据模型也会自动更新。
实现原理： Vue的双向绑定是通过数据劫持（Object.defineProperty或Proxy）和观察者模式实现的。Vue会对数据对象进行劫持，在数据发生变化时通知相关的视图更新；同时，当视图中的输入发生变化时，Vue会更新对应的数据模型。
v-model指令： Vue中的v-model指令用于实现表单元素与数据模型之间的双向绑定。它可以应用在input、textarea、select等元素上，通过将输入和数据模型进行绑定，实现双向数据流动。
响应式系统： Vue的响应式系统是双向绑定的核心。当数据发生变化时，Vue会自动触发依赖于该数据的视图更新，保持视图与数据的同步。
优点： 双向绑定简化了开发人员处理视图和数据之间的同步逻辑，提高了开发效率；同时，也提升了用户体验，使得页面更加动态和响应。
注意事项： 虽然双向绑定带来了便利，但在大型应用中要注意双向绑定的性能问题。频繁的数据变化和视图更新可能导致性能下降，因此需要合理使用双向绑定，避免不必要的更新和渲染。

总的来说，Vue双向绑定是Vue.js框架的核心特性之一，它为开发者提供了一种简洁高效的方式来处理视图和数据之间的关系，是Vue框架广受欢迎的重要原因之一。

7.http状态码说一下，206是啥，你那个视频播放器在什么地方可能会收到这个状态码

HTTP状态码是指在客户端与服务器之间进行HTTP通信时，服务器向客户端返回的响应状态的一种标识。状态码由三位数字组成，用于表示HTTP请求的处理结果，可以分为五类，分别以不同的数字开头。

HTTP状态码的分类包括：

1xx：信息性状态码，表示请求已被接受，需要继续处理。
2xx：成功状态码，表示请求已被成功接收、理解、接受或处理。
3xx：重定向状态码，表示需要进一步操作以完成请求。
4xx：客户端错误状态码，表示客户端发送的请求有误，服务器无法处理。
5xx：服务器错误状态码，表示服务器在处理请求时发生了错误。

其中，206状态码表示部分内容，表示服务器已经成功处理了部分GET请求。通常情况下，当客户端发起一个范围请求（Range Request）时，服务器会返回206状态码，并在响应头中包含Content-Range字段，指示返回的是请求资源的一部分。这个状态码通常在视频流媒体等需要分段传输的场景中使用，用于支持视频的分段加载和播放。

在视频播放器中，可能会收到206状态码的场景包括：

用户在进行视频播放时，通过拖动进度条快进或后退，此时播放器会向服务器发起范围请求，请求特定时间范围内的视频片段。
在网络环境不稳定或带宽较低的情况下，视频播放器可能会采用分段加载的策略，通过多次请求视频的不同部分来实现流畅的播放体验，此时也会收到206状态码。

8.笔试题：一个场景，首先验证信息后发送网络请求提交表单，根据不同的状态码来实现不同的操作

这个场景可以分为以下几个步骤来实现：

用户填写表单并提交。
前端对用户填写的信息进行验证，确保数据的有效性和完整性。
如果验证通过，前端向服务器发送网络请求提交表单数据。
后端接收到请求后，对表单数据进行进一步的验证和处理，包括验证用户身份、处理表单数据等。
后端根据处理结果返回不同的HTTP状态码给前端。
前端根据收到的状态码进行相应的处理，例如：

如果收到200状态码，表示表单提交成功，前端可以跳转页面或者显示成功提示信息。
如果收到4xx状态码，表示客户端提交的表单数据有误，前端可以提示用户修改错误的信息并重新提交。
如果收到5xx状态码，表示服务器在处理请求时发生了错误，前端可以提示用户稍后再试或者显示服务器错误信息。

整个流程中，前后端通过HTTP状态码来进行信息交互和协调，根据不同的状态码采取不同的操作，从而实现表单提交的验证和处理。这种机制能够有效地保障数据的完整性和安全性，并提升用户体验。以下是一个简单的 JavaScript 代码示例，用于实现上述场景的表单提交验证和处理：

// 假设表单的id为form，提交按钮的id为submit-btn

// 获取表单元素和提交按钮
const form = document.getElementById('form');
const submitBtn = document.getElementById('submit-btn');

// 添加表单提交事件监听器
form.addEventListener('submit', async (event) => {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取表单数据
    const formData = new FormData(form);

    // 对表单数据进行验证，这里假设验证函数名为validateFormData
    const isValid = validateFormData(formData);

    if (isValid) {
        try {
            // 向服务器发送网络请求提交表单数据
            const response = await fetch('提交表单的API地址', {
                method: 'POST',
                body: formData
            });

            // 获取服务器返回的状态码
            const statusCode = response.status;

            if (statusCode >= 200 && statusCode < 300) {
                // 表单提交成功，跳转页面或显示成功提示信息
                window.location.href = '成功页面地址';
            } else if (statusCode >= 400 && statusCode < 500) {
                // 客户端错误，提示用户修改错误信息并重新提交
                alert('提交的表单数据有误，请检查后重新提交');
            } else {
                // 服务器错误，提示用户稍后再试
                alert('服务器出错，请稍后再试');
            }
        } catch (error) {
            console.error('提交表单时发生错误：', error);
            // 处理异常情况，例如网络错误等
            alert('网络错误，请稍后再试');
        }
    } else {
        // 表单数据验证不通过，提示用户修改错误信息
        alert('请填写正确的表单信息');
    }
});

// 表单数据验证函数
function validateFormData(formData) {
    // 这里可以根据实际情况编写表单数据验证逻辑，返回一个布尔值表示验证结果
    // 这里仅作示例，假设所有字段均为必填项且不为空
    for (let value of formData.values()) {
        if (!value) {
            return false;
        }
    }
    return true;
}

在这个示例中，我们首先获取了表单元素和提交按钮，然后给表单添加了提交事件监听器。在提交事件处理函数中，我们首先阻止了表单的默认提交行为，然后获取了表单数据并进行了简单的验证。如果验证通过，就使用fetch API向服务器发送网络请求提交表单数据，并根据服务器返回的状态码进行相应的处理。

9.上面的笔试题写一下异常处理吧

以下是添加了异常处理的 JavaScript 代码示例：

// 假设表单的id为form，提交按钮的id为submit-btn

// 获取表单元素和提交按钮
const form = document.getElementById('form');
const submitBtn = document.getElementById('submit-btn');

// 添加表单提交事件监听器
form.addEventListener('submit', async (event) => {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取表单数据
    const formData = new FormData(form);

    // 对表单数据进行验证，这里假设验证函数名为validateFormData
    const isValid = validateFormData(formData);

    if (isValid) {
        try {
            // 向服务器发送网络请求提交表单数据
            const response = await fetch('提交表单的API地址', {
                method: 'POST',
                body: formData
            });

            // 获取服务器返回的状态码
            const statusCode = response.status;

            if (statusCode >= 200 && statusCode < 300) {
                // 表单提交成功，跳转页面或显示成功提示信息
                window.location.href = '成功页面地址';
            } else if (statusCode >= 400 && statusCode < 500) {
                // 客户端错误，提示用户修改错误信息并重新提交
                alert('提交的表单数据有误，请检查后重新提交');
            } else {
                // 服务器错误，提示用户稍后再试
                throw new Error('服务器出错，请稍后再试');
            }
        } catch (error) {
            console.error('提交表单时发生错误：', error);
            // 处理异常情况，例如网络错误等
            alert('网络错误，请稍后再试');
        }
    } else {
        // 表单数据验证不通过，提示用户修改错误信息
        alert('请填写正确的表单信息');
    }
});

// 表单数据验证函数
function validateFormData(formData) {
    // 这里可以根据实际情况编写表单数据验证逻辑，返回一个布尔值表示验证结果
    // 这里仅作示例，假设所有字段均为必填项且不为空
    for (let value of formData.values()) {
        if (!value) {
            return false;
        }
    }
    return true;
}

在这个示例中，我们使用了try-catch语句来捕获可能出现的异常，包括网络请求异常和服务器返回的异常状态码。如果捕获到异常，则会在控制台打印错误信息并向用户显示相应的提示。这样可以提高用户体验，使用户在遇到异常情况时能够及时得到反馈。

10.小程序和跨端了解多少

跨端开发是指在不同平台（例如Web、iOS、Android）上使用相同的代码库进行应用程序开发的技术。小程序是一种跨平台的应用开发模式，可以在微信、支付宝、百度等不同的平台上运行。

了解跨端开发需要掌握以下几个方面的知识：

框架和工具: 了解常用的跨端开发框架和工具，例如React Native、Flutter、uni-app等，以及它们的特点、优势和劣势。
平台差异: 了解不同平台之间的差异，包括UI组件、API调用、性能表现等方面的差异，以便在开发过程中能够针对不同平台进行优化和适配。
性能优化: 跨端开发往往需要考虑到性能优化的问题，包括应用启动速度、页面渲染性能、内存占用等方面，需要了解一些优化策略和技巧。
调试和测试: 由于跨端开发涉及多个平台，因此调试和测试也会更加复杂。需要了解如何在不同平台上进行调试和测试，并且熟悉一些常用的调试工具和技巧。
开发流程: 了解跨端开发的开发流程，包括项目初始化、代码编写、构建打包、发布部署等方面的流程，以及相关的开发工具和辅助工具的使用。
平台特性: 了解目标平台的特性和限制，例如小程序平台的限制、支付宝小程序的特有能力等，以便在开发过程中充分利用这些特性和避免遇到限制。

综上所述，了解跨端开发需要涉及到框架、平台、性能优化、调试测试、开发流程等多个方面的知识，这样才能更好地应用跨端开发技术进行应用开发。

11.git怎么回退版本，版本id怎么查看

在Git中，你可以使用以下命令来回退版本和查看版本ID：

回退版本：
- 如果你想回退到上一个版本，可以使用以下命令：
```
git reset --hard HEAD^
```
- 如果你知道要回退到的具体版本号，假设为<commit_id>，可以使用以下命令：
```
git reset --hard <commit_id>
```
- 上述命令会将工作区、暂存区和版本库都回退到指定的版本。工作区，暂存区，版本库，工作区，暂存区版本库
查看版本ID：
- 你可以使用以下命令查看提交历史以及各个版本的ID：
```
git log
```
- 这会列出所有的提交历史，每个提交对应的版本ID（也称为提交哈希值或简称为commit ID）会显示在日志中。

记住，回退版本操作会丢失掉回退之后的提交记录，因此请确保在执行回退操作之前，已经做好了必要的备份或者确认。

反问：

1.面评怎么样？

有些场景答的深度不够，不过经验不足可以理解，二面过

2.主要是什么业务？

主要搞小程序跨端那一块的吧，搞自研的框架

3.待遇怎么样？转正吗

待遇和hr细说，不转正

总结：面试大多是场景题，八股几乎不考，感觉也是滴滴的面试特色吧。感觉滴滴更看重一个人的综合素质而不是扒股文的能力，特别是不同场景下的实现方案。面试流程非常快，13投简历14约面15一面16二面，二面一小时后就给offer了，某种程度也算速通了滴滴hhhhhh

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

前端面试题详解整理79|小程序和跨端.首先验证信息后发送网络请求提交表单http状态码vue双向绑定jsbridge，点击后退出现提示弹窗，