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

时间过得真快！！！

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

前端学习记录

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 ...
• set slots forceUpdate...
• 动态绑定class & style
• Vue生命周期
• Vue监听数组
• 组件的封装
• Vue-cli2.x & Vue-cli3.x
• 组件间的通信
  • 父子组件
    • 父组件向子组件 props $children
    • 子组件向父组件 parent
  • 非父子组件兄弟组件
    • 中央事件总线 EventBus
    • listeners 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