乐趣区

前端知识归纳

技能考察:
一、关于 Html
1、html 语义化标签的理解; 结构化的理解; 能否写出简洁的 html 结构; SEO 优化
a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时
让浏览器的爬虫和机器很好地解析。结构化:头部 header、侧栏 sider、主体内容 main、尾部 footer.
b、作用:没有 css,也能呈现内容结构、代码结构;用户体验;有利于 SEO; 方便设备解析;利于团队开发和维护;
2、h5 中新增的属性; 如自定义属性 data, 类名 className 等, 新增表单元素, 拖拽 Drag
a、在 html 标签自定义属性 ”data-xxx”,js 可以通过 dataset 设置 ”data-xxx” 自定义属性
b、新增表单元素:datalist、keygen、output
3、h5 中新增的 API, 修改的 API, 废弃的 API 稍作了解 (离线存储, audio, video)
a、localStorage: 一直存储在本地,直到手动清除;
sessionStorage: 页面关闭则缓存清空;
b、audio 音频(兼容苹果用 touchstart)、video 视频
二、关于 CSS
1、CSS 选择器 (三大特性)
a、层叠性:标签的多个重复的样式,一个属性会覆盖另外一个属性,比如设置一个红色背景, 一个黄色背景,只能取其一。
b、继承性:子标签会继承父标签样式
c、优先级:!important> 行内样式 >id 选择器 > 类选择器 > 标签选择器 > 通配符 > 继承
2、BFC 机制
a、创建了 BFC 的元素中,在垂直方向上的 margin 会发生重叠。根元素 <html> 就是一个 BFC 元素(这个可以解释 margin 重叠)
b、BFC 元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。
c、BFC 元素不会和浮动的元素重叠。(这个可以解释两栏自适应)
d、计算 BFC 元素高度时,里面浮动元素
3、盒模型
a、框模型,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个元素。
b、元素框的总宽度 = 元素(element)的 width + padding 的左边距和右边距的值 + margin 的左边距和右边距的值 + border 的左右宽度;
元素框的总高度 = 元素(element)的 height + padding 的上下边距的值 + margin 的上下边距的值 + border 的上下宽度。
c、w3c 标准盒模型: width 和 height 不包括 padding 和 border
ie 盒模型: width 和 height 包含 padding 和 border
4、CSS 模块化开发 (封装); SCSS 和 LESS 的使用
a、scss 安装使用 npm,less 使用 ruby
5、屏幕适配 以及 页面自适应
a、百分比布局
b、文字大小用 rem
c、媒体查询
6、CSS3 中新增的选择器
子元素选择器,相邻兄弟选择器,通用兄弟选择器,群组选择器
7、CSS3 中新增的属性, transform trasition animation 等 …
a、transform: translate,translateX,translateY 在水平方向、垂直方向或者两个方向上平移元素
b、transform: scale、scaleX、scaleY 在水平方向、垂直方向或者两个方向上缩放元素
c、transform: rotate 旋转元素
d、transform: skew,skewX,skewY 在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度
e、transform: matrix
三、关于布局

标准文档流 (padding + margin + 负 margin) + 浮动 float + 定位
百分比布局 (流式布局): px 单位 用 %num 代替, 占父级元素的百分比
flex 弹性布局: 主轴 辅助轴的几个属性
grid 栅格布局: 使用框架中的类名来替代: 本质上还是百分比布局

四、关于 JS 基础
1. 变量数据类型及检测: 基本 + 引用
2. 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等
3. 条件, 循环, 异常处理 if switch(){case xxx:} try catch finally throw
4. 函数定义, 调用方式 (apply, call, 直接调用), 传参: 实参给形参赋值
5. 字符串, 数组, 对象常用 API,
6. 正则表达式

五、关于 JS 高级
1. 作用域, 作用域链, 闭包
2. 原型, 原型链, 继承
3. 函数上下文, this 指向
4. js 的运行机制, 事件队列和循环
5. Ajax 原理, axios 库
6. 同步, 异步编程
7. jQuery 源码学习

六、关于浏览器
1. 浏览器的构成和运行机制,
2. 浏览器内核
3. 浏览器交互: BOM 和 DOM 相关 webApi, 监听事件
4. 浏览器缓存机制
5. 浏览器的渲染原理
6. 浏览器的安全性: 跨域 和 攻击

七、关于网络协议
1. HTTP 协议
2. cookie, session, token

八、关于 ES6 语法
1. 字符串, 数组, 对象 扩展的 api
2. 变量扩展: let const 解构赋值 块级作用域
3. 函数扩展: 箭头函数 默认参数, rest 参数
4. 展开运算符, 模板字符串
5. set 和 map 数据结构
6. 迭代器和生成器函数 next 和 yield 的理解
7. proxy 对象 属性代理器: 属性的读取(get)和设置(set)相关操作
8. promise 对象, 异步编程的解决方案
9. async + await: 异步编程的终极方案 promise + generator 的语法糖
10. class 语法 构造函数的语法糖
11. 模块化编程 export + import 的 导出和导入

九、VUE 基础
1. 基本指令
2. 实例的 属性 和 方法
3. 实例的生命周期
4. 组件基础: 创建, 注册, 添加属性方法, 套用等 …
5. 组件通信传值 父子, 兄弟, 跨级
6. 插槽 slot 等 …

十、VUE 高级
1. vue-router: 搭建 SPA
路由, 组件的配置
路由间的传值
路由跳转
路由的导航守卫

记住在 router.js 和 组件页面中的使用方式

2. vuex: 状态管理: 数据仓库 store
实例化仓库的 5 大属性的使用
state, getters, mutations, actions, modules
辅助函数 mapState 等 …, 仓库中计算属性的映射, 方便操作

记住在 store.js 和 组件中 使用方式

十一、VUE 深入, 源码阅读
1. 数据响应式原理
2. virtual dom
3. diff 算法
4. nextTick 等等 …

工程能力考察:
一、项目能力
1. vue-cli 脚手架搭建 和 功能配置 vue.config.js
2. webpack 的常用配置
3. 项目构建 打包
4. 熟悉各类框架的文档 …
5. UI 框架: Bootstrap, MUI, Element-ui 等
6. 常用的插件整理, 整理一个自己插件库, 封装自己的方法库, 组件库
7. 常用的工具熟练度
8. PC 端 和 移动端开发注意事项
9. 经验总结: 快速确定项目的技术选型
10. 坑点总结: 项目遇到坑坑坑!!!
11. 项目中的性能优化记录 (都是细节点 … 多记录)
12. 需求文档的理解, 可以结合 项目流程图, UML 图
13. 问题解决能力: (bug 定位调试, 查找文档, 寻求他人 …)
14. 记录习惯养成

二、模块化, 组件化开发能力
1. 项目分类; 各类文件整理, 分类
2. 各类功能封装
3. 组件和功能模块的抽离, 解耦, 复用

内功考察:
一、面向对象的编程思想
1. 类的抽象
2. 对象的封装, 继承
为了更好的去管理数据, 分类数据 实现高内聚, 低耦合

二、设计模式
设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式

三、数据结构和算法
学习常用的排序搜索算法, 顺序表, 链表, 栈, 队列, 树, 堆 结构等等 …
考验你的 抽象思维 和 数学功底了
将现实需求 抽象成 计算机代码 的思维能力

附加技能考察:
一. 学习能力

持续学习的态度 – 博客, 笔记记录
技术论坛活跃度高, 问答多
GitHub 开源项目参与

二. 了解一门后端语言

python, node.js, php 等 …
数据库 mysql,redis,mongodb. sql 的操作语句, mongo 的操作语句, redis 操作语句
node + express 搭建本地服务等
python + django + request + scrapy

三. 系统编程

Linux 命令行操作, 系统文件管理
多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解

退出移动版