前端工程师（一）-职位要求分析

笔者介绍：13级毕业生，目前毕业一年，前就职地点北京，任职一年。前端小菜鸟吧，前一家公司是个创业小公司，毕业时做的是python 后端开发，由于前端人员紧张，后来主要参与前端页面开发。才发现自己爱上了这种直面用户的设计型程序工作，理工与设计相结合吧。

目前技术能力：后端python 使用过flask做web容器，前端之前主要负责页面逻辑实现，所以css和html比较弱项，js有看过JS高程三，有学习过js面向对象编程相关学习视频。上一个公司项目主要做数据可视化，所以百度出的echarts使用比较多。整体框架使用过MVVC模式的vue.js，源码没有看过。其他相关技能如：数据库，git操作等

不骄不躁吧，一步一个脚印，趁这段时间好好总结，好好沉淀

---

好,废话不多说，进入正题吧

---

前端面试之1---职位要求分析

这是岗位职责：

• 1、使用 HTML/CSS/JavaScript/AJAX 等各种 Web 技术进行移动端、PC端界面开发；
• 2、整体页面结构及样式层结构的设计、优化；
• 3、在团队的代码格式、结构的规定下，编写易读、易维护、高质量、高效率的代码；
• 4、具有良好的沟通能力、团队配合精神，对新技术敏感。

这是任职要求：

• 1、两年以上专职Javascript开发经验，有微信公众号开发经验优先考虑；
• 2、熟悉 angularjs 、react、vue其中一种
• 3、熟练运用CSS3新特性，熟悉HTML5最新规范；
• 4、能够熟练运用HTML5特性构建移动端的WebApp；
• 5、熟悉less/sass、es6语法；
• 6、熟悉常用的构建工具（包括gulp或webpack）；
• 7、熟悉常用的包管理器（包括bower或npm）
• 8、熟悉微信公众号h5开发；
• 9、开发速度快、抗压能力强，可应对较大的工作压力；

---

岗位职责：

---

• 1 使用HTML，CSS，Javascript ，Ajax等各种Web技术进行移动端，PC端界面开发
  常见WEB要求，进行界面开发，WEB前端工作者必须的技能，html页面结构，css页面样式表，js页面逻辑实现交互，ajax异步加载渲染。知识点：移动端，PC端。双端开发：主要要考虑到PC端和移动端开发的区别，主要考虑的方面有：兼容性，网速，适配，页面布局等方面的不同。

• 兼容性
  PC端考虑的是浏览器的兼容性，而移动端开发考虑的更多考虑的是手机兼容性，原因：目前移动端浏览器基本都是使用webkit内核，而且在手机端浏览器基本会更新为最新版本，不会存在过旧的浏览器版本。主要需要考虑的是手机分辨率的适配和操作系统的略微差异

• 事件
  移动端和PC端的差异还表现在事件方面，例如移动端会多出来触屏事件，缺少hover事件。另外移动端包括会有一些弹出手机键盘等移动端浏览器调用的事件，这些问题PC端是没有的

• 布局
  移动端开发一般会针对不同分辨率做到布局自适应。（之前没有做过移动端开发，这些解决办法不是很清楚）

• 动画处理
  PC端一般由于要考虑到兼容性会使用JS做动画，但是移动端一般使用CSS3

• 移动端的一些接口
  移动端一般会用到一些联动的接口，例如微信，例如位置信息等，移动端的应用一般会用到一些交互功能，而pc端一般没有这些操作。

• 移动端对JS资源或者插件流量优化
  PC端考虑性能一般在加载速度和页面响应时间，而移动端还可能在流量方面有所考虑，一般插件或者资源能小则小，所以PC端一般使用juery，移动端用zepto

• 一些前端开发架构，性能优化，首屏打开时间，动画帧率等

• 2 整体页面结构及样式层结构的设计、优化；

由于之前布局结构设计不是由我主要负责，所以这一块技巧有点空缺。不过基本的盒模型和弹性布局还是有了解。之前项目中主要使用到的解决办法是：Bootstrap的栅栏扁平化设计。col-md,col-sm针对列的栅栏化，VUE.js的第三方UI库的element和iview等也有这种栅栏设计，使用这类设计能够快速的完成页面布局和结构设计

• 3 在团队的代码格式、结构的规定下，编写易读、易维护、高质量、高效率的代码；

这就是基本的程序员素养问题。易读易维护的高效率代码是每个程序员追求的代码之道。主要体现在，代码的结构性，可读性，代码的效率性等。

• 4 具有良好的沟通能力、团队配合精神，对新技术敏感。

程序员这个行业，自己一年的工作经验看来，说苦逼吧，也苦逼，说还行吧，也还行。享受着社会较高的教育资源和较为舒适的工作环境和氛围。但是依然是劳动创造价值，靠自己的劳动成本换取高额的薪酬，或者说透支自己的未来时间来获得今日的高薪。程序员要一直保持一颗学无止境的心态这个基本每个程序员都会知道我就不用多说了。我也是个小菜鸟/

任职要求分析（知识点，敲黑板记好，哈哈）：

• 1、两年以上专职Javascript开发经验，有微信公众号开发经验优先考虑；

• 之前没有做过小程序开发，但是听说美团最近新出的mpvue是一套快速开发小程序的框架，同时语法和vue.js是一样的，只需要使用vue.js的开发规范，并且支持转换为H5熟悉VUE.js即可使用。之前有过vue.js使用经验，之后再补充一下，应该可以的。

• 2、熟悉 angularjs 、react、vue其中一种

• 上一个项目有使用vue.js开发重构项目。数据双向绑定，以数据驱动，并且页面组件化，对于上一个项目那种数据可视化单页面应用简直不能太合适。MVVC设计模式-Model，View，View-Controller。view即为视图层，表现为所有的DOM元素，Model层为模型，即相关业务逻辑的数据对象，聪数据库映射而来。而vm（ViewModel）层就是与界面对应的model，把model数据对象封装和关联上界面View，并且实现绑定，视同会根据数据对象的改变而改变，而数据对象也会因为视图操作而改变。视图View与Model进行绑定是通过DataBinding监听model层数据，Model与View层绑定是通过DOMListenner监听页面元素的变化。这样做的好处是：数据驱动，自动计算属性和追踪依赖的模板表达式。同时VUE.js支持组件化开发，将可复用的页面元素封装成组件，只需要在使用的页面中用es6的语法将其注册并且声明即可直接使用自定义标签。

• 3、熟练运用CSS3新特性，熟悉HTML5最新规范；

• HTML5新增特性：

• 1 更多语义化标签，header，footer，aside，mark等
• 2 Canvas画布，用过JavaScript来完成图形绘制
• 3 HTML拖放，draggable属性，设置为true，会有一些拖放的事件钩子，比如OnDragstart，SetData还有OnDragover等
• 4 HTML地理定位API，用于获取用户的地理位置
• 5 HTML允许嵌入音频元素，audio，vdieo标签
• 6 HTML新增更多的表单输入类型，这些新特性提供了更好的输入控制和验证
• 7 HTML Web存储 HTML5提供了一个能够代替cookie的Javascript解决方案，sessionStorage和localStorage.
  区别是：SessionStorage是针对一个Session进行数据存储，当用户关闭浏览器窗口i之后数据会被删除LocalStorage对象存储的数据没有时间限制两种存储模式均为客户端数据存储方式
• 8 HTML提供了新的离线Web应用。由于引入了应用程序缓存，这意味着Web应用可以进行缓存，并可在没有因特网链接是进行访问，三大优势

• 1离线浏览-用户可在应用离线时使用它们
• 2 速度-已缓存的资源会直接请求本地资源，获得更快的资源加载速度
• 3 减少服务器负载-浏览器将只从服务器下载更新过或者更改过的资源

• 9 HTML5 Web Worker
  当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，可以继续做其他的交互相应，实现多线程并发
• 10 HTML5 WebSocket
  WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议，在web socket API中，浏览器和服务器只需要做一个握手动作，然后浏览器和服务器之间就形成了一条快速通道，两只直接就可以直接进行数据相互传送。浏览器通过JavaScript向服务器发出尖利WebSockt连接的请求，连接请求建立之后，客户端和服务器端就可以通过tcp连接直接进行数据交换。

• CSS3新特性

• css3选择器
• css3边框样式
• css3背景
• css3渐变
• css3文本效果
• css3字体
• css3转换和变形
• css3 3D转换属性
• css3过度
• css3动画（暂未使用过）
• css3多列
• css3盒模型
• css3弹性布局
• css3多媒体查询

• 4、能够熟练运用HTML5特性构建移动端的WebApp；

• 之前没有过web App项目经验=-=，需要再补充。只能再这里补充一下网上找到的相关概念吧。web app指的是：使用HTML5编写的移动web应用，由于可以运行在多端，所以一套代码到处运行，减少了开发成本。不过vue.js也适合再移动端开发，首先vue.js有易用的过度系统效果，vue.js可以快速的复用已有的组件，vue.js有丰富的第三方UI框架，并且有有做自适应样式。app开发过程中只需要关注app的数据走向

• 5、熟悉less/sass、es6语法；

• Less is More
  Less是基于Javascript的客户端CSS plus 需要特定的工具将Less编译为CSS才能够解析。主要是在CSS的基础上增加变量，Mixin（混入）运算一级函数功能等功能，目的是为了方便css的维护成本和编写成本
  而Sass是基于Ruby的服务器端CSS扩充。是最早也是最成熟的CSS预处理语言，可以使用变量常量嵌套混入函数等功能。并且整体来说sass功能更强大一些。
  同时Bootstrap就是基于Less语法编写

• 6、熟悉常用的构建工具（包括gulp或webpack）；

• 为什么使用WebPack

• 由于现在网页功能越发丰富，拥有复杂的JavaScript和一大堆依赖包，于是就有了很多常用的构建工具。比如webpack，他可以实现以下功能：

• 1 模块化 把复杂的程序细化为小的未见
• 2 类似TypeScript，Less这种在JavaScript上拓展的开发语言，能够提前调用工具实现预编译和转换

• webpack的工作方式是把Web项目整个看作一个整体，通过给定主文件，例如Index.js，webpack将从这个主文件作为入口开始找到项目所有的依赖文件，最后打包成一个或者多个浏览器可以识别的Javascript文件，相比gulp webpack的处理速度更快耿直饥饿，能打包更多不同类型的文件。
• webpack的使用方式。
  使用npm进行安装，并且使用webpack构建项目，通过配置文件进行配置修改，
  。。。等等详细的需要另起一篇文章介绍了

• 7、熟悉常用的包管理器（包括bower或npm）
  之前项目有使用过npm作为包管理器，实现一些前端依赖包的安装和管理，npm install，并且可以写一些简单的npm脚本，批量安装或者什么的
• 8、熟悉微信公众号h5开发；

• 其实之前并没有什么微信公众号相关开发经验，之后再补充

• 9、开发速度快、抗压能力强，可应对较大的工作压力；

• 这种情况在面试的时候很有可能发生。如果参加的是压力面，面试官的问题会非常尖锐、尖刻，即使你回答得很好，也会被他说得哑口无言，无力辩驳。其实这个时候面试官不是看你回答得好或坏，是看你承受压力的能力，所以对这种情况，你一定要以积极、健康、乐观的心态面对，千万不要惊慌失措，语无伦次，微笑着看着面试官，再说些个人有个人的看法之类的话，显得自己并没有很紧张，很从容的样子。 如果是一般的面试被面试官问倒了，自己一时无法回答，可以直接跟面试官说：给我5秒钟时间想想，然后再做回答，如果实在不知道怎么回答得，只有老实一点了，说不会，或者说现在暂时没有想到合适的答案。特别是问的是技术性方面的问题，不会就不会，没有关系的，瞎扯也扯不出什么来，反而给面试官留下不诚实的印象。 希望我的意见能对你有用！

---

---

以上就是我的简单的前端工程师职位要求分析，希望各位程序员朋友相互鼓励！一起加油！有帮助的话鼓励一下~新人上路

---