乐趣区

关于javascript:2022-年前端工程师学习路线图完整版

jiezi

前端倒退越来越快，每天都有不可胜数的技术公布。

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

在这个世界里兜兜转转了很久还是感觉在外围搬砖？

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

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

  • 单机写根底网页

<!—->

  • 联机高效写网页

<!—->

  • 让网页可能被更多人应用

接下来咱们就通过介绍这三重境界来为你出现具体的学习路线图。

单机写根底网页

何为单机呢？其实就是一个人 🌚

你一个人应用 Web 根底技术开发网站，没有将代码分享给他人（你可能不晓得程序世界的代码分享规定），同时只是在本地环境运行你的网站，你甚至对网站如何能把其他人拜访到毫无脉络。

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

HTML + CSS + JavaScript

没错，其实就是咱们耳熟能详的前端三剑客，尽管看起来是最最入门的内容，然而须要理解的内容也不少，就相似咱们须要先学 26 个字母，学各种汉字根底，能力写作或者创作诗歌一样。理解这三门技术大抵须要理解那些内容以及有哪些学习资源举荐呢？

HTML

HTML 代表超文本标记语言。它用于前端，为网页提供构造，您能够应用 CSS 设置款式并应用 JavaScript 进行交互。

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

  • 学习基础知识：https://www.w3schools.com/htm…

<!—->

  • 编写语义化的 HTML：https://www.w3schools.com/htm…

<!—->

  • 理解表单与校验：https://developer.mozilla.org…

<!—->

  • 恪守一些约定与最佳实际：https://github.com/hail2u/htm…

<!—->

  • 理解可拜访性：https://www.w3schools.com/acc…

<!—->

  • 理解 SEO 根底：https://developers.google.com…

CSS

CSS 或级联样式表是用于设置任何网站前端款式的语言。CSS 是万维网的根底技术，与 HTML 和 JavaScript 并列。

学习根底的 CSS 大抵须要 3 个阶段：

  • 学习基础知识：https://www.w3schools.com/css/

<!—->

  • 学会如何布局，其中布局又包含以下常识：

    • Floats 浮动：https://css-tricks.com/all-ab…
    • Positioning 定位：https://css-tricks.com/absolu…
    • Display 展现：https://www.freecodecamp.org/…
    • 盒子模型：https://developer.mozilla.org…
    • CSS 网格：https://cssgridgarden.com/
    • Flex 弹性盒布局：https://flexboxfroggy.com/

<!—->

  • 学习媒体查问常识与 Web 响应式设计：https://www.freecodecamp.org/…

JavaScript

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

学习根底的 JavaScript 大抵须要 5 个阶段：

  • 根底的语法：https://javascript.info/

<!—->

  • 学习 DOM 操作：https://www.freecodecamp.org/…

<!—->

  • 学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org…

<!—->

  • 学习 ES6 与模块化 JavaScript：https://www.javascripttutoria…

<!—->

  • 了解进阶常识

    • Hositing：https://developer.mozilla.org…
    • 事件模型：https://javascript.info/bubbl…

    • 作用域：

      • https://developer.mozilla.org…
      • https://www.freecodecamp.org/…
    • 原型：https://developer.mozilla.org…
    • Shadow DOM：https://www.youtube.com/watch…
    • 严格模式等：https://developer.mozilla.org…

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

联机高效写网页

请留神咱们这一大节的关键词：联机、高效。

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

  • 如何以程序员的形式将代码与人分享并可能尝试参加他人代码的改良

<!—->

  • 高效的编写网站

<!—->

  • 了解网站是如何互通的，你是如何拜访的网页的

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

  • Git、Github

<!—->

  • Internet、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…

<!—->

  • https://www.youtube.com/watch…

<!—->

  • https://youtu.be/Y9XZQO1n_7c?…

Github

GitHub 是应用 Git 进行软件开发和版本控制的互联网托管提供商。它提供了 Git 的分布式版本控制和源代码治理性能，以及它本人的个性。

你能够通过上面的链接学习它：

  • https://github.com/

<!—->

  • https://docs.github.com/en/ge…

Internet

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

  • 理解互联网是如何工作的？

    • https://www.vox.com/2014/6/16…
    • http://web.stanford.edu/class…

<!—->

  • 什么是 HTTP？

    • https://www.cloudflare.com/en…
    • https://developer.mozilla.org…
    • https://kamranahmed.info/blog…

HTTP 是基于 TCP/IP 的应用层通信协议，它标准化了客户端和服务器之间的通信形式。它定义了如何通过 Internet 申请和传输内容。

  • 什么是浏览器？它们是如何工作的？

    • https://www.html5rocks.com/en…
    • https://www.browserstack.com/…
    • https://developer.mozilla.org…

Web 浏览器是一种软件应用程序，它使用户可能通过其图形用户界面拜访和显示网页或其余在线内容。

  • 什么是 DNS？它们是如何工作的？

    • https://www.cloudflare.com/en…

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

  • 什么是域名？

    • https://developer.mozilla.org…

名是用于拜访网站的惟一且易于记忆的地址，例如“google.com”和“facebook.com”。借助 DNS 零碎，用户能够应用域名连贯到网站。

  • 什么是主机？

    • https://www.youtube.com/watch…

虚拟主机是一种在线服务，可让您将网站文件公布到互联网上。因而，任何能够拜访互联网的人都能够拜访您的网站。

JavaScript 框架

React

  • https://reactjs.org/

<!—->

  • https://reactjs.org/tutorial/…

React 是最风行的用于构建用户界面的前端 JavaScript 库。React 还能够应用 Node 在服务器上渲染，并应用 React Native 为挪动应用程序提供能源。

Redux

  • https://redux.js.org/

<!—->

  • https://redux.js.org/introduc…

Redux 是 JavaScript 应用程序的可预测状态容器。它能够帮忙您编写行为统一、在不同环境（客户端、服务器和本机）中运行并且易于测试的应用程序。最重要的是，它提供了杰出的开发人员体验，例如实时代码编辑与工夫旅行调试器相结合。

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

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

CSS 框架

Styled Components

  • https://github.com/styled-com…

利用标记的模板文字（最近增加到 JavaScript）和 CSS 的弱小性能，styled-components 容许您编写理论的 CSS 代码来设置组件的款式。它还删除了组件和款式之间的映射——将组件用作低级款式结构！

CSS Modules

  • http://www.ruanyifeng.com/blo…

给 CSS 退出了部分作用域与模块依赖

Sass

  • http://www.ruanyifeng.com/blo…

为 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/blo…

组合 Yarn、Npm、Pnpm 等包治理一起应用，来便捷的执行一系列脚本

Babel

  • http://www.ruanyifeng.com/blo…

Babel 是一个宽泛应用的转码器，能够将 ES6 代码转为 ES5 代码，从而在现有环境执行

开发标准

BEM

  • https://en.bem.info/

<!—->

  • https://juejin.cn/post/684490…

块、元素、修饰符办法（通常称为 BEM）是 HTML 和 CSS 中类的风行命名约定。由 Yandex 团队开发，其指标是帮忙开发人员更好地了解给定我的项目中 HTML 和 CSS 之间的关系。

JavaScript Style Guide

  • https://github.com/airbnb/jav…

编写 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…

<!—->

  • https://developers.google.com…

<!—->

  • https://developers.google.com…

HTTPS 是一种在 Web 服务器和浏览器之间发送数据的平安形式。

CORS

  • https://developer.mozilla.org…

跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它容许服务器批示除其本身之外的任何起源（域、计划或端口），浏览器应容许从中加载资源。

CSP（内容安全策略）

  • https://developer.mozilla.org…

<!—->

  • https://developers.google.com…

内容安全策略是一种计算机平安规范，用于避免在受信赖的网页上下文中执行歹意内容而导致的跨站点脚本、点击劫持和其余代码注入攻打。

测试工具

Jest

  • https://jestjs.io/

Jest 是一个令人欢快的 JavaScript 测试框架，专一于简略性。它实用于应用以下我的项目的我的项目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

  • https://github.com/testing-li…

齐备的 React DOM 的测试辅助库

Cypress

  • https://www.cypress.io/

对利用进行端到端测试

Enzyme

  • https://github.com/enzymejs/e…

测试 React 的辅助库

类型查看工具

TypeScript

  • https://www.typescriptlang.org/

<!—->

  • https://www.typescriptlang.or…

<!—->

  • https://www.typescriptlang.or…

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

离线应用

Web 最新的 Progressive Web Apps（PWA）技术，使得 Web 网站能够像 App 一样，领有离线应用、推送告诉等性能。

PWA 次要蕴含上面几个局部：

  • Storage

<!—->

  • WebSockets

<!—->

  • Service Workers

<!—->

  • Location

<!—->

  • Notifications

<!—->

  • Device Orientation

<!—->

  • Payments

<!—->

  • Credentials

次要的参考学习资源如下：

  • https://developer.mozilla.org…

<!—->

  • https://github.com/GoogleChro…

性能相干

Web 性能是加载工夫和运行时的主观测量和感知用户体验。Web 性能是指网站加载、变得交互和响应所需的工夫，以及在用户交互期间内容的晦涩水平。

性能波及到计算、掂量与改良性能，次要波及上面这些知识点：

  • PRPL Pattern

<!—->

  • RAIL Model

<!—->

  • Performance Metrics

<!—->

  • Lighthouse

<!—->

  • Devtools

次要的参考学习资源如下：

  • https://developer.mozilla.org…

<!—->

  • https://web.dev/

SEO 相干

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

Next.js

  • https://nextjs.org/

<!—->

  • https://nextjs.org/docs/getti…

<!—->

  • https://www.freecodecamp.org/…

Next.js 是一个构建在 Node.js 之上的开源开发框架，反对基于 React 的 Web 应用程序性能，例如服务器端渲染和生成动态网站。

多平台

React Native

  • https://reactnative.cn/

<!—->

  • https://github.com/facebook/r…

应用 React 来开发挪动端利用，如 Android 或 iOS。

Flutter

  • https://flutter.cn/

<!—->

  • https://flutter-io.cn/

Flutter 为利用开发带来了变革：只有一套代码库（Dart），即可构建、测试和公布实用于挪动、Web、桌面和嵌入式平台的精美利用

Electron

  • https://www.electronjs.org/

<!—->

  • https://wizardforcel.gitbooks…

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

高性能利用

WebAssembly

  • https://developer.mozilla.org…

<!—->

  • https://juejin.cn/post/703599…

WebAssembly 是一种新的编码方式，能够在古代的网络浏览器中运行 - 它是一种低级的类汇编语言，具备紧凑的二进制格局，能够靠近原生的性能运行，并为诸如 C / C ++ 等语言提供一个编译指标，以便它们能够在 Web 上运行。它也被设计为能够与 JavaScript 共存，容许两者一起工作。

当你学完了这个局部的内容，基本上曾经是算是一位高阶的前端工程师了，可能在任何大厂胜任各种研发工作，当然可能保持到这里不容易，须要继续的致力，加油💪

写在最初

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

❤️/ 感激反对 /

以上便是本次分享的全部内容，心愿对你有所帮忙 ^_^

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

欢送关注公众号 程序员巴士 ，来自字节、虾皮、招银的三端兄弟，分享编程教训、技术干货与职业规划，助你少走弯路进大厂。

退出移动版