前端开发——前景|技能|简历|面试|规划

前端开发

导语

前端开发，就是代码通过浏览器、服务器的编译，将Web页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript这三大浏览器端的核心语言，以及衍生出来的各种技术、框架，来实现互联网产品的用户界面交互，通过这些浏览器“能看懂”的语言，将页面呈现出来。

前端和后端有什么区别呢？简单来说，前端开发是指浏览器到用户端的技术，通过HTML、CSS、JavaScript核心语言来构建用户界面，使我们能看到彩色的，有着交互效果的页面。

后端则是利用服务器能看懂的语言（如Java、Python、PHP和C＋＋等，当然基于node.js环境也可以利用JS实现一部分服务器端的开发）进行服务器端的开发；后端控制前端，负责程序设计架构，以及数据库等操作，来处理相应的业务逻辑。

根据我自己的理解，绘制了一个前端和后端的简易图，如下图↓

与后端开发不同，前端开发领域涉及的技术全面，用到的技术也更多，例如框架版本的更新速度非常快，则需要时刻关注新技术发展的趋势，主动学习，与时俱进。

前景＆薪资

前景：随着Web2.0时代的到来，为了更加注重前端页面与用户的交互体验，才逐渐将前端和后端开发单独分开。

随着产品形态日益增多，如：Web、移动端、小程序、甚至是随着5G时代到来的智能硬件，市场对前端开发工程师的越来越多，市场前景也还是非常不错，而全栈工程更是处于炙手可热的状态。

如下图可见，前端开发仍处于人才稀缺状态。

数据指标：TSL人才稀缺指数。

TSL=需求数/求职人数（TSL＞1 需求大于供给，人才稀缺；TSL＜1 需求小于供给，人才资源丰富）

（数据来源：猎聘网互联网行业人才市场研究报告）

薪资：薪资受技术水平、学历、工作年限等因素影响。

由下图可看出，前端开发平均薪资10-11K左右，10-15K区间占比更多当然，薪资当然也会随着工作年限、技术情况和学历等条件的改变而改变。

从技术层面来看，对原生js有深入研究的、有组件开发的、有大型项目常用的react和当前比较热门的vue等框架和库之类的，并且会一种后端语言（如PHP等）或使用node.js偏全栈的，薪资普遍15K＋，根据我的个人经验来看，当然这种人才市场相对来说比较少。

如果技术单一，都是小型项目经验，没有用过react框架和node技术的，技术比较一般的，薪资相对来说会低一个级别。

（数据来源：职友集，样本数据5.5w+）

   

1

核心语言

HTML：超文本标记语言。

包括各类标签，负责页面布局，搭建页面骨架，HTML文件就是浏览器可以直接显示的文件。

HTML5：添加了更多的标签和新元素来实现CSS或者JS的功能，使得一些复杂的交互效果用HTML就能实现，从而创建更好的页面结构。

新特性比如：智能表单（实现用户与页面后台交互主要组成部分-内容提示、焦点处理、数据验证等）、绘图画布（canvas元素）、多媒体（支持音频、视频）、地理定位、数据存储（允许在客户端实现较大规模的数据存储）等。

CSS：层叠样式表，负责修饰静态页面样式，调节标签样式，如宽、高、位置等。

DIV＋CSS： 能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制，调整更加方便。

很多网站均使用DIV＋CSS框架模式。

CSS3：新特征比如弹性盒模型、边框特性（圆角边框）、过渡与动画等。

 Flex弹性布局：更灵活的盒模型，更好控制元素的对齐、排列、调整尺寸、布局方向和重新排序等要求，就不用在去修改CSS代码了。

这个也是常见的面试基础考察点之一。

 less：是css预处理语言（不能直接渲染页面，要编译成css文件才可以），它扩充了css语言，增加了一些变量、函数、嵌套等功能，使得ccss更易维护、方便制作主题、扩充。

sass：是css预处理语言，功能跟less类似。

基于Ruby脚本，通过ruby在服务器端处理。

JavaScript：前端(浏览器端)编程语言，JavaScrip是由ECMAscrip语言、BOM、DOM组成的。

它主要是操作HTML元素，无需通过Web服务器就可以对用户的输入做出响应，从而实现网页交互和动态功能。

它可以在多平台运行，比如：Windows、Linux、Mac、Android、IOS等。

基于Node.js环境可以实现服务器端的编程。

DOM：文档对象模型，即html文档，是W3C标准。

通过DOM、JS能够操作访问HTML写的代码修改页面内容、结构、样式，并处理网页内容的方法和接口。

DOM和文档有关，与浏览器无关，是描述处理网页内容的方法和接口。

BOM：浏览器对象模型，通过js控制浏览器。

操控浏览器交互的方法和接口。

ES6语法：ECMAScript（简称ES6）是JavaScript语言的下一个版本，Node.js对ES6的支持度比浏览器更高，可以通过Node来体验更多ES6的特性。

ES6具有模块化机制，能用更简洁的语法和函数，来编写复杂的大型应用程序。

ES6新增特性：变量声明（const和let）、模板字符串、箭头函数、对象和数组解构、Spread/Rest操作符、二进制和八进制的字面量、迭代器iterator、for…of和for…in、class类的写法等。

ES6的新特性，也是面试中的常考点。

ES7\ES8语法：新特性：Array、prototype、includes、求幂运算等。

Node.js：一个可运行JavaScript的环境，使得JS可以涉足后端领域。

Node能够对网络通信、文件系统、操作系统API、数据库、模块、包等后端（服务器端）进行操作编程，实现前后端统一。

常用于实时性应用（在线协作、网页聊天类）、流式应用（客户端经常要上传文件的）、高并发和前后端分离等场景。

express：基于Node.js平台的PC或移动设备的web前端应用框架。

①　path模块：路径处理

②　url模块：用于解析url中各个部分，路由。

。

。

。

。

。

。

③　http模块：用于网络通信。

。

。

。

。

。

。

④　router模块：接受处理用户请求，返回结果给用户。

动态网页express框架自带router类，可直接挂载路由节点。

⑤　后台框架常用的有express mongoose等

TypeScript：微软开发的编程语言，兼容JavaScript，可以编译成JavaScript，它拓展了JavaScript的语言，所有的JavaScript程序可以运行在Typescript环境中。

Typescript是为大型应用的开发而设计的，可以在浏览器，node.js服务端等操作系统均可运行。

后端（全栈）PHP：超文本预处理语言，服务器端的脚本语言， 本地无法运行。

可以和HTML无缝对接，控制HTML。

多为跟数据有关系，处理数据，与数据交互的业务系统。

    

2

主流框架/组件库

React：Facebook开发的，支持服务器端编写。

React和Vue都是单向收据流，不操作DOM，都是虚拟DOM。

React现已全面包容ES6，所以，ES6也需要掌握了。

普遍来说，大厂用react，小厂用Vue。

react更适用于原生Web端和APP。

● React全家桶：react、redux\mobx（数据状态管理）、react-router（路由）、Axios、react-materical（UI框架等）

● 生命周期（钩子函数）：

初始化： getDefaultProps、getInitialState、componentWillMount、render（创建虚拟DOM）、componentDidMount

更新：compontentWillReceiveProps（nextProps）、shouldComponentUpdate（nextProps，nextState）、compontentWillUpdate（nextProps，nextState）、render、compontentWillUnmount

VUE：轻量级web前端开发框架，尤雨溪开发的，个人在维护。

主流的前端三大框架之一，使用广泛，单向数据流，双向数据绑定。

根据我自己的一线招聘经验来看，市场近85%的前端开发候选人都使用的是VUE框架。

● React全家桶：vue-router(路由工具)、vue-cil（脚手架）、vuex（状态管理，集中式存储管理组件的状态）、Axios（基于promise的HTTP库，用于ajax请求）等

● 生命周期（钩子函数）：beforecreate、created、beforeMount、Mounted（挂载到元素）、beforeUpdat、Updated、beforeDestroy、destroy

Angular：来自谷歌开源的Web前端框架，诞生于2009年。

2015年之前应用得比较多。

随着2015年react和vue的出现，使用的逐渐变少。

从我个人的角度来看，在大批量简历筛选的过程中，angular确实是比较少了，而且很多用angular框架的一般都是30多岁的或者是老项目的了吧😂。

Bootstrap：由Twitter公司的两名工程师研发的开源框架，包含有很多定义好的 CSS和JS代码，可以直接使用，快速构建基于PC及移动端设备的web页面需求。

响应式布局，即可以兼容PC端、手机移动端等多种终端显示。

内置jQuery插件，提供一些实用性很强全面的组件，包括：导航、标签、工具条、按钮等，此外它还提供了很多美工方案，可以直接调用。

支持HTML5、CSS3、Less动态样式等。

jQuery：是一个JavaScript库，该库为DOM操作HTML的，能帮助我们快速方便的使用JS。

其功能比如：为页面添加动画、与服务器异步交互、简化数据操作和迭代运算等。

    Zepto就是jQuery的移动端版本, 可以看做是一个简化版的jQuery，底层是CSS3来实现的。

3

常用工具/组件库

代码编辑器

：VScode、HBuilder、Webstorm、Sublime Text、Dreamweaver、notepad＋＋、Babel等

UI框架/库

element-ui：免费开源的基于Vue的组件库

MintUI：基于Vue.js的移动端组件库

Layui：可作为PC端后台系统与前台界面的俗称开发方案

Flutter：谷歌的移动UI框架，可以在IOS和Android上构建原生用户界面

构建化工具：

Webpack：基于node来写的模块化打包工具，可以做代码转化ES6、压缩代码体积、模块合并、自动发布等功能 。

Glup：构建工具，可以配合各种插件做JS、CSS压缩，less编译等功能。

Grunt： 基于nodeJs的命令行工具 npm 可对js、css等进行合并和压缩，同时对js文件有检查报错的功能。

Grunt比较老旧，功能少，更新少，插件少。

Ajax技术：他不是编程语言，而是一种不刷新页面就能更新页面，异步数据传输，产生局部刷新效果的技术。

具体工作原理如下图↓。

实现Ajax的技术/库：JQuery、Axios、Prototype、Node HTTP等。

版本管理：多人协作的项目管理工具，管理开发进度，并控制权限等。

SVN：多人协作“集中式”的版本控制系统，市场上用得比较多。

需联网，代码上传服务器。

Git：多人协作“分布式”的版本控制系统。

可以本地库的版本控制。

Bower：前端包管理工具，对项目资源进行统一的管理。

依赖Node.js环境。

Echarts

：一个纯 Javascript 的数据可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器。

W3C标准

：W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。

与结构标准对应的代表语言是XHTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。

MVVM模型

：Model-View-ViewModel即模型—视图—视图模型，视图和模型不能直接通信，要通过ViewModel来通信，监听数据变化来通知对应的数据层。

VUE就是基于MVVM模式的框架，这里的Model指js中的数据（如：对象、数组等），View指页面视图，ViewModel指VUE实例化对象。

MVC模型:Model-View-Controller，即模型—视图—控制器，目的是让Model和View的代码分离，通过Controller来连接。

由于大多数业务逻辑都是在后端实现的，所以前端没有MVC模式。

3

应用领域

网站

：PC端网页等。

小程序

：当下流行的小程序，可依赖微信等大型产品，跟Web开发有点区别。

APP：

IOS和Android（以后再详写）

简历

逻辑架构清晰、项目技能描述全面的简历，给面试官的第一印象也会非常好，同时简历也是总结自己技术和项目，尤其是项目经验部分，结合STAR法则来描述的项目经验，更是助力你表达的目录，在面试自我介绍时甚至是你的思路指南。

如下图：为前端开发的简历模板，可以参考这个来写~~~如下图↓

Android开发工程师个人简历模板——锤子简历

面试

常见前端面试考察角度

一面：大厂刷题，方向如下。

见过就会，没见过就半死。

笔试➕问答。

谨防心里懂，说不出来的心酸史。

CSS

选择器、盒模型、弹性盒模型、层模型、响应式…

JS

ES6／ES7、原型、继承、作用域、闭包、异步、原型链、DOM、BOM、事件、promise…

开发运行

Git、调试、代码管理、打包、代码安全、性能优化、重构迭代、Webpack配置、Eclipse继承）集成环境…

Node.js

实际应用…

框架考察

react、VUE（其他框架用得少，主要是react和vue）原理、生命周期、通信…

数据结构＆算法

冒泡、diff…

计算器&浏览器基础

浏览器组成内核、网络协议、渲染原理、HTTP和HTTPS、TCP/IP、缓存机制…

项目考察

架构设计、组建设计、组件通讯…

二面：难度激增，很少能在网上查到原题，基本都是面试官个人风格的原创。

或来自工作中提炼的技术坑，或来自实际应用的案例。

比如：算法题、正则题、闭包题、数组题……

1. 算法题：请写出一个小算法提取100以内的质数（即：除了1和自身外不能被任何数整除的数）

2. 正则题目：写一个验证手机号的正则表达式

3. 闭包题：根据要求写出结果。

如下图上下滑动看全代码 ↓

输出以下题目答案：

var object={

  name:“object”，

  getName：function(){

 

  return function(){

 

 

   console.info(this.name)

 

 

}

 

}

}

Object.getName()()

4. 数组题：提取如下一维数组中的相同项，以相同项的value值为key将其组装成二维数组。

 

如下图上下滑动看全代码 ↓

[{

   “merchant_id”：99987169，

   “merchant_name”：“测试”，

  “employee_id”：1431904418，

   “merchant_code”：“1501466571”，

   “merchant_state”：1，

   “merchant_type”：0，

   “company_name”：“快乐服务有限公司”

}，{

    “merchant_id”：11386332，

    “merchant_name”：“境内普通商户新资金流v3”，

   “employee_id”：124696180，

    “merchant_code”：“1900009231”，

    “merchant_state”：1，

    “merchant_type”：0，

    “company_name”：“高兴有限公司”

}，{

    “merchant_id”：11386354，

    “merchant_name”：“境内受理商户新资金流v3父”，

   “employee_id”：159130073，

    “merchant_code”：“1900009251”，

    “merchant_state”：1，

    “merchant_type”：1，

    “company_name”：“快乐服务有限公司”

}，{

 

“merchant_id”：11384187，

    “merchant_name”：“普通商户|境内|v3自动化测试|ide新资金流|普通模式|”，

 

“employee_id”：168095801，

    “merchant_code”：“19000010021”，

    “merchant_state”：1，

    “merchant_type”：0，

    “company_name”：“高兴有限公司”

}，{

 

“merchant_id”：11609192，

    “merchant_name”：“自动化测试商户简称”，

 

“employee_id”：133570479，

    “merchant_code”：“1900012671”，

    “merchant_state”：1，

    “merchant_type”：1，

 

“company_name”：“你好科技有限公司”

}]

5. Node问题：在nodejs开发的时候 处理过什么windows和mac的平台兼容性问题？（参考：兼容环境变量设置，用cross-env，因为export和set有系统差异性\windows不支持 & ,并行执行npm-script用npm-run-all或者concurrently\异步同步化:util.promisify + async/await\不要直接用官网的fs.readFileSync，用fs-extra去代替\拼接路径要用path.join，Unix系是/，Windows是\）

（暂且列举这么多，以后再出第二季）

职业规划

技术：技术一条路走到黑，靠天赋异禀，直到技术专家、直到白发苍苍，走到人生巅峰，想来过程必定艰辛啊。

管理：半技术、半管理，确乎是大多数人最实际的方案。

平日里学会站在leader的角度看问题，培养大局观，而不是只关注自己的一亩三分地；做前端的不懂服务端，做服务端的不懂前端，如何能有大局观的管理推动力。

产品经理需求开出来了，明明可以实现的效果，下属却骗你说实现不了，这样可不行吧。

总之，还是多看看，多学学，会的多了、知道得多了，视角也就提升了。

教育：技术转教育的还是非常多的，因为本身开发加班比较多也比较累，随着年龄增加，选择做技术教育方向也不错。

创业：有自己的想法和市场洞察力，找好合伙人，做好销售和市场，那就自己干吧。

本文来源网络，如有侵权请联系删除！