学了前端可以做什么？前端开发有哪些应用场景？？

傷城~ 2022-12-16 09:11 432阅读 0赞

学习前端出来社会上就是大概率从事写代码工作的了，写代码这件事情我们是相当专业的，下面从几个典型的应用场景给大家分析一下！

一、前端开发应用场景

1、企业官方网站的开发与维护

这个应该是最简单的了，基本上是纯静态页面的展示，就算有交互模块，应该也是比较简单的那种。

2、门户类型网站的开发与维护

例如像搜狐一样的门户网站，相对来说也不难，这种网站一般分成很多个模块，每个模块的展现结构是非常类似的![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
如何做到可复用性强，对产品需求变更迭代时更加友好，那就很考验开发人员前端三大语言的设计模式了。

3、电商网站

例如京东和淘宝，里面不仅有对用户友好的展现方式，合乎逻辑的交互方式，还会涉及到网站、商品的色彩设计、排版设计、交互设计，虽然可能都由设计师来出方案，但是前端开发同学可以从中学到很多东西。

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
此外，除了单纯的展现，你需要考虑更多的东西了。

例如，不同端的字体展现，响应式布局，图片大小，静态资源缓存，CDN部署，Ajax动态数据交互。这些还都是偏纯展现的。

还会有涉及到个人信息填写、支付款项、密码输入等等，会涉及到一系列的前端安全问题，这部分也是很锻炼人的。

4、后台管理系统

一般这个是给内部人员使用的，所以可以不用考虑太多的兼容性，直接要求统一使用谷歌浏览器或者火狐。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
5、H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。

这些需要你的CSS功底非常扎实，常常要写一些动态效果、动画效果，越生动越吸引用户参与。

6、移动端视频播放页面

最近短视频崛起，但是很多短视频App中的页面是Web前端页面，这样做的原因是App过审麻烦且时间周期长，业务需要快速迭代和修复的情况下，前端责无旁贷。

那么这时候考验的是你对视频的操作能力，对流式播放技术和能力的掌握。此外，视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等，都是现在短视频必备的能力。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
7、微信小程序

噢，不，应该是小程序。微信、支付宝、百度等大企业，先后推出了小程序，当然身为前端开发的我们是必须掌握的一门技巧，虽然不是新的语言，但代码组织方式、调试方式、底层原理，也是值得关注和学习。

8、造轮子写工具、写框架，搭建基础设施

公司逐渐发展壮大以后，会面临一个问题，那就是如何将前端基础设施做起来。基础设施对前端的工程搭建与发展来说，太重要了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
二、5G时代对前端开发的影响

5G时代已经成为了大家讨论的热点话题，除此之外5G还能带动：自动驾驶、物联网、车联网、工业互联网、人工智能、智能家居、智慧城市等行业的将会飞速发展。

5G对IT行业的影响是首当其冲的！那么对于Web前端开发而言，5G时代的到来会有什么影响呢？![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
1、新的开发场景，带来大量的前端开发需求和挑战

随着5G标准的落地应用，在移动互联网领域将会出现新的开发场景（与物联网结合），包括智能家居，可穿戴设备等领域将带来大量的前端开发需求。

2、新的交互形式，前端开发大有可为

新的场景必然带来交互方式的改变，除了触摸等接触式的操作，新的场景可能带来声音，动作等新的交互方式，也变得更加丰富多彩，前端开发大有可为。

3、前端开发后端化和普及化

之前界限分明的前端开发和后端开发，未来开始模糊。从趋势上来看，开发团队的人员配备都在向前端倾斜，包括Android开发、iOS开发、PC端开发、小程序开发等，前端工程师承担的角色不断扩大。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

另外，Javascript开始向嵌入式领域进军，进一步促进了前端开发的普及化。与此同时，对安全，可靠等的要求越来越高，这都对前端开发提出更新和更严格的要求。

总结：随着5G技术的逐渐发展和成熟，未来大量的应用场景都需要前端进行呈现，所以未来前端开发将得到更多的重视。

想要不被时代所淘汰，我们就需要不断学习，不断完善自己。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7c0a352e540e43cd96dfd5a7ca174c93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a42a81e65c1b495fa7da3bcf78bf036f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/dd82e15fbb93449abc0b14dd33d4bd45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/8e6ad0206c2244debb368262974eafcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/913d99029114415ca7883addf7d48a67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/e24a2c2de71d4d1abfc2d4e27d2963e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/4fb1f8b7ffab43b485748a9f14d0039e.png