即将毕业的学生该如何学习WEB前端技术准备校招？

不知不觉一年已经过了大半时间, 即将要开启新学年之际, 很多同学都开始关注起了秋招的相关事宜, 今天就通过这篇文章向大家作详细介绍, 如何在 autumn campus recruitment 中选择前端开发岗位并做好充分准备.

众所周知, 校招聘主要有秋季招聘（秋招）和春季招聘（春招）两种形式. 在秋期通常会提供较多的优质就业岗位, 优质企业通常会在秋季招聘期间提供超过一半的职位空缺. 仅约30%左右的职位会在春季招聘和社会招聘阶段填补. 另外, 许多学生由于考研或公务员考试等原因错过了秋季招聘机会. 随着研究生考试及公务员考试的结束, 这些因失败而错失佳机的学生将会转向春季招聘渠道. 因此, 不论是从岗位数量还是竞争压力的角度来看, 建议各位同学一定不要错过秋季招聘.

部分同学对自身所学专业不感兴趣；那些希望转向前端开发的同学，在秋招过后要积极寻找春季校园招聘机会；相比而言，在社招中求职难度较大。

根据自身情况的不同，我把人群分为两部分。

第一部分：985、211科班出身，想进大厂的同学。

对于这部分同学而言,应投入更多时间和精力于计算机相关知识的学习中.大公司更看重你的可塑性和计算机科学素养.掌握算法设计与应用实践,深入理解面向对象设计模式与系统架构优化,扎实掌握编译原理与程序结构,打好数学图论与线性代数的基础.不必将已掌握的框架系统整理成简历,由于具备扎实的专业基础,工程设计理念同样出色.学习一个框架到实际项目应用通常能快速上手.

各大企业在往年校园招聘面试中提供的题目，在网上搜索通常都能找到。从构成来看，这些题目主要由80%的基础知识部分和20%的专业技术部分组成。其中涉及的操作系统原理、计算机网络基础以及数据结构与算法等内容属于基础知识范畴。在专业性方面，则涉及前端开发基础、主流框架应用以及浏览器内部机制等知识点。

所以 针对这部分同学 建议 就是 除了提升编程能力之外 不得不重视计算机基础 建议大家多练习代码 多在线上平台进行训练 并且目标明确地完成至少100道题目以上 同时 如果有机会 在GitHub上参与一些大型企业提供的开源项目将会更加有益

在学习的各个阶段,不妨加入一些志同道合的学习者群体. 文末有一个WEB前端学习群, 群文件中有我整理的学习教程、PDF书籍、面试题、简历模板以及各种开发工具等资源. 良好的学习氛围也非常好, 无论是刚开始接触编程的小白, 还是已经从事软件开发工作的从业者, 在这个群里都能获得帮助. 遇到问题很快就能得到解答. 我希望把这个群打造成一个专业的前端圈子, 以后有更好就业机会的时候也可以互相推荐. 如果你感兴趣, 可以点击文末的卡片加入我们

第二部分：普通本科专科以及非科班走前端方向的同学。

对于这一批学生而言，在求职初期进入大型企业（大厂）的可能性较低；但并非完全没有机会。若以成为该领域（前端工程师）的核心人才为目标，并且持续深入地学习相关技术，则同样具备进入顶尖公司的潜力。

在国内的许多普通高校中存在较弱的学习氛围，在这种情况下很多同学直到临近毕业才开始认识到技术的重要性；因此，在这种情况下大部分新 grad 会选择进入普通的中小型软件开发企业工作；由于这类企业通常注重能够快速上手并立即参与实际工作的人员需求，并且更加重视候选人的编程技能与项目经验积累；因此，在这一群体中应该给予他们更多时间和资源去强化前端专业知识储备；等到未来有机会时再系统地补充计算机基础知识

普通中小公司面试通常侧重于考察前端开发者的综合能力与实践经验。通常由资深的前端面试官提出相关问题来评估你对该领域的掌握程度是否稳固，在了解了你的个人简历后，并根据你的项目经历提一些深入的问题来考察你对项目中所涉及的技术体系掌握情况以及应对实际开发挑战的能力。

最后对2021年web前端的学习内容进行了总结。然而由于内容可能过于繁杂但从提升竞争力的角度出发 我力求涵盖大前端全栈工程师所需的知识点 并按照这个标准进行学习安排。按照我的标准进行学习后 最低可达到15K的就业薪资水平。配套的资料可能会因为网盘链接问题需要进行相应调整 点击下方链接加入我的Web前端开发群 免费分享给大家。

提供零成本的大前端全套系统课程

一、HTML/CSS3 部分

前端开发概述、VS Code开发环境配置、Markdown编辑器操作指南、网页浏览器运行环境配置、DOM标签应用基础、XML规范与元数据管理

语义解析、选择机制、权重系数与优先级排序、匹配逻辑、浮动样式与清除样式、前向推断机制（BFC）、类名组合策略、前端SEO优化策略、定位逻辑、叠加策略

模拟选择器（模拟）、框模型（框模型）、代码准则（代码规范）、性能调优（性能优化）、显示机制（渲染原理）、CSS Sprites （图像动画）、icon font字体图标（iconfont字体图标）、布局规划（布局思路）、布局套路（布局定式）

css3动画效果丰富多样，
css3选择属性提供了强大的筛选功能，
css3平滑过渡增强了界面交互体验，
灵活布局使页面结构更加合理，
背景渐变为设计提供更多色彩自由，
css3实用效果值得深入学习，
立体效果模块提升了视觉层次感，
动态变量应用广泛且灵活，
在网页设计中常见单位包括em/px.Rem/Vw。

企业内部多页面项目实战（非仿站）有完整PSD与切图

二、JavaScript 部分

JavaScript概念、基础认知、发展历史、应用范围、优缺点。

ECMAScript

语言概述

数组属性赋值方式、数据实体、扩展数据模型、数据特性、存储策略、深层复制、实体应用场景、创建模式、构造方法、实例引用规则、实例继承体系、实例引用方向

多态继承是一种重要的设计模式；对像封装是实现信息隐蔽性的重要手段；this指针是一个特殊的变量用于传递调用上下文；this指针始终指向所处对象的内存地址位置；JavaScript提供了一套强大的数据处理机制；垃圾回收机制是一种有效的内存管理策略；闭包原理不仅具有理论价值而且在实际开发中有广泛的应用前景；调试方法论是程序开发中不可或缺的重要环节；Web浏览器控制台工具的应用为开发者提供了便捷的功能集合；面向对象编程是一种以类为中心的程序设计思想；函数式编程则是一种以计算过程转换为目标的编程范式

无副作用纯计算方式；无状态递归调用的计算方式；事件处理机制；功能组合型；缓存机制设计者；参数分解技术专家；部分应用策略专家；去抖动和限流技术专家；IIFE构造器或自我执行初始化程序专家；模块化设计模式专家

数学实体与高级数组操作（包括reduce函数用于聚合数据, filter用于筛选数据, map用于变换数据, every用于判断所有元素是否符合条件, some用于判断至少一个元素是否符合条件, forEach用于执行逐项操作, find用于定位第一个符合条件的数据,.findIndex用于获取符合条件元素的索引位置, include用于包含指定元素）等

该类的核心操作包括entires、defineProperty、freeze、fromEntries、assign、keys和create等基本功能

it utilizes bind, call, and apply methods to address offsets, synchronize, and de-synchronize processes simultaneously. Furthermore, it employs closure-based modularization for data deformation processing while ensuring efficient performance handling.

DOM/BOM

DOM对象及其属性管理相关的内容包括节点及其遍历树的相关知识等信息。此外还包括对CSS选择器的支持以及相关的增删改查操作等技术要点。对于CSS样式表的操作功能也需要掌握详细的操作流程和具体实现方法等细节内容。另外对于元素的位置定位以及相对偏移量的获取方法也需要深入理解并能够熟练运用这些知识点在实际项目中加以应用等基本技能都需要掌握到位

Event对象和定时器/监听器/事件委托/代理/分流/冒泡等核心组件共同构成了复杂的行为处理架构，在前端开发中被广泛应用于状态管理与用户体验优化方面

拖拽组件（拖拽模组）、碰撞检测模块（碰撞检测）、距离判定逻辑（距离判断）、三角运算（三角函数）、方向判定逻辑（方向判断）、运动处理架构（运动框架）、弹性动画效果（弹性运动）、重力加速度计算（重力加速度）、DOM树结构（DOM树）、AISOM模型中的CSSOM树结构（CSSOM树）、渲染解析模块（渲染解析）、初始化流程阶段（加载）、AISOM模型中的回流机制（回流）、AISOM模型中的重绘流程阶段（重绘）；AISOM模型中浏览器线程与阻塞机制的处理流程阶段

深入理解BOM的基本概念及其在实际项目中的应用；掌握window对象的创建与操作方法；熟悉navigator功能的开发流程；了解历史记录管理的技术要点；掌握屏幕管理流程的具体实现；学会位置信息处理的关键技术；理解spa技术框架的核心原理及其优势；研究本地参数传递机制并探索其应用价值；分析日期对象的应用场景并设计相应的封装方案；探讨随机封装策略的设计与优化方法；完成DOM分片容器的优化方案设计与实现

JS业务应用扩展

JavaScript对象, 数据解码, JavaScript方法, DOM渲染, 缓存延迟加载, 正则表达式/正则表达式对象, 字符集合, 语法糖, 正向匹配, 贪婪匹配, 字符串替换方法, 分组情况与非分组情况, 测试规则/测试函数, 匹配规则/执行操作

正则库打包方案, 表单验证, 图片缓存懒加载, 自定义滚动组件打包, 多场景轮播功能(包含循环播放, 视差效果以及旋转 animations), 选项卡切换支持动态跳转, 多级跳转结构设计, 吸顶式设计元素, 拖拽式跳转条功能模块

JavaScript编码风格指南、console应用技巧

ECMAScript5 --- ECMAScript9扩展

版本解析与适用场景分析

新增API功能模块
增项功能模块
增项功能模块
继承属性
对象修饰机制
代理拦截机制设计
链式数据结构优化设计
空值处理逻辑
泡泡龙面向对象游戏开发

三、HTML5 / 移动端开发 部分

HTML5标签与API

HTML5概念、定义、新增特性、DTD对比、新增H5标签、新增语义化H5标签、H5表单

H5拖拽事件支持视频（Video）、音频（Audio）、全屏（Fullscreen）操作，并提供来自FileReader提供的文件流（FileFlow）以及Blob类型的的对象（Blob对象）。同时包含Session存储（sessionStorage）和LocalStorage存储（localStorage）。

网络状况、页面显示周期、网页状态监控、地理位置管理、Canvas画布（指用于展示地图的元素）、Worker线程组（指用于执行后台任务的小组件）、桌面通知机制

播放器开发 canvas交互特效开发

移动端适配/事件

移动设备屏幕适配相关概念中包含了多个关键术语的详细解释。其中涵盖了屏幕尺寸及分辨率计算原理以及图像质量评估标准等内容。具体来说包括PPI和DPI的计算方法以及相关参数之间的关系模型研究。此外还涉及到了基于不同设备特点的像素处理算法设计以及显示效果优化策略研究等技术内容。

视口适应方案（Meta view）缩放配置、获取屏幕窗口尺寸API、基于媒体查询的rem兼容性配置；以及vw和vh方向上的兼容性设置

移动端适配手当、灵活分辨率（FR）当案、vh/vw配置策略、多模态当案系统、超清当案系统、字体缩放优化措 施、边缘模糊处理措 施以及亚像素线条处理策略

高清晰度图像适配

Meta权限控制、兼容性优化措施、iOS系统中的触控区域回退功能修复及输入框调整问题、空格键功能异常处理、全角首字母大写设置异常、滑动操作响应迟缓的优化调整等

终端样式美化与访问判断

触控事件封装管理模块、点击响应优化、快速点击功能实现、避免缩放的显示设置

常用类库/工具

jquery提供了：元素选择功能（通过jQuery selector API实现）、基本操作集合（增删和更新）、事件处理能力（包括DOM和|(事件处理）、定位获取（用于确定元素的位置信息）、动态效果（实现元素的动画过渡效果）、高级功能模块（包含复杂特效应用）等核心组件

zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

核心UI组件库：包括但不限于：layer UI框架（LW）、EASY UI组件库（LY）、Bootstrap框架（BS）；组件化设计；组件调优方法论；技术文档分析；实际案例分析；表单管理模块。

iScroll、touchjs等移动端事件库使用

swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

art-template: 模板引擎 模板语法、渲染方法、原生模板引擎实现

CSS预处理： Sass及Less使用Stylus深入学习，并掌握相关的语法体系以及编程概念如Minxin, 预处理函数的学习与应用, 理解并掌握继承与嵌套结构的相关知识.

vscode高级插件与配置 liveserver sass

模板化应用 、预处理应用

date-picker移动端原生组件开发

需求分析、业务规则、技术栈选型、文件输出规则、技术分析

MVC模型概念与设计、业务逻辑分类

view层适配方案 原型布局搭建 模板化生成

工具函数开发、面向对象式业务设计 功能类日期对象开发

交互业务封装 模块对接 优化设计 面向对象高级程序设计

四、Nodejs与工程化开发 部分

Node原生基础

Node.js基础概念、npm命令、V8引擎概念以及JavaScript模块化（包括CMD AMD UMD）、EventLoop事件循环与同步异步之间的关系是怎样的？阻塞与非阻塞的任务队列如何运作？宏/微任务的处理机制有哪些特点？

Node.js基础概念包括但不限于NPM命令的使用技巧以及V8引擎的概念解析。在JavaScript模块化的实现中, 我们主要关注的是CMD AMD UMD这几个核心特性。同时, EventLoop事件循环的优化策略也是提升应用性能的重要环节。对于同步与异步操作的理解, 我们还需要深入掌握阻塞与非阻塞的区别及其在实际开发中的应用场景。此外, 宏任务与微任务的并行执行机制也是提高程序效率的关键点之一

Node.js内建组件；基础组件；内置接口；事件驱动机制；路径处理组件；缓冲操作；URL处理接口；HTTP处理接口；数据流

Node原生封装HTTP与文件服务器

Node框架

基于Express框架的应用中使用中间件组件完成功能扩展，在项目中主要涉及的核心组件包括路由配置设置与模板生成器等部分；同时需要关注数据逻辑脚本的编写与运行效率优化问题；其中Router核心模块负责实现复杂的路由匹配算法设计；此外还需要特别注意CORS配置参数设置以确保跨域请求的安全性；对于错误处理机制的优化也是提升系统稳定性的重要环节；同时校验封装模块的设计能够有效提升数据验证效率；最后 nodemon 管理工具能够帮助实现对应用运行状态的实时监控与分析功能

Morgan日志管理与分析系统中包含以下功能：支持完整的日志记录与查询功能；提供高效的正则表达式匹配结果获取接口；具备完整的中间件模块构建能力；支持bodyParse等第三方中间件功能集成应用；实现文件传输与下载操作管理；具备数据流分割处理能力

webpack工程化构建

工程化理念阐述了将系统整体优化以提升效率的原则；介绍了用于构建复杂软件系统的工程化工具；讲解了Webpack的基本概念及其在现代前端开发中的重要性；详细描述了Webpack的配置参数及其在实际项目中的应用；探讨了插件模块的设计与实现；分析了加载器组件的功能及其在分布式开发中的作用；阐述了项目入口点与出口点的配置策略；讨论了模块化的组织架构对项目可维护性的影响；研究了依赖项管理对系统性能优化的关键作用；介绍了Dev Server作为Web应用开发的核心组件。

目标对象 、文件分割 、构建打包 、热处理 、包管理 、性能优化 、测试流程处理 以及相关的工具等

前后端数据交互

HTTP通信机制包括以下几个关键组成部分：第一部分是基于HTTP的标准定义了资源的访问与应答流程；第二部分涉及 MIME格式用于实现多媒体信息的编码与传输；第三部分详细描述了基于URI路径标识符的数据传输机制；第四部分聚焦于网络层协议中的端口映射与数据解析技术；第五部分阐述了基于端到端连接建立机制的数据传输策略；第六部分讨论了基于数据流量管理的网络控制理论；第七部分深入分析了基于数据包捕获与监控流程的网络性能优化方法；第八部分研究了基于TCP/IP协议中连接建立机制的数据同步问题；第九部分探讨了基于业务运行框架的网络服务模型设计原则。

代理、缓存、网关、隧道等概念、method与请求头分类

基础XMLHTTPRequest对象方法属性、方法、ajax异步交互 、同源策略原理

JS原生AJAX框架集成、JQueryAJAX集成方式、基于JSONP的跨域通信机制、基于HTTP Origin Restriction的跨域通信方法、带有Cookie头和Cross-Origin-Policy配置的跨域管理、负载均衡服务器配置下的跨区域数据传输优化

cookie验证与通信 、axios库的使用 代理、封装、拦截、合并、二次封装

通信加密策略、数据对称加密、数据非对称加密、RSA加密实践、MD5加密实践

登录注册及鉴权流程、Alice认证、Token验证方案、JSON Web Token验证流程、会话状态管理模块、OAuth授权方案

RESTful接口设计

RESTful设计理念、状态码的设计规范、服务器响应的规则和格式、前后端接口协议的设计与制定、传统RESTful方案的优化提升

API设计方案, 资源定位策略, JSON格式规范, 协议条款描述, 唯一标识机制, 缓存优化接口设计, HTTP头参数配置方法, 文档结构规范, 模块独立性策略, 数据一致性要求, 代码复用机制设计, 系统稳定性保障措施

数据库存储

MongoDB核心原理为非关系型数据库体系结构提供了理论支持；非关系型数据库与关系型数据库对比分析为数据存储领域带来了新的思路；CAP定理的详细阐述揭示了分布式系统的设计局限性；传统关系型数据库体系结构为数据完整性提供了严格保障；MongoDB 语法结构解析帮助开发者更好地掌握文档查询语言；操作指令是实现特定功能的基础模块；实时监控系统及其图形界面设计提升了运维效率；MongoDB 驱动程序开发为第三方应用提供了稳定支持；AWS Mongoose应用程序开发展示了框架在实际项目中的应用价值

数据库初始化；集合的增删改查；文档的增删改查；数据库的数据检索；高级的数据检索操作；通过通道进行的数据检索；多字段筛选；逆向筛选；索引优化；aggregate数据处理与管道集成；

该系统实现了完整的数据有效性验证逻辑。
系统采用基于标准的表单数据源设计。
网络层中间件处理被严格隔离并独立运行。
错误处理相关的查询功能进行了模块化封装。

博客后台项目实战

数据库架构设计（DBMS）、基于服务层的路由配置（SLR）、API接口开发与服务化部署（SAP）、通信协议封装与消息传递通道搭建（MessageBus）、账号登录流程优化（LoginFlow）、多层级路径规划与导航逻辑优化（RouteManager）、前端动态路由配置与场景处理（FrontendRouter）、访问控制策略开发（PermissionManager）、用户信息库构建（UserPool）、分类策略制定（ClassifyStrategy）以及标签应用规划（LabelManagement）

、文章管理、模块化功能封装、校验库封装、promise链式行为封装、

该系统实现了高效的异步机制在任务调度中的具体执行流程；基于Spring Boot框架构建的单页面应用基础功能开发；系统内核中的自主行为管理核心逻辑开发；采用模块化的开发策略进行前端代码划分与整合，并通过预处理阶段优化数据格式；同时遵循工程化的开发规范进行前端功能设计与集成。

组件化封装

基于工程化的分块式架构实现全栈原生组件开发能力

基于工程化的分块式架构实现全栈原生组件开发能力

五、Vue框架部分

vue基础

vue开发前期准备阶段通常包括技术选型及团队组建等重要环节。
开发工具及插件配置管理是实现高效开发的关键要素。
MVC MVP MVVM等架构设计理念在现代前端应用中占据重要地位。
基于原始JavaScript构建MVVM核心框架是确保应用可扩展性的基础工作。
在Vue框架下对不同设计模式进行深入分析有助于提升应用性能。
理解组件化的实现原理对于构建高质量前端应用至关重要。
遵循组件化架构设计原则能够有效提升代码复用性和维护性。

基于数据的双向关联机制、虚拟DOM的基本理论框架、指定模板语言的语法规则、条件判断及列表管理策略、动态数组状态监控系统、实时属性计算规则集、事件响应机制设计框架、表单控制逻辑辅助工具及事件监听器构建方案、多条件筛选模块开发规范

watch computed filters 对比分析, 实现 Component-First Approach, 引入 Dynamic Components, 建立 Component Communication, 实现 Advanced Component Communication, 设计插槽机制, 应用 Vue Animation Effects, 使用 Instance Objects, 实现 set方法, 调用 get方法, 处理 nextTick 事件流程, 开发 Vue Plug-in Development

vue工程化

Babel、webpack配置vue、vue单文件组件、vue-cli、工程平台处理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset、静态资源处理、

环境变量与膜还是切换、工程化部署、工程构建

vue Router

Vue Router 概念包括嵌套路由配置（Nested Route Configuration）、详细的路由视图定义（Comprehensive Route View Definitions）、动态 routing机制（Dynamic Routing Mechanisms）、精确的路由匹配逻辑（Precise Route Matching Logic）、编程式的路径处理（Programmatic Path Handling）、历史记录（History Records）、哈希模式管理（Hash Mode Management）、命名视图策略（Naming View Strategy）、重定向与别名处理（Redirect and Alias Handling）、导航保护机制（Navigation Protection Mechanism）、复杂的路由元信息管理（Advanced Router Metadata Management）以及滑动与缓存加载策略（Sliding and Caching Loading Strategy）。这些核心组件共同构成了完整的编程式网页导航体系，并且能够有效应对复杂的网络请求和数据访问需求

vuex

Vuex的核心概念与EventBus的比较分析涉及State存储单元的实现方式及相关的存储机制（state）、数据获取方法（getter）、数据变更操作（mutation）、动作处理逻辑（action）以及模块化设计思路（moudule）。

基于Vuex的辅助函数及其API接口，在Vuex环境下进行功能配置的选择，针对Vuex的模块化设计原则及实现技巧，请问您了解采用对象样式的方式进行数据提交策略吗？提升代码复用性及优化开发流程的方法

vue项目实战

Vue博客项目实战：移动端与桌面结合；elementUI:Vue框架的最佳选择；vanth元素:跨平台组件库；websocket聊天室:实时通信模块；虚拟人偶:智能交互展示；vueScroll插件:功能强大的滚动效果扩展；store数据库:高效的数据存储解决方案；qs分页组件:快速实现分页功能；nprogress进度条组件:直观展示进度的状态；editor插件:提供丰富的编辑功能

文章归类

文章的富文本编辑功能模块包含点赞互动反馈机制以及内容分发策略；通过访问数据交互接口实现评论功能；采用组件化封装策略实现模块化复用方案；结合组件混合式架构提升开发效率；同时注重复杂组件构建技术的研究；并完善跨层级通信机制以提高系统性能；在Vue框架下实现了对原生DOM行为的高效处理；并设计了完整的异常处理流程以保障应用稳定性

更新或重新设置Vue的数据响应机制；调整或修改用户的个人信息资料；实现或更新用户的头像 avatar；整合或封装通知组件以整合通知系统；应用PostCSS处理或编译CSS代码以优化页面样式；优化项目的打包流程以提高打包效率