阅读 2593

生日之际,记录自己前端拼搏之路~

时间过得真快!!!

        生日之际,从大学到现在,自己学习并实践过认为比较有用的技术点,也是常见面试考点...

将来的你一定会感谢自己拼命努力的自己
加油💪

前端学习记录

Html5

  • 对WEB标准以及W3C的理解与认识
  • Html5新特性与语义化
  • 行内元素与块级元素
  • 渐进增强与优雅降级的理解及区别
  • cookie、sessionStorage、localStorage原理与区别
  • ....

CSS3

  • CSS盒模型
  • 获取盒子宽高的几种方式及区别
  • Flex与Grid布局
  • CSS常见选择器
  • BFC
  • 浮动与定位
  • 常见的页面布局
  • CSS3新特性
  • 常见单位
  • 移动端视口配置
  • 文字、盒子水平垂直居中
  • CSS3画三角形、六边形等
  • link和@import有什么区别
  • 常见兼容性问题
  • ....

jQuery

  • jQuery的好处
  • jQuery选择器与css选择器的区别
  • jQuery对象与Dom对象
  • jQuery中的Ajax
  • DOM元素的增删改查
  • DOM元素的遍历
    • 同胞元素
    • 后代元素
    • 祖先元素
  • jQuery淡入淡出与动画
  • jQuery尺寸
  • jQuery事件
  • window.onload 事件和 jQuery ready 函数有何不同
  • ....

JS

  • 原始类型与对象类型及对象之间的转换
  • 构造函数、实例、原型、原型链、继承等
  • 实现继承的方式及优缺点
  • typeof & instanceof
  • 原生ajax
  • 对象深浅拷贝
  • this的理解
  • 函数柯里化、高阶函数
  • bind、call、apply用法及区别
  • 字符串、数组、对象、日期等的属性与方法
  • 浏览器对象
    • Window对象
    • History对象
    • Location对象
    • Screen对象
  • 三大家族和一个事件对象
    • Offset家族
    • Scroll家族
    • Client家族
    • Event事件
  • Event-Loop 事件循环
    • js 运行机制
    • 进程与线程
    • 宏任务与微任务
    • Node中的Event-Loop
  • 原生DOM增删改查
  • 常见的模块化
  • 作用域、闭包与立即执行函数等
  • 同步与异步
  • 常见的循环及区别
    • for...in
    • for...of
    • ....

ES6+

  • let 与 const
  • 异步解决方案
    • 回调函数
    • Promise
    • Generator
    • Async/Await
  • 箭头函数
  • 模块化(export & import)
  • 解构赋值(主要:数组和对象)
  • 数组、字符串、函数、日期等扩展方法
  • 默认值、扩展运算符
  • 数组forEach、some、every、map、filter、reducer等方法的使用及区别
  • Proxy
  • ...

Stylus Sass Less

  • 常见三个预处理的用法及区别
  • 常见功能
    • 变量
    • 嵌套
    • 导入
    • 继承
    • Mixins
    • 循环 & 判断
    • ....

TypeScript

  • TypeScript特点及理解
  • Typescript常用语法
    • 基础类型
    • 布尔值 boolean
    • 数字 number
    • 字符串 string
    • 数组 number[] Array
    • 元祖 Tuple
    • 枚举 enum
    • any
    • void
    • null & undefined
    • never
    • object
  • 类型断言
  • 变量声明
  • 接口
  • 函数
  • 泛型
  • 类型判断
  • 高级类型
  • ....
  • Typescript集成在React项目中
  • Typescript集成在Vue项目中

Webpack4.x

  • Webpack配置文件常见选项
    • 入口文件-entry
    • 出口文件-output
    • 模块-module
    • 插件-plugins
    • 模式-mode
    • 开发服务器-devServer
    • 解析-resolve
    • 源码调试-sourceMap
    • ....
  • 常用Loader
    • 处理CSS文件
      • css-loader style-loader less less-loader node-sass sass-loader stylus stylus-loader
    • 添加CSS3前缀
      • postcss-loader autoprefixer
    • 处理ES6文件及更高级语法
      • babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-proposal @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
    • 处理图片、字体等文件
      • file-loader url-loader html-withimg-loader
    • ....
  • 常用Plugin
    • 生成HTML文件 Html-webpack-plugin
    • 删除dist目录 clean-webpack-plugin
    • 压缩css文件 optimize-css-assets-webpack-plugin
    • 压缩js文件 uglifyjs-webpack-plugin
    • 复制目录插件 copyWebpackPlugin
    • 添加版权声明 bannerPlugin
    • 提取css文件 mini-css-extract-plugin extract-text-webpack-plugin
    • ....
  • 常见优化
  • Webpack 自带优化
    • noParse 不去解析某依赖包中的依赖关系 jquery
    • IgnorePlugin 加载某依赖时,忽略某文件 moment
    • DllPlugin、DllRederencePlugin 动态链接库 react
    • Tree-Sharking、 Scope-Hosting
  • 引入依赖
    • expose-loader 暴露到window上
    • providePlugin 给每个模块都注入
    • externals选项 CDN引入 不打包
  • 定义环境变量 DefinePlugin
  • 不同环境 【common、dev、prod】
  • 多线程打包 happypack
  • 抽离公共代码
  • 懒加载 & 热加载
  • 打包单页&多页应用
  • Webpack跨域 & watch用法
  • 优化构建速度
  • 分析打包结果
  • Webpack & Grunt & Gulp的区别
  • 手写loader
  • 手写plugin
  • 手写简易版的webpack
    • babylon 将源码转换成AST
    • @babel/traverse 遍历节点
    • @babel/types 替换节点
    • @babel/generator 将替换好的节点生成
  • 理解Tapable

Vue全家桶

  • MVC & MVVM的理解
  • Virtual DOM的理解
  • 数据双向绑定 & 组件化
  • Vue常见API
  • 常见选项
    • methods watch computed filter mixins ...
  • 常用指令
    • v-for v-pre v-html v-bind v-model...
  • 常用组件
    • transition transition-group keep-alive slot ...
  • nextTickset refsslots scopedSlotsforceUpdate...
  • 动态绑定class & style
  • Vue生命周期
  • Vue监听数组
  • 组件的封装
  • Vue-cli2.x & Vue-cli3.x
  • 组件间的通信
    • 父子组件
      • 父组件向子组件 props $children
      • 子组件向父组件 parent
    • 非父子组件兄弟组件
      • 中央事件总线 EventBus
      • attrslisteners inheritAttrs
      • provide inject
      • ....
  • Vue-loader的理解
  • Vue-Router的理解
    • router-link
    • router-view
  • 导航方式
    • 编程式导航
    • 声明式导航
  • 命名路由 & 命名视图
    • name属性 -> {name:, params:}
    • router-view的name属性与components对应
  • 动态路由及路由组件间传参
    • name + params方式
    • path + query方式
  • router & route的理解
  • 导航守卫
    • 全局守卫
    • 组件内守卫
    • 路由独享守卫
  • 路由懒加载
    • vue异步组件
    • es提案的import()
    • webpack的require ensure()
  • Vuex的理解及使用场景
  • Vuex核心概念
    • State
    • Getters
    • Mutations
    • Actions
    • Modules
  • 脚手架搭建Vue全家桶项目
  • 服务端渲染SSR
    • 首屏渲染 & SEO 问题
    • Nuxt.js

React全家桶

  • JSX语法
  • 属性props & 状态state
  • React生命周期
  • React优化
    • shouldComponentUpdate
  • 函数组件 & 类组件 & 高阶组价
  • Fiber的理解
  • React Hooks
    • useState
    • useEffect
    • useContext
    • useReducer
    • ....
  • React-Router-Dom
  • React路由的原理
  • 常用API
    • BrowserRouter & HashRouter
    • Route
    • Link & NavLink
    • Switch
    • Prompt
    • Redirect
    • ....
    • match location history对象
  • Redux
  • 对Redux的理解
  • Action创建函数
  • 常用API
    • State
    • Action
    • Reducer
    • createStore
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Store常用方法
    • getState
    • dispatch
    • subscribe
  • react-redux
    • Provider
    • connect
      • mapStateToProps
      • mapDispatchToProps
  • 处理异步 redux-thunk

ReactNative & Weex

  • 搭建RN环境 & Weex环境
  • Flexbox布局
  • 导航间数据传递
  • 公共组件的封装
  • 常用组件
    • 列表组价 FlatList (上拉刷新、下拉加载)
    • 数据存储组件 AsyncStorage
    • 提示符组件 ActivityIndicator
    • 滚动组件组件 ScrollView
    • 状态栏组件 StatusBar
    • 加载网页组件 WebView
    • 动画组件 Animated
    • 样式组件 StyleSheet
    • 获取屏幕组件 Dimensions
    • ....
  • RN项目常用第三依赖
    • 图片缩略图
      • react-native-image-picker
      • react-naitve-progress
      • react-native-image-resizer
    • 导航
      • react-navigation
      • react-native-router-flux
    • 启动屏
      • react-native-splash-screen
    • 微信 & 支付宝支付
      • react-native-wechat
      • react-native-yunpeng-alipay
    • 热更新
      • react-native-code-push
  • 视图组件库
    • antd-mobile-rn
    • ....
  • RN项目安卓 & IOS打包

后端学习记录

Node

  • 对Node的认识
  • 事件循环 & EventEmitter
  • 创建简单的服务器
  • 模块化
    • exports
    • module.exports
  • 核心模块
    • npm
    • path
    • fs
    • buffer
    • stream
    • http & https
    • tcp
    • process
    • ....
  • 使用Node开发企业官网项目

Express

  • request & response对象属性和方法
  • GET & POST请求
  • 静态文件 static
  • 路由中req, res对象中的属性
  • 对中间件的理解
  • 常用中间件
    • body-parser
    • cookie-parser
    • ....

Koa2

  • 对Koa2的理解
  • 与Express的区别
  • 理解核心对象
    • Application
    • Context
    • Request
    • Response
  • 常见中间件
  • 中间件的概念
    • koa-body
    • koa-bodyparse
    • koa-multer
    • koa-router
    • koa-static
    • koa-compose
    • Koa2路由的使用

Java

  • JDK安装
  • 常见数据类型的属性与方法
  • 面向对象的特性
    • 继承
    • 封装
    • 抽象
    • 多态
  • 集合类
    • Collection
    • List Arraylist LinkedList
    • Set HashSet
    • Map HashMap
    • Vector
    • ....
  • 线程
  • 实现方式
    • 继承Thread类
    • 实现Runnable接口
  • 创建Java连接Mysql、Redis工具类
  • 理解Java项目的MVC三大架构
  • 整合SSH项目
    • Spring
    • SpringMVC
    • MyBatis
    • ....

SpringBoot

  • SpringBoot的使用及优点
  • 配置文件格式
    • .properties
    • .yml
  • 搭建SpringBoot+MyBatis项目
  • SpringBoot项目中常用注解
  • SpringBoot项目实现分页和排序功能
  • SpringBoot整合Swagger
  • 整合模板
  • ....

Http协议与数据请求

  • Http请求与响应对象
  • TCP三次握手、四次挥手
  • Http常见方法与状态码
  • 方法
    • GET
    • POST
    • PUT
    • HEAD
    • DELETE
    • ....
  • 状态码
    • 1xx 信息类
    • 2xx 成功类
    • 3xx 重定向
    • 4xx 客户端错误
    • 5xx 服务端错误
  • 长连接与管线化
  • Etag & Expires & Cache-control等理解
  • 兼容版原生Ajax
  • Fetch
  • Axios
  • Flyio
  • ....

浏览器

  • 从输入URL到页面加载的全过程
  • 浏览器缓存
  • 重绘 & 回流
  • 常见浏览器及其内核
  • ....

算法

  • 数组
    • 数组排序
    • 数组去重
    • 扁平化数组
    • 求数组中最大值和最小值
    • ....

排序方式

  • 冒泡排序
  • 选择排序
  • 快速排序
  • 递归
  • ....

代码管理

  • Git
    • 常见命令
    • git clone
    • git status
    • git add .
    • git commit -am 'xxxx'
    • git pull origin dev
    • git push -u origin dev
    • git branch / -r
    • git checkout dev
    • git stash
    • ....
  • GitHub & GitLab & Gitee
    • 如何创建在这些平台上常见代码仓库
    • 如何将本地项目与远程仓库关联
    • 使用GitHub搭建个人博客
    • ....

UI层框架

  • BootStrap
  • iView
  • Andt Design
  • Element UI

数据库

  • MySql
    • Mac上安装Mysql
    • Mysql常见增删改查SQL语句
    • Java连接Mysql
    • Node连接Mysql
    • ....
  • MonogoDB
    • Mac上安装MonogoDB
    • MonogoDB常见增删改查SQL语句
    • mongoose
    • Node连接MonogoDB
    • ....
  • Redis
    • Mac上安装Redis
    • Redis支持的数据类型
      • String
      • List
      • Set
      • Sorted Set
      • Hash
      • Java使用Redis
      • Node使用Redis
      • ....

小程序

  • 微信小程序
    • 理解微信小程序的原理
    • 基础
      • 单位
      • 数据绑定
      • 生命周期
      • 列表渲染
      • 页面跳转
      • tarBar
      • ....
    • 授权获取用户信息
  • 上拉刷新 & 下拉加载
  • request请求
  • 各个文件代表的意思
  • 页面跳转及传递参数
  • 代码审核与发布
  • 常用组件
    • view
    • scroll-view
    • swiper
    • ....
  • MpVue
    • 语法和vue很像

编辑器

  • VSCode & WebStrom & IDEA
    • VSCode常用插件
    • WebStorm与IDEA永久安装
    • 常用快捷键
    • ....

部署与运维

  • Linux
    • Mac上安装Linux
    • Linux目录结构及说明
    • Linux在工作中常用指令
      • ssh
      • cp
      • ln
      • tar
      • ....
  • FileZilla & XShell & WinSCP
    • Mac上这些软件的安装
    • 如何连接远程服务器
    • ....

优化

  • 防抖与节流
  • 图片懒加载

常见第三方依赖库

  • axios
  • better-scroll
  • lodash
  • moment
  • ....

其他

  • webpack4从零搭建Vue全家桶项目
  • webpack4从零搭建React全家桶项目
  • 使用VuePress搭建自己的技术博客
  • ....

项目中常见错误

  • 移动端1像素边框

进阶之路

  • 彻底掌握Webpack4.x & 手写简易版Webpack
  • 彻底掌握常见的跨域方式与实现原理
  • 手写简易版Express
  • 手写简易版Koa2
  • 手写简易版React-Router
  • 手写简易版React & React-Diff
  • 手写简易版Vue框架的MVVM实现

2019年目标

  • 编写以上每个技术中核心知识点博客
  • 系统学习前端
    • HTML5
    • CSS3
    • 原生JS基础
    • ES6 7 8 9 10
  • Vue深入理解与源码学习
  • React深入理解与源码学习
  • 学习Flutter
  • 学习前端常见设计模式
  • 学习JavaScript数据结构与算法

后记

非常喜欢的一段话:在我们20岁的时候用30岁的心态来做事,那么当我们30岁的时候就可以享受别人40岁的成功!~💪💪💪

关注下面的标签,发现更多相似文章
评论