前端大纲

349 阅读4分钟

本文只是按照某种拆解,将各个知识点以目录的形式展现在这里,以便对前端有个全局性的认知。

每一个目录都有对应链接以了解其具体内容。

随着时间推移,技术的更新迭代,和个人的认知增长,本文也会不断更新。

写这些文章的目的在于明确各个知识点,他们更像是书摘与总结。

所有的借鉴与参考都列在文本的最后。

学习基础知识就像是认知每一块积木的过程,了解规则,解锁认知。

技能越来越丰富,认知越来越清晰,我们也将在程序的王国开疆拓土,自由驰骋。

JavaScript

前端的基本功简略来说,可能就是所谓的html+css+js

这也是我刚入行时对前端最浅显的认知。

有了这些最最基础的东西,接下来是什么呢?

在使用中根据某个点深度学习 或者 按照“顺序”深度学习

这里我们选择后者,以js为切入点开始前端的漫漫长路

变量

介绍了数据类型,原始值&引用值和变量的定义方法

Javascript基础数据类型

undefined、null、string、number、boolean、symbol、bigInt

Javascript 复杂数据类型

对象的定义,对象的内部特性,遍历对象,对象实例上的属性和方法,对象的解构用法,对象的合并等

创建复杂对象

工厂模式、构造函数模式、原型模式

理解原型 & 原型链

construtor、prototype、__proto__

继承

原型链继承、盗用构造函数继承、组合继承、原型式继承、寄生式继承、组合寄生式继承

类的定义,构造函数,实例&原型&静态属性和方法,继承,混入

组合胜过继承

模块

CommonJS、AMD、module、export、import

Javascript中的原始值与引用值

原始值、基本引用类型(Date、RegExp、原始值包装类型、单例内置对象)、集合引用类型(Array、Map、WeakMap、Set、WeakSet)、迭代与扩展

作用域 & 词法作用域 & 作用域链

编译&执行、词法作用域、作用域链、块作用域、变量提升、闭包产生的作用域,函数执行创建的动态作用域

迭代器与生成器

Iterable、IteratorObject、next()、done、value、yeild、定义生成器、终止生成器

代理与反射

Proxy、Reflect、defineProperty,应用场景(跟踪属性访问,隐藏属性,属性验证等)

函数

预编译,作用域,执行上下文&this,垃圾回收,箭头函数,函数参数的扩展操作符,函数内部(arguments&caller&new.target)、递归、闭包、立即调用、私有变量

异步处理

promise、async/await、generator

JS进阶 — TypeScript (以下简称TS)

BOM

window、location、navigator、history、screen、浏览器渲染原理

DOM

防抖节流、DOM事件

表单脚本--Form

网络请求与远程资源

XMLHttpRequest、跨源安全策略、跨域请求、Ajax、Fetch、Axios、websocket、HTTP2.0

9种常见跨域手段、XSS(跨站脚本攻击)、CSRF(跨站请求伪造)、JWT

nginx

客户端存储

cookie、webStorage、indexedDB

线程(Worker)

动画与canvas

定时器 & requestAnimationFrame、canvas、Three.js

JS API & 错误处理与调试

ES2018和ES2019相关API

JavaScript库

JQuery、Underscore.js、Lodash

JavaScript框架

Vue

vuex、vue ssr、vue-router、vue-dom-diff

vue2 & vue3

@vue/cli

React

mobx、dva、next、redux、saga、umi

Angular

Svelte

JavaScript工具

包管理、模块加载器、模块打包器、编译、转译工具及静态类型系统

AST编译解析

webpack、glup、rollup

高性能脚本工具

WebAssembly
asm.js

构建工具、自动化系统和任务运行期

nginx+docker、gitlab-cicd

代码检查和格式化

压缩工具

单元测试

文档生成器

设计模式

前端工程化

微前端

single-spa、qiankun

服务端

nest、koa、express、egg

前端运维

linux、shell、docker、k8s

数据库

mongodb、mysql、redis

数据结构与算法

APP

react native、flutter

其他

Oauth

所思所想

复杂的事情简单做,简单的事情重复做,重复的事情机器做

设计与开发在很多时候没有绝对的好与坏,只是尽可能的取一个平衡点满足当下及未来某段时间的需求而已。

能找到合适的平衡点,再在合适的位置,处理合适的事情,也已经很优秀了。

新事物的产生都是为了解决某个具体的问题,新的问题带来新的技术,新的技术又产生新的问题,希望我们不止是随波逐流的搬砖者。

参考地址与书本:

《JavaScript高级程序设计》

《TypeScript入门与实战》

《你不知道的JavaScript》

《HTTP权威指南》

《JavaScript设计模式》

MDN

前端发展简史

TypeScript中文网

asm.js 和 Emscripten 入门教程