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

时间过得真快!!!

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

加油:muscle:

前端学习记录

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
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章