php进修流程图外包技巧_2022 年前端工程师进修路线图完整版

前端发展越来越快，每天都有数不胜数的技能发布。

想要入门前端却没有一条较为空想的路径？

在这个天下里兜兜转转了良久还是觉得在外围搬砖？

那么你可能须要这份技能学习路线图！

我们把学习前端分为三重境界：

接下来我们就通过先容这三重境界来为你呈现详细的学习路线图。

作甚单机呢？实在便是一个人

你一个人利用 Web 根本技能开拓网站，没有将代码分享给别人（你可能不知道程序天下的代码分享规则），同时只是在本地环境运行你的网站，你乃至对网站如何能把其他人访问到毫无头绪。

这个阶段也是成为一名前端工程师最最根本的一环，大部分初学者还勾留在这个阶段，那么我们来看一下这个阶段须要什么样的技能。

HTML + CSS + JavaScript

没错，实在便是我们耳熟能详的前端三剑客，虽然看起来是最最入门的内容，但是须要理解的内容也不少，就类似我们须要先学 26 个字母，学各种汉字根本，才能写作或者创作诗歌一样。
理解这三门技能大致须要理解那些内容以及有哪些学习资源推举呢？

HTML 代表超文本标记措辞。
它用于前端，为网页供应构造，您可以利用 CSS 设置样式并利用 JavaScript 进行交互。

HTML 的学习大致须要 6 个阶段：

学习根本知识：https://www.w3schools.com/html/html_intro.asp编写语义化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp理解表单与校验：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation遵守一些约定与最佳实践：https://github.com/hail2u/html-best-practices理解可访问性：https://www.w3schools.com/accessibility/index.php理解 SEO 根本：https://developers.google.com/search/docsCSS

CSS 或级联样式表是用于设置任何网站前端样式的措辞。
CSS 是万维网的根本技能，与 HTML 和 JavaScript 并列。

学习根本的 CSS 大致须要 3 个阶段：

学习根本知识：https://www.w3schools.com/css/学会如何布局，个中布局又包括以下知识： Floats 浮动：https://css-tricks.com/all-about-floats/Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_modelCSS 网格：https://cssgridgarden.com/Flex 弹性盒布局：https://flexboxfroggy.com/学习媒体查询知识与 Web 相应式设计：https://www.freecodecamp.org/learn/responsive-web-design/JavaScript

JavaScript 许可您向页面添加交互性。
您可能在网站上看到的常赐教例是滑块、点击交互、弹出窗口等。

学习根本的 JavaScript 大致须要 5 个阶段：

根本的语法：https://javascript.info/学习 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API学习 ES6 与模块化 JavaScript：https://www.javascripttutorial.net/es6/理解进阶知识 Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting 事宜模型：https://javascript.info/bubbling-and-capturing 浸染域： https://developer.mozilla.org/en-US/docs/Glossary/Scopehttps://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/ 原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ 严格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

理解了上面的这些内容，你基本上算是一名根本的前端工程师了，你可以编写各种各样的根本界面，也该当在学习的过程中产出了很多个 DEMO 了。

联机高效写网页

请把稳我们这一小节的关键词：联机、高效。

在这个阶段，你将学会如下知识：

如何以程序员的办法将代码与人分享并能够考试测验参与别人代码的改进高效的编写网站理解网站是如何互通的，你是如何访问的网页的

基于上述的目标，这一阶段的关键技能如下：

Git、GithubInternet、Network 事理开拓框架： JS/HTML：Reatc/Redux、Vue/Vuex 等CSS：Sass、Styled Components、TailwindCSS 等构建：Webpack、Babel、Npm Scripts 等包管理：Yarn、Npm 等开拓规范 CSS：BEM 等JavaScript：Airbnb JavaScript Style Guide 等

Git

Git 是一种版本掌握系统。

版本掌握系统许可您跟踪代码库/文件随韶光的变革。
它们许可您毫无问题地返回到代码库的某个先前版本。
此外，它们还有助于与处理相同代码的人协作——如果您曾经与其他人互助过一个项目，您可能已经知道将其他人的变动复制和合并到您的代码库中的挫败感； 版本掌握系统可以让你摆脱这个问题。

你可以通过下面的链接学习它：

https://www.youtube.com/watch?v=zbKdDsNNOhghttps://www.youtube.com/watch?v=SWYqp7iY_Tchttps://youtu.be/Y9XZQO1n_7c?t=21Github

GitHub 是利用 Git 进行软件开拓和版本掌握的互联网托管供应商。
它供应了 Git 的分布式版本掌握和源代码管理功能，以及它自己的特性。

你可以通过下面的链接学习它：

https://github.com/https://docs.github.com/en/get-started/quickstart/hello-worldInternet

互联网是一个环球性的打算机网络，它们相互连接，通过一组标准化的协议进行通信。

理解互联网是如何事情的？ https://www.vox.com/2014/6/16/18076282/the-internethttp://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm什么是 HTTP？ https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/https://developer.mozilla.org/en-US/docs/Web/HTTP/Overviewhttps://kamranahmed.info/blog/2016/08/13/http-in-depth/

HTTP 是基于 TCP/IP 的运用层通信协议，它标准化了客户端和做事器之间的通信办法。
它定义了如何通过 Internet 要乞降传输内容。

什么是浏览器？它们是如何事情的？ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/https://www.browserstack.com/guide/browser-rendering-enginehttps://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Web 浏览器是一种软件运用程序，它利用户能够通过其图形用户界面访问和显示网页或其他在线内容。

什么是 DNS？它们是如何事情的？ https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/

域名系统 (DNS) 是 Internet 的电话簿。
人类通过域名（如 nytimes.com 或 espn.com）在线访问信息。
Web 浏览器通过 Internet 协议 (IP) 地址进行交互。
DNS 将域名转换为 IP 地址，因此浏览器可以加载 Internet 资源

什么是域名？ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name

名是用于访问网站的唯一且易于影象的地址，例如“google.com”和“facebook.com”。
借助 DNS 系统，用户可以利用域名连接到网站。

什么是主机？ https://www.youtube.com/watch?v=htbY9-yggB0

虚拟主机是一种在线做事，可让您将网站文件发布到互联网上。
因此，任何可以访问互联网的人都可以访问您的网站。

JavaScript 框架

React

https://reactjs.org/https://reactjs.org/tutorial/tutorial.html

React 是最盛行的用于构建用户界面的前端 JavaScript 库。
React 还可以利用 Node 在做事器上渲染，并利用 React Native 为移动运用程序供应动力。

Redux

https://redux.js.org/https://redux.js.org/introduction/getting-started

Redux 是 JavaScript 运用程序的可预测状态容器。
它可以帮助您编写行为同等、在不同环境（客户端、做事器和本机）中运行并且易于测试的运用程序。
最主要的是，它供应了出色的开拓职员体验，例如实时代码编辑与韶光旅行调试器相结合。

当然状态管理方面孔前也有 Mobx 与 Recoil 等有力的竞争者。

上述的是 React 生态，此外 JavaScript 社区还有 Vue 与 Angular 等其他非常有竞争力的框架。

CSS 框架

Styled Components

https://github.com/styled-components/styled-components

利用标记的模板笔墨（最近添加到 JavaScript）和 CSS 的强大功能，styled-components 许可您编写实际的 CSS 代码来设置组件的样式。
它还删除了组件和样式之间的映射——将组件用作低级样式布局！

CSS Modules

http://www.ruanyifeng.com/blog/2016/06/css_modules.html

给 CSS 加入了局部浸染域与模块依赖

Sass

http://www.ruanyifeng.com/blog/2012/06/sass.html

为 CSS 加入编程元素，被称为 CSS 预处理器

TailwindCSS

https://tailwindcss.com/

供一系列赞助类，直接为 HTML 标记添加这些预设的赞助类就可以快速完成一组专业的网站。

构建干系

Webpack

https://webpack.js.org/

Webpack 是一个模块打包器。
它的紧张目的是捆绑 JavaScript 文件以在浏览器中利用，但它也能够转换、捆绑或打包险些任何资源或资产。

除了 Webpack，目前前端圈比较火的还有：

为库打包的更佳选择：Rollup基于浏览器 ESM 的 Bundless 办理方案：Vite

Npm scripts

http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

组合 Yarn、Npm、Pnpm 等包管理一起利用，来便捷的实行一系列脚本

Babel

http://www.ruanyifeng.com/blog/2016/01/babel.html

Babel是一个广泛利用的转码器，可以将ES6代码转为ES5代码，从而在现有环境实行

开拓规范

BEM

https://en.bem.info/https://juejin.cn/post/6844903672162304013

块、元素、润色符方法（常日称为 BEM）是 HTML 和 CSS 中类的盛行命名约定。
由 Yandex 团队开拓，其目标是帮助开拓职员更好地理解给定项目中 HTML 和 CSS 之间的关系。

JavaScript Style Guide

https://github.com/airbnb/javascript

编写 JavaScript 最合理的方法之一

经历上面的一阵狂风乱炸的洗礼之后，你现在已经能够理解如下知识了：

网页是如何运行的如何利用框架（JS、CSS 框架）、当代的前端工程化凑集工具赞助你高效的编写界面在编写代码的时候，遵守干系的规范，写出更随意马虎让其他人读懂的代码将你的代码利用版本掌握系统 Git 来追踪，并通过 Github 将你的代码剖析给其他程序员学习

让网页被更多人利用

如果你想让你的网站被更多人利用，乃至是你要开拓一款产品，完成你的创业目标，那么你可能还须要一些额外的知识赞助你。

在这个阶段你须要理解的知识点如下：

确保你的网站安全：HTTPS、Cors、内容安全策略等确保的运用尽可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library让用户在没有网的情形下也能利用：PWA、Storage、Web Socket、Service Workers 等让你的网站被更快的访问：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern让你的网站能更好的被索引：SSR让你的运用分散在各个平台：React Native、Flutter、Electron让你的网站也能够处理更繁芜的动效：WebAssembly 等

Web 安全

HTTPS

https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-httpshttps://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

HTTPS 是一种在 Web 做事器和浏览器之间发送数据的安全办法。

CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它许可做事器指示除其自身之外的任何来源（域、方案或端口），浏览器应许可从中加载资源。

CSP（内容安全策略）

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSPhttps://developers.google.com/web/fundamentals/security/csp

内容安全策略是一种打算机安全标准，用于防止在受信赖的网页高下文中实行恶意内容而导致的跨站点脚本、点击挟制和其他代码注入攻击。

测试工具

Jest

https://jestjs.io/

Jest 是一个令人愉快的 JavaScript 测试框架，专注于大略性。
它适用于利用以下项目的项目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

https://github.com/testing-library/react-testing-library

完备的 React DOM 的测试赞助库

Cypress

https://www.cypress.io/

对运用进行端到端测试

Enzyme

https://github.com/enzymejs/enzyme

测试 React 的赞助库

类型检讨工具

TypeScript

https://www.typescriptlang.org/https://www.typescriptlang.org/docs/https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript 是一种基于 JavaScript 的强类型编程措辞，可为您供应任何规模的更好的工具。

离线利用

Web 最新的 Progressive Web Apps （PWA）技能，使得 Web 网站可以像 App 一样，拥有离线利用、推送关照等功能。

PWA 紧张包含下面几个部分：

StorageWebSocketsService WorkersLocationNotificationsDevice OrientationPaymentsCredentials

紧张的参考学习资源如下：

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_appshttps://github.com/GoogleChrome/workbox性能干系

Web 性能是加载韶光和运行时的客不雅观丈量和感知用户体验。
Web 性能是指网站加载、变得交互和相应所需的韶光，以及在用户交互期间内容的流畅程度。

性能涉及到打算、衡量与改进性能，紧张涉及下面这些知识点：

PRPL PatternRAIL ModelPerformance MetricsLighthouseDevtools

紧张的参考学习资源如下：

https://developer.mozilla.org/zh-CN/docs/Web/Performancehttps://web.dev/SEO 干系

SEO（Search Engine Optimization）—— 搜索引擎优化，目的是帮助我们的网站在Google或者Baidu搜索的时候排名会提升靠前。

Next.js

https://nextjs.org/https://nextjs.org/docs/getting-startedhttps://www.freecodecamp.org/news/the-next-js-handbook/

Next.js 是一个构建在 Node.js 之上的开源开拓框架，支持基于 React 的 Web 运用程序功能，例如做事器端渲染和天生静态网站。

多平台

React Native

https://reactnative.cn/https://github.com/facebook/react-native

利用 React 来开拓移动端运用，如 Android 或 iOS。

Flutter

https://flutter.cn/https://flutter-io.cn/

Flutter 为运用开拓带来了改造： 只要一套代码库（Dart），即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美运用

Electron

https://www.electronjs.org/https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

Electron（原名为Atom Shell）是GitHub开拓的一个开源框架。
它通过利用Node.js（作为后端）和Chromium的渲染引擎（作为前端）完成跨平台的桌面GUI运用程序的开拓。
Electron现已被多个开源Web运用程序用于前端与后真个开拓，著名项目包括GitHub的Atom和微软的Visual Studio Code。

高性能运用

WebAssembly

https://developer.mozilla.org/zh-CN/docs/WebAssemblyhttps://juejin.cn/post/7035991254257106958

WebAssembly是一种新的编码办法，可以在当代的网络浏览器中运行 － 它是一种低级的类汇编措辞，具有紧凑的二进制格式，可以靠近原生的性能运行，并为诸如C / C ++等措辞供应一个编译目标，以便它们可以在Web上运行。
它也被设计为可以与JavaScript共存，许可两者一起事情。

当你学完了这个部分的内容，基本上已经是算是一位高阶的前端工程师了，能够在任何大厂胜任各种研发事情，当然能够坚持到这里不随意马虎，须要持续的努力，加油

写在末了

本文从三个维度切入了在 2022 年作为一名前端工程师须要学习的内容，以及给出了详细的学习路线图和对应的学习资源，当然有些资源都是国外的，须要自备科学上网工具，后续会基于这条学习路线图进行完善，并且补充详细的中文学习资源，敬请期待。

❤️/ 感谢支持 /

以上便是本次分享的全部内容，希望对你有所帮助^_^

喜好的话别忘了 分享、点赞、收藏 三连哦~

欢迎关注"大众年夜众号 程序员巴士，来自字节、虾皮、招银的三端兄弟，分享编程履历、技能干货与职业方案，助你少走弯路进大厂。

标签：httpsJavaScript