滴滴实习的成长-CSDN博客

本文链接：https://blog.csdn.net/wyzqhhhh/article/details/135578267

文章讲述了作者在滴滴实习期间学习的前端技术，如解决移动端兼容性问题、跨平台开发（如Three.js和Flutter）、提升沟通能力，以及使用新技术TypeScript的经验，强调了团队协作、问题解决和高效沟通的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滴滴实习有什么成长？

1.我学习到了比较挑战性的前端解决方案，比如说跨平台开发以及解决移动端兼容性问题等。提升你的技术深度和广度，让我的编码能力和解决问题的能力更加进步了。

解决移动端兼容性问题：

移动端兼容性问题是开发移动应用或移动网页时常常面临的挑战。以下是一些建议来解决移动端兼容性问题：

1.使用响应式设计：

使用响应式设计可以确保你的应用或网页在不同屏幕尺寸上都能正常显示。使用相对单位（如百分比或vw）而非绝对单位（如像素）来定义样式。

3.测试多种设备和浏览器：

在不同的移动设备上测试你的应用，包括不同的手机和平板电脑。确保在主流浏览器（Chrome、Safari、Firefox等）上的表现也是一致的。

5.使用媒体查询：

使用CSS媒体查询来根据屏幕宽度应用不同的样式。这可以帮助你在不同的设备上提供最佳的用户体验。
@media only screen and (max-width: 600px) {
/* 移动设备的样式 */
}

@media only screen and (min-width: 601px) {
/* 平板及以上设备的样式 */
}

7.避免使用Flash：

移动设备中很多时候不支持Flash，因此避免在你的应用中使用Flash。

9.使用Flexbox和Grid布局：

使用Flexbox和Grid布局来创建灵活的、自适应的布局，以适应不同屏幕尺寸。

11.处理触摸事件：

移动设备使用触摸屏幕而不是鼠标，确保你的应用能够正确处理触摸事件，例如点击、滑动等。

13.选择合适的字体大小：

确保你选择的字体大小适应不同屏幕大小。使用相对单位，以便在不同分辨率的屏幕上有一致的显示效果。

15.优化图片：

使用适当的图片格式（如WebP）以及压缩图片，以减小页面加载时间。同时，使用<pictur>标签和srcset属性来提供不同分辨率的图片。

19.测试和调试工具：
使用浏览器的开发者工具和移动设备模拟器进行测试和调试。

通过以上的方法，你可以更好地解决移动端兼容性问题，确保你的应用或网页在不同的移动设备上都能够良好运行。

跨平台开发：

使用Three.js：
- 如果你的应用需要3D图形或虚拟现实（VR）功能，可以考虑Three.js。Three.js是一个用于Web的JavaScript库，用于创建3D图形。
- 使用响应式设计：
  - 采用响应式设计的网页可以适应不同屏幕大小，从而在多个平台上提供一致的用户体验。通过使用相对单位、弹性布局（Flexbox）、CSS Grid等，确保界面能够灵活适应不同的设备。
使用Flutter或Dart：
- Flutter是一个由Google开发的UI工具包，可以用于在Web、移动端和桌面端构建高性能的应用。使用Dart语言编写，Flutter支持跨平台开发。
- Flutter不仅支持iOS和Android，还可以用于开发Web应用和桌面应用。这意味着开发者可以使用相同的代码库构建多个平台的应用。
- 如何使用？

2.学习怎样与团队成员协作、进行代码审。快速的查找bug、使用版本控制工具（如Git）进行代码管理，并学习怎样参与整个项目的开发周期。

在前端开发中，找到和处理bug是一个常见的任务。以下是一些常用的方法：

找bug：

控制台日志：使用浏览器的开发者工具，在控制台输出相关信息，包括错误信息、变量值等。console.log() 。有效打日志」主要是找到「打日志」的地方，这点技巧是「直接在问题点开始逐步往前打日志」，例如卡片标题显示错误，那就在卡片渲染的代码处打印卡片数据，然后往前找卡片数据修改处打印卡片数据，一直找到卡片数据获取处打印卡片数据。

断点调试：使用断点在代码中设置停止点，逐步执行代码，观察每一步的变化，可以通过浏览器的调试工具实现。可以逐步追踪问题的根源。

断点方式：这种方式很粗暴，在需要调试的地方加debugger关键字，代码运行到的时候会自动停下，进入调试模式此方法不需要手动断点，但是麻烦的是可能你调试一次就不用再调试了，但是每次运行到那里都会停下，必须移除这个代码才行这玩意我在不少网站也见到有人用，不想让人家方便的查看到网站源码，一打开控制台就自动debugger

代码审查：仔细审查代码，尤其是涉及到bug的部分。可能存在语法错误、逻辑错误或者代码写得不够严谨导致的问题。

浏览器兼容性：确保你的代码在不同浏览器中正常运行。有时候，bug 可能是由于浏览器兼容性问题引起的。css不兼容问题

前端常见浏览器兼容性问题解决方案_前端兼容性处理-CSDN博客

网络请求：检查网络请求是否返回了正确的数据，是否有404错误，是否有跨域问题等。

200 OK： 表示服务器成功处理了请求，并返回所请求的数据。
201 Created： 表示请求成功，并且服务器创建了新的资源。
204 No Content： 表示服务器成功处理了请求，但没有返回任何内容。
400 Bad Request： 表示服务器无法理解请求的语法，常见于请求参数错误或格式不正确。
401 Unauthorized： 表示请求要求身份验证，用户没有提供有效的身份验证。
403 Forbidden： 表示服务器理解请求，但拒绝执行，通常因为没有足够的权限。
404 Not Found： 表示服务器未找到请求的资源，可能是URL路径错误或资源不存在。
500 Internal Server Error： 表示服务器在执行请求时发生错误，是服务器端的通用错误状态。
502 Bad Gateway： 表示作为网关或代理的服务器收到无效响应。
503 Service Unavailable： 表示服务器当前无法处理请求，通常是由于维护或过载。
504 Gateway Timeout： 表示作为网关或代理的服务器未及时从上游服务器接收请求。
当发生跨域请求并且由于浏览器的同源策略（Same-Origin Policy）导致请求被阻止时，浏览器通常会返回一个 HTTP 状态码为 403 Forbidden。这表示服务器理解请求，但拒绝执行它，因为请求试图访问的资源在不被允许的域上。
需要注意的是，这个状态码是由服务器返回的，而不是由浏览器直接返回的。浏览器会在控制台输出错误信息，指示请求被阻止，但具体的状态码是由服务器设置的。
如果服务器启用了 CORS（Cross-Origin Resource Sharing），并且请求中包含了正确的 CORS 头信息，那么服务器可能会返回 200 OK 或其他成功状态码。跨域请求的处理方式取决于服务器的配置和实现。如果服务器未配置允许跨域请求，浏览器会拒绝访问，并在控制台中显示相关错误信息。