“妈我不想去上课!”“不行你是老师!”
老李是一名前端老师,一个正经八百的技术老师 90 后,在 2021 年,终于到了叫他老李的时候~
为了不去上课,这位“老家伙” ,把自己的前端大纲和授课秘籍都发给我了。
==记得看完点赞收藏哦~==
秘籍涉及技术栈
HTML5
CSS3
JavaScript
ES6
数据可视化
React
Node.js
Vue.js
入门第一阶段
HTML5+CSS3 相关领域知识,你需要学习如下内容,标准的前端工程师知识点。
自适应布局
,BFC(块级格式化上下文)
;选择器
,盒模型
,浮动
,背景
,定位
,Flex
;转换
,Web 字体
,动画
;标签语法
,排版标签
,布局标签
,多媒体标签
。
这一阶段你要达成如下目标:
熟练的操作 IDE;
掌握 HTML5 中的标签;
掌握 CSS 语法以及字体属性;
掌握盒模型;
掌握浮动语法;
掌握四种定位何其应用场景;
掌握精灵图;
熟练操作 CSS3 中的变形函数,动画,模型;
掌握弹性盒相关属性;
学习响应式布局 。
本阶段还应该学习到,企业级 PC 端项目的开发流程和规范,包括借助蓝湖协同平台进行网页开发。
入门第二阶段
本阶段来到 Javascript 知识部分,重点基础知识如下:
流程控制
,循环
,函数
,对象
,数组
;宿主环境
,节点操作
,事件流
;高阶函数
,排序
,重绘
,回流
;预加载
,面向对象
,原型
;柯里化
,箭头函数
,闭包
。
最新的前端大纲需要学习 ES6+ 语法,具备面向对象编程的能力,可以扩展的知识点为 点九图
,ECharts
,jQuery
,其中 jQuery
包含 jQuery 基础、jQuery 进阶、jQuery 高级三个部分内容,ECharts
主要用于数据可视化。
这一阶段你要达成的目标:
掌握 JS 基础语法;
掌握函数式编程;
掌握 JS 内置对象 API 的应用场景和使用方式;
掌握 DOM 与 BOM 操作;
掌握事件的触发机制和传播原理;
掌握递归,闭包,回调函数。
入门第三阶段
本阶段为客户端与服务端交互部分知识,重要知识点如下:
客户端与服务器
,封装 Ajax
;axios
,跨域
,防抖节流
;HTTP
;Node.js
,MySQL数据库
,Express
;WebSocket
,Webpack
;身份认证
,session
,JWT
,Git
,Token 身份认证
。
这一阶段你要达成的目标:
熟练操作 GIT 版本管理工具;
熟练掌握 AJAX 技术;
掌握数据交互之第三方库 axios 的使用以及高阶拦截器;
掌握 NodeJS 模块;
掌握 Express 框架、Express 中间件原理、Express 脚手架;
掌握 Cookie、Session、文件上传等原理;
深入理解 Http 协议,前后端交互流程及原理;
掌握 Webpack 打包原理;
掌握 Mysql 数据库存储方式。
入门第四阶段
这一段是重点了,主要学习两款主流框架,即 VUE 和 React。
Vue基础
、Vue进阶
,Vue-cli
,Vuex
,vue-router
;Element
,Vant
,MVVM 原理
,React
;JSX
,虚拟 DOM
,组件通信
,数据管理流程
;百度地图
,utils
,AntedPC
,fetch
。
这一阶段你要达成的目标:
学会 VUE 基本指令的使用;
掌握事件的绑定方法和流程;
掌握事件修饰符、生命周期、过滤器、watch 侦听器;
掌握组件的创建和注册以及组件通信的使用;
掌握脚手架的创建以及使用;
掌握 Vue 常用技术栈,如 vue-cli、vue-router、vuex;
掌握 vuex 状态管理以及辅助性函数的使用;
掌握 React 的概念、特点以及 jsx 的基本使用;
掌握 React 组件的概念以及注册;
掌握 React 的事件处理。
入门第五阶段
本阶段为小程序专门设计,重要知识点如下:
微信小程序
,小程序发布流程
;WXS
,微信支付
,Mobx
,uni-app
;绘图容器
。
这一阶段你要达成的目标:
掌握微信小程序开发;
掌握微信小程序模块化及组件化的操作;
掌握微信小程序原生语法结合 Promsie 进行业务开发的使用;
掌握微信小程序部署发布上线的能力;
掌握 wxml 和 wxss 实现小程序的界面布局;
掌握微信小程序拓展能力,如组件库、computed、骨架屏的使用;
掌握 uni-app 框架基础语法、熟练使用 HBuilderX 开发工具;
掌握 Canvas、svg 绘图容器使用。
入门第六阶段
多端框平台内容,重要知识点如下:
React-Naitve
,Flutter
,Dart
,PWA
,Taro
;AST
,gitflow 工作流
;Egg
,koa
;redis
,MongoDB
。
这一阶段你要达成的目标:
掌握 RN 原生 App 界面布局;
掌握 Flutter 开发环境搭建以及常见的布局方式;
理解 Taro 实现跨平台开发的原理机制;
掌握 Dart 语言基础;
理解 Taro 开发小程序与原生小程序的差异;
通过 PWA 技术强化 H5 网页的原生特性;
运用 Egg 完成项目;
掌握 Koa 的中间件编写;
结合 redis 完成项目;
理解 MongoDB 核心概念与使用。
今天是持续写作的第 <font color="red">154</font> / 200 天。求点赞、求评论、求收藏。
==点赞、收藏本文总数过 1000,下一份技术栈学习大纲,你们评论随意点,熬秃头也出==
版权声明: 本文为 InfoQ 作者【梦想橡皮擦】的原创文章。
原文链接:【http://xie.infoq.cn/article/17fd21299df31fa5c5dfcf966】。文章转载请联系作者。
评论