一个优秀的前端工程师应具备哪些技能?

author author     2023-04-13     177

关键词:

第一阶段:

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础:

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效:

常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征:

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery:基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段:

HTML5和移动Web开发

HTML5:

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发:

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段:

HTTP服务和AJAX编程

WEB服务器基础:

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础:

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇:

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇:

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段:

面向对象进阶

面向对象终极篇:

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征:

继承性、多态性、封装性、接口。

设计模式:

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段:

封装一个属于自己的框架

框架封装基础:

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级:

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充:

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段:

模块化组件开发

面向组件编程:

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程:

AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。

第七阶段:

主流的流行框架

Web开发工作流:

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架:

Angular.js、Backbone.js、Knockout/Ember。

常用库:

React.js、Vue.js、Zepto.js。

第八阶段:

HTML5原生移动应用开发

Cordova:

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目,配置,编译,调试,部署发布)。

Ionic:

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新,上拉加载,侧滑导航,选项卡)。

ReactNative:

ReactNative简介、ReactNative环境配置、创建项目,配置,编译,调试,部署发布、原生模块和UI组件、原生常用API。

HTML5+:

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段:

Node.js全栈开发:

快速入门:

Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程,非阻塞I/O、模块概念,模块管理工具、开发流程,调试,测试。

核心模块和对象:

全局对象global,process,console,util、事件驱动,事件发射器、加密解密,路径操作,序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础:

HTTP协议,请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架:

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

参考技术A

个人总结如下:

1、熟练HTML和CSS,是熟练哦;

2、学习ES5,进而ES6,即使浏览器兼容存在问题,但前端工程化时用得着;

3、PWA渐进式web应用,百度一下;

4、SPA,不是桑拿spa,而是单页面应用,及相关理念和JS框架,如MVVM模式,angular、vue.js

5、http网络协议,Ajax及json;

6、Bash或powershell命令,node和npm包管理/yarn,前端构建工具(如gulp、webpack)

参考技术B 不同公司,不同岗位,不同业务背景对优秀前端的要求可能会有差异,我们以阿里巴巴淘系技术部的一则JD为例,来拆解一下,不同级别的前端工程师应该具备什么样的技能。
JD
业务背景
淘宝内部最大创新项目之一,大团队已有百人规模,大部分项目处于保密阶段,前景远大

职位描述
1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。

职位要求
0.掌握图形学,webgl或熟练使用threejs框架,熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具,掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架,了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具,redux/react-router等。
5.熟悉各种Web前端技术,包括HTML/XML/CSS等,有基于Ajax的前端应用开发经验。
6.有良好的编码习惯,对前端技术有持续的热情,个性乐观开朗,逻辑性强,善于和各种背景的人合作。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。
首先,总览全部的要求,会发现这个职位虽然提到了3d相关的技能,但是大部分却是应用开发相关的能力,所以这个职位并不是想找专业的3d领域同学,而是需要一个工程化能力强,对3d有了解的同学。
0.掌握图形学,webgl或熟练使用threejs框架,熟练canvas相关渲染及动画操作的优先。
初级:
学习过图形学相关知识,知道矩阵等数学原理在动画中的作用,知道三维场景需要的最基础的构成,能用threejs搭3d场景,知道webgl和threejs的关系。
知道canvas是干嘛的,聊到旋转能说出canvas的api。
知道css动画,css动画属性知道关键字和用法(换句话说,电话面试会当场出题要求口喷css动画,至少能说对大概,而不是回答百度一下就会用)。
知道js动画,能说出1~2个社区js动画库,知道js动画和css动画优缺点以及适用场景。
知道raf和其他达到60fps的方法。
中级:
如果没有threejs,你也能基于webgl自己封装一个简单的threejs出来。
聊到原理能说出四元数,聊到鼠标操作能提到节流,聊到性能能提到restore,聊到帧说出raf和timeout的区别,以及各自在优化时候的作用。
知道怎样在移动端处理加载问题,渲染性能问题。
知道如何结合native能力优化性能。
知道如何排查性能问题。对chrome动画、3d、传感器调试十分了解。
高级:
搭建过整套资源加载优化方案,能说明白整体方案的各个细节,包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力,以及如何配合。
设计并实现过前端动画引擎,能说明白一个复杂互动项目的技术架构,知道需要哪些核心模块,以及这些模块间如何配合。
有自己实现的动画相关技术方案产出,这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库,不算这里的技术方案。如果有类似社区方案,必须能从原理上说明白和竞品的差异,各自优劣,以及技术选型的原因。
更多的面试知识可以看看b站尚学堂的直播。希望对你有帮助。
参考技术C 随着互联网快速成为日常工作生活的一部分,对于从事互联网的职业也有了更加清晰的定位:设计,前端开发,后端,编辑,运营等等。在这里我们以前端开发的人员的角度来看看应该掌握哪些技能。

大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小case;图片集成,一直都在用……还能有什么问题?是不是真的没什么问题了呢?那么页面开发还有哪些要求,还要做些什么,这里面的水有多深,跟着我往下看


技能一:绘制原型图,实现效果图

优秀的前端开发人员必然熟练掌握一种原型图设计工具,能够将构思通过工具绘制成原型图。同时能够将设计做出的视觉稿通过页面代码的方式表现出来。比如目前最流行,便捷的原型图工具 Mockplus ,历史悠久的Axure等。能完成这两个内容就可以初步进入页面前端的从业者行列了,但这就代表着我们可以胜任页面开发的工作了?不,才刚刚开始!

技能二:与设计师的沟通和项目的参与

各行各业沟通很重要,作为前端开发人员,接触到的最主要的“客户”就是项目设计师。设计师根据原型图出视觉稿,在这个过程中,前端开发人员需要和设计师进行某些效果实现的探讨,比如对低端浏览器渲染效率影响,是否可以通过CSS3实现从而使结构更加清晰,是否能在视觉效果和代码实现中寻求平衡。前端开发有义务对开发出来的页面稳定性和渲染效率负责。在很多情况下,项目进度要求设计与前端开发同步进行,这种情况下就必须尽可能多的参与到项目沟通。


技能三:搭建良好的页面结构

在前端开发中页面结构的编写好比盖房时的打地基,结构的好坏会直接影响到代码的质量、JS开发、后端的开发以及以后页面的扩展、调整和迭代。当拿到设计稿之后不要急于开工,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。

技能四:优美的代码

随着web项目功能越来越复杂,带来的直接后果就是代码的体量变得很庞大。如何进行协同开发和代码的维护是从前端开发开始就要思考的问题。这种情形下需要考虑完善,统一规划,养成一个良好的代码开发习惯。比如:合理的使用标签、良好的注释、清晰的代码结构、准确使用CSS等。优美的代码,清晰的结构能够为下游开发和协同开发降低了不小的沟通成本。

技能五:保障效率

作为项目开发中靠前的一环,前端开发人员一定要有一个认识:尽早完成为项目后续进展争取更多的时间。“工欲善其事,必先利其器”,除了实战经验和代码习惯的形成可以帮助我们提高效率外,想要提高对自己开发的进度掌控能力,还需要学会使用辅助工具帮助提高页面开发的效率,比如使用Less 或 Sass 可以帮助我们拓展和组织CSS,大大提高 CSS的编写效率增加了可维护性。多多发掘一定会找到最合适自己使用的工具。
参考技术D

    前端三大基础技能HTML、CSS、JS自不必说,这是前端吃饭的东西。

    TCP/IP、浏览器渲染原理、前端性能优化兼容、PC/M端开发、DOM、BOM、计算机原理(基础,一般软件或计算机出身的都知道)等。

    就目前社会上需要的而言,除了基础之外,会要求掌握Vue、react、ng、node等一个或多个知识。隐约已经成为了一个事实的标准,但这些知识你可以看出,都是JS,没错都是JS,所以说JS的掌握程度越高,你学习这些框架越轻松,毕竟这些都是API嘛。

    还有就是一些npm、yarn、gulp、webpack等工具的使用。

    大部分要求是这样的了,团队的技术栈也是围绕着这些。但是对于应届生其实没这么高的要求,基础掌握大致就是不错的了。毕竟应届生大概是什么水平团队都是知道的。能有个工作三五年的老司机有经验吗?可能性不大,毕竟很多东西是需要项目来淬炼的。

一个优秀的程序猿应该具备哪些技能?

...字顾名思义包括了硬件技能和软件技能。硬件技能可以让一个程序猿的专业过硬,无人反驳,在语言方面,有C、C++、Java、Ruby等等等等;在环境方面,又分嵌入式、桌面系统、企业级、WEB、基础系统,或是科学研究;而软件技能... 查看详情

一位合格的注塑工作者应具备哪些专业知识?

...理干部就要懂管理了 参考技术B回答一名优秀的注塑工艺工程师,需要懂哪些?注塑工程是一项复杂的工程,它涉及到注塑原料、注塑机械及周边设备、注塑模具、产品品质、注塑材料及产品性能测试等各方面,因此,它要求注... 查看详情

一个优秀的软件测试工程师需具备的技能

今天早上看到一篇文章写的很好,软件测试工程师的地位在圈里的地位低下,甚至有些技术比较厉害的开发工程师觉得软件测试工程师没有存在的必要,而作为软件测试工程师的一员如何保持自己的技能和竞争力哪?下面简要介... 查看详情

优秀的ui/ux设计师需要具备哪些技能?

设计可以是一款产品,一个网站,也可以是一个品牌门面。因此,无论在任何时代及领域,设计师似乎都是不可或缺的存在。而随着互联网时代的到来,企业对设计师们对要求已发生改变,从传统的平面设计也衍生出更多的职位... 查看详情

如何评测软件工程知识技能水平?

一个软件工程师的软件工程知识技能水平高低主要体现在哪些方面?编程语言能力?作为一名软件工程师,应该能够熟练掌握编程语言,并且能够深入理解OOP、OOA、OOD等编程思想。精通一门编程语言能为以后的软件开发打下坚实... 查看详情

成为一个优秀的测试工程师需要具备哪些知识和经验?

根据我的观察,优秀的测试人员可以做的事情可以包括如下3点:由单纯的测试变成项目质量保证工作持续集成探索和推动和自动化测试技术研究测试相关工具的开发1、我们先来讲第一点,由单纯的测试变成项目质量保证工作测... 查看详情

刷题面筋-测开-测试工程师应具备的素质和技能

概述一个好的测试工程师,不仅要基础扎实,对自身的性格、责任心都有非常高的要求。具体:(1)掌握基本的测试基础理论(2)具有的测试经验的积累(3)可熟练阅读需求规格说明书等文档(4)能够及时准确地判断出高危险区在何处.(5... 查看详情

前端工程师应有的软实力,你具备了吗?

...交流沟通。其实前端是一个情商智商都超高的人群,前端工程师是一个互联网公司的灵魂,因为前端的工作内容是最直观的感受,企业对网站等的需求都需要前端来体现,所有前端工程师需要更多的沟通,最终达到企业想要的理... 查看详情

软件测试工程师具备技能

...直在做着APP测试,目前自己的技能离一名优秀的软件测试工程师还是有很大差距的。 按照我的理解,一名优秀的软件测试工程师需要具备的知识: 自动化测试工具:功能测试工具(mongkey、monkeyrunner等)、性能测试工具... 查看详情

如何评测软件工程知识技能水平?

如何才能评价一个软件工程师的专业技术呢,这需要从很多方面来看。1、编程语言能力。  一个良好的软件工程师必须懂得超过一种的编程语言。2、编码能力。  这里说的编码可不是照着书本敲代码,而是能够独立的运用... 查看详情

优秀的web前端开发工程师需要具备的4个条件

...xff0c;很多人也一直在思考如何成为一名优秀的Web前端开发工程师。优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点,其实很难。今天就来和小千一起看一看成为一名Web前端开发工程师需要具备哪... 查看详情

如何评测软件工程知识技能水平

...据本课程的学习以及自身的知识和经验,您认为一个软件工程师的软件工程知识技能水平高低主要体现在哪些方面,请您简要总结一下:   1.具有优秀的学习能力,IT技术更新很快,软件工程师应具备的技能里很重要的一... 查看详情

前端工程师所具备的技能以及顺序

  html      css       css3      javascript      html5   查看详情

python工程师具备哪些技能才能提升求职机率?

...衡量一门技术,那绝对是欠缺眼光的。作为一名Python工程师,究竟具备哪些技能才能提升求职机率?今天小千就和大家简单来说说:Python编程语言基础Python语言基础是入门Python的第一步,Pyt 查看详情

软件测试工程师要具备哪些从业技能?2021修订版本

文章目录前言阶段一、初级软件测试工程师技能储备1、了解计算机以及软件测试相关的基础知识2、常见的Linux命令3、SQL语句4、手工测试用例的编写5、缺陷管理阶段二、中级软件测试工程师技能储备1、[接口测试相关理论基础知... 查看详情

从事电子方面的工作需要都有哪些必备的知识和技能?

...的素质:1.计算机专业技能计算机领域的专业技能是测试工程师应该必备的一项素质,是做好测试工作的前提条件。尽管没有任何IT背景的人也可以从事测试工作,但是一名要想获得更大发展空间或者持久竞争力的测试工程师,... 查看详情

项目经理应具备哪些能力?

一个项目的成功百分百归功于这个项目团队,而失败则百分百责任于项目经理人一人。虽然这看起来有点夸大,但项目经理的角色确实非常重要,项目经理需要具备哪些能力?3个关键技能PMI人才三角®这3个关键技能是PMI人才... 查看详情

如何成为一个优秀的前端工程师?

一、英语。由于大部分优秀的新技术几乎都来源于欧美国家,因此依赖官方的汉化资料往往需要等待很长的时间。等中文资料已经满大街了,同时可能表明这种技术已经过时了。因此流程阅读英文材料必须作为一个优秀程序员的... 查看详情