前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。

技能考察：

一、关于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会发生重叠。根元素就是一个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命令行操作, 系统文件管理

多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解