新技术新框架不断涌现，学习web前端开发都要掌握什么？

深藏阁楼爱情的钟 2021-09-02 04:06 286阅读 0赞

web前端开发由网页制作演变而来，随着web2.0的发展，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

经过了市场的沉淀，很多前端们开始无所适从，以前简单的技能已经无法适用前端技术的发展，新技术新框架又不断涌现。

前端开发市场仍然有着大量的需求。我们知道前端开发应用是很广泛的，这些公司都有前端开发岗位（当然这只是一部分）：并且薪资也不低。除了互联网公司，传统公司想要连接互联网，同样离不开前端工程师。而随着H5、微信小程序、各类APP的发展，对于前端的需求将一直上涨。所以总的来说，前端开发行业仍然有羹可分。并且营养丰富。

任何行业都需要努力，前端开发也不例外，首先你必须真的想要学习，想要改变。你需要有一个清晰的学习路线和方向，最好是能跟着有经验的人学习，这样才能快速入门前端，不走弯路。

前端开发的基础语法，由HTML+CSS+JavaScript组成，这是前端开发最基本的3个语言。

网页布局基础：HTML+CSS

HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

光是HTML做网页，只是有了内容，当然是远远不够的。因为只是HTML的话，只能用Table做布局才能勉强做出个成型的网页来。但是从Web2.0时代开始，都是盒子模型布局法了，也就是用DIV+CSS来实现布局了。

CSS就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用table布局的时候，只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。

HTML(div)+CSS布局，是基础入门的基本步骤，在这个阶段，你需要学习的内容，包括有：

1.标签语义化，SEO

2.页面加载的流程和原理

3.网页结构

4.盒子模型（W3C盒子模型和IE盒子模型）

5.CSS选择器

6.CSS布局浮动、定位

在刚刚开始的阶段，大家学习的布局方式基本都是以px为单位的静态布局方法。熟悉好布局方法，先给自己一个小目标，做一个简单的电商网页的基本结构出来，不用特效，不需要交互。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]

浏览器脚本语言：JavaScript

JavaScript是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了，在网页中，所有的数据渲染，特效的交互都需要利用JavaScript，来影响浏览器的显示。

JavaScript不只是开发网页特效和渲染数据的重要内容，在学习前端开发的后期，大量使用算法和框架的时候，对JavaScript基础的考验也是很多的。

在基础阶段，我们学习JavaScript需要注意：

1.基本关键字指令

2.基本数据类型、数组

3.函数

4.面向对象编程

5.原型链、闭包

6.JSON

7.Ajax

8.DOM(文档对象模型 原生DOM操作)

9.事件捕获、冒泡、代理

10.常用函数方法

11.ES5、6、7

在JavaScript部分学习，主要还是要去理解好交互的原理，把原理分析清楚，真的理解语法，那写出多复杂的逻辑也是手到擒来。

JavaScript经典类库jQuery

说到学习JavaScript，很多小白同学肯定会很头痛他的原生写法。每次逻辑业务都需要手动写，也就是用一次就造一次轮子。觉得很麻烦。如果能简单一点就好了。

因为JavaScript有可以封装的特性，所以在后面也出现了很多用JavaScript封装的类库、插件。比如说最经典的类库就是jQuery了。

jQuery类库就是在类库里面封装好了很多JavaScript的事件方法。jQuery通过封装，减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化，通过调用方法就可以了。

在学习jQuery的时候，需要重点认识的有:

1.jQuery语法和JavaScript原生语法的差异

2.Dom对象和jQuery对象

3.jQuery的入口函数和JavaScript的入口函数的差异

4.jQuery事件的执行逻辑。

学习jQuery，最需要达到的效果就是能快速的完成网页的特效，比如说轮播图、手风琴菜单、旋转木马、放大镜等等这些特效。能完成一个电商网站的布局+特效开发是最基本的要求了。

这些就是零基础学习必备的一些基本内容，在入门前端开发最基本需要掌握的东西，把基础理解好，才能为后面的学习做更多的准备。

多终端进阶学习

除了基础的PC端，目前移动端可以说是非常火的了。

比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。

Web-App

也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。

做好Web-App开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。

除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。

小程序

这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法。小程序目前很多公司都是招聘前端开发，目前还没有独立的小程序开发工程师，所以小程序可以说是前端工程师高薪就业的加分技能，换句话说就是成熟开发必备了。

Hybrid-App

又称混合式APP，可能听说的人很少，但是18年是越来越多人去开发了，这种是能直接产出下载到终端的APP的，在体验感上可以说已经具备传统APP的大部分功能了。这种开发门槛较低，也就是前端开发就可以完成。多数都是大包平台就能做，这个你可以后面了解一下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]

前端主流技术框架

前面的都是基础东西，现在去就业前端开发，不是只靠个基础东西，搞个移动端页面就可以算成熟了。前端3大框架，VUE、Angular、React这3个可以说是现在非常火热的了。

基础语法都可以写的前端，为什么还要框架？

很多小白朋友是不懂什么是框架的，只听过jQuery这些东西，以为就是框架。或者认为框架就是加速开发，觉得这些库、插件就能完成框架的工作了。

其实框架的出现，是改变前端地位的重要标志。最重要的表现，就是前后端分离，在前后端分离之前，很多后端开发都是又当爹又当妈的，效果不好效率也不高，我就是在后端出身，深知痛苦。

现在的前端项目，比以前是更加复杂化、多样化了。项目复杂了，问题也多了。

Web前端开发入门低的另一个重要表现就是符合8/2定律，也就是20%的东西使用率占到80%。所以很适合囫囵吞枣，因此我们的重点就是把这20%学起来，而首先要做的就是把这20%的东西找出来。前端这20%的东西大概就是常用的HTML标签，css的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。拿下这些东西意义非凡，一方面证明你适合做前端这份工作，另一方面这些技能能让你找到一份工作。

让你能够从容地去学习剩下的80%。总之就是专心对付重要的东西，那些什么less、sass、angular这类的东西，当你把我之前说的基础打好之后，学习起来畅通无阻，随学随用。较难的就是实践，只有实践才能学到真正的技术，新人很难参与一些有价值有意义的项目，没有这些项目又很难成长，所以自己有项目可参与应该珍惜。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]

小白学习web前端最常见的几个问题和误区：

1.无脑盲目的刷视频去看，但是很少去练习。正常的状态应该是在整个学习的过程中，四分之三的时间都是在练习。视频只是让你了解学习什么内容，看一遍就行了。有很多人都是无脑的刷视频看，最后浪费几个月的时间，也找不到工作。

2.小白开始学习的时候，看书是一种非常严重的误区。所以新手禁忌看书学习编程。至于原因是什么，在这里我不做太多解释。

3.很多人都是遇到一个问题，就是能看懂代码，但是不会写，这是比较常见的问题。

4.还有一个最现实的问题，就是学了后面的忘了前面，这是由于学习方法和方式存在这很大的错误。

5.整个学习流程混乱，没有系统的安排，学的不系统不专业，技术掌握的不好，浪费几个月甚至半年的时间。

6.缺乏和专业人士交流的过程，作为一个小白，在初期学习的时候，所学的最多的东西一定是从别人那里学到的，闭门造车。

前端技术每年都会不断更新，自学前端容易学不到最新的前端技术，前端学习建议大家还是要选择培训为好，在前端培训学校，往往都是根据前端技术发展，从而更新前端课程，让学员学到最新的前端知识。像爱创课堂，是一家专门做前端教育的培训机构。是由前百度前端架构师，张容铭老师亲自带队授课全程面授；授课以实战课程为主，张老师前端技术过人，每年有很多学员过来学习，也教会无数名高级前端工程师，在各企业都有就职。近期爱创课堂就是由张容铭老师亲自全面授课的，精品小班，名额有限，想报名可以给我发私信！现在也有很多人选择学校很茫然，其实可以到实地去体验一下，毕竟适合自己才是最重要的。

不管是web前端技术还是其他IT技术也好，其实都是从零基础开始的，你可以直接学习或者是通过相近经历转行。所以新人不需要因零基础而担心自己学不会。想要成为合格的WEB前端工程师，其实也不是很难的事情，主要是要选择科学的学习方式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/52002559a6874d54b8a93185274e78da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/135dcd3e939045979092a4abc5a30b82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/7936751e976c437a9def1c2da2d4002a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/f614ddc069ac4526951d4b87afb8a08b.png