前端基础知识复习
2022-03-16 20:31:15 1 举报AI智能生成
前端基础知识脑图，跳槽加薪必备脑图。
作者其他创作
大纲/内容
框架
Vue历练
Vue2
watch
对属性进行监听
1.定义方法进行监听
2.使用vm.$watch的api进行监听
computed
get
set（可选）
vue-cli
创建命令
vue create app
winpty vue.cmd create app
slot
替换内容
html
组件
后备内容
若slot没有内容，则显示默认内容
指令
v-if
v-show
v-for
多参数
item
value
index
class与style的切换
class
标签的:class属性传入一个对象
可以写在标签的表达式里
也可以是data里面的属性
还可以是计算属性返回的
标签的:class属性传入一个数组
可以使用三元表达式来选择class
也可以使用对象语法，来选择class
style
标签的:style属性传入一个对象
标签的:style属性传入一个数组
事件处理
使用特殊变量$event传入方法，在方法中用形参接收事件对象
组件化
组件的数据交互
props传值
$emit事件
子组件发送$emit事件，由父组件用v-on或者$on监听，除了事件，还可以传值
eventHub广播
组件的定义
是可复用的vue实例
组件的使用
注册
全局注册
局部注册
类型
动态组件
异步组件
边缘处理
访问根实例
this.$root
可以作为store存值
访问子组件实例或元素
this.$refs
依赖注入
异步加载组件
避免首次加载过慢
写法
component里面
router里面
keep-alive
场景
频繁切换，但是不像重复渲染
做好缓存，不然他销毁
<keep-alive>包裹
mixin
独立抽离出来的公共逻辑混合到当前的组件的逻辑
缺点
变量来源不明确，不利于阅读
多个mixin里面变量可能冲突
vue实例
生命周期图
挂载点
过渡和动画
过渡
transition（vue封装的组件）
用户过渡效果
动画
css动画
Vue进阶
computed
写法
注意
简写方式
get和set方式
watch
写法
普通变量和引用变量的区别
简写方式
handler方式
deep:true
immediate
指令
v-for
遍历数组
index，item
遍历对象
index,key,value
v-model
表单元素都要用
event
事件的传递
function($event);
function(event){
console.log(event)
}
target
事件发生在的dom
currentTarget
事件注册到的dom
组件通信
父子通信
子传父
子组件
this.$emit('xxx')
父组件
<son @xxx="handler"></son>
父传子
父组件
<son :list="list" :num="num"></son>
子组件
props
跨组件通信
event.$emit(“xxx”)
event.$on("xxx")
及时销毁自定义事件
beforeDestroy（）方法里面销毁
生命周期
挂载阶段
beforeCreate
created
beforeMount
mounted
更新阶段
beforeUpdate
Updated
销毁阶段
beforeDestroy
destroyed
执行顺序
初始化顺序
father-created
son-created
son-mounted
father-mounted
更新顺序
father-beforeUpdate
son-beforeUpdate
son-updated
father-updated
$nextTick
原理
vue是异步渲染
data改变后，DOM不会立刻渲染
作用
this.$nextTick会在DOM渲染之后被触发
slot
父组件给子组件添加内容
类型
普通插槽
作用域插槽
具名插槽
vue原理
vue的响应式
Object.defineProperty
virtual dom
用js模拟DOM结构，计算出最小的变更，操作DOM
render函数
Vue3
React
脚手架
create-react-app
redux
html
语义化
增加代码可读性
SEO
JavaScript
面试准备
简历
简历书写
技术亮点
技术方向
简历投递
内推
boss直聘
猎头
自我介绍
你好，我叫 xxx ，毕业 x 年了，现在在 xxx 公司工作，这个公司是做 xxx 的。我在这个公司担任 xxx 角色，最近在做一些 xxx 项目，用到了 xxx 技术，解决 xxx 问题。目前因为 xxx 原因想换个工作。
面试流程
一面
基础知识为主
二面
基础开始，到原理以及设计，项目经验等
三面
项目leader问工作规划，以及将来的工作方向和内容
hr面
个人价值观
问面试官的问题
团队技术栈
研发流程
做哪块业务
几点上班，几点下班，午休如何，周末是否双休
注意事项
注意1
度过试用期
第一，当然是技术能力，作为开发人员，执行任务不掉链子，别写出太多 bug ，并且进度正常。
第二，对业务的理解能力，接到一个需求之后，能快速搞明白它是什么，以及它的上下游是什么，它如何闭环。我们在公司做开发，是做业务，做功能，不是搞科研，因此对需求的理解至关重要。
第三，项目的合作是否顺畅，和领导、同事、项目组成员的沟通，是不是到位，有风险、问题是不是能及时反馈？别藏着掖着，到暴露了才被发现。
第四，积极和热情。在做项目时要积极的、利索能力的去推进，而不是等着别人推自己。自己有了一些经验教训，是不是乐意给同事分享。总之，你能否以自己的能力，让一个项目、一个团队经营的更好一点，哪怕只有一点点。
CSS
选择器
id选择器
class选择器
后代选择器
伪类选择器
居中
水平居中
inline
text-align:center
block
margin:auto
absolute
left:50%
margin-left:-(自身宽度的一半)px
垂直居中
inline
line-height=height
block
vertical-align:middle
absolute
top:50%
margin-top:-(自身高度的一半)px
预编译
scss
stylus
特效
动画
外发光特效
box-shadow
text-shadow
布局
定位
static
relative
fixed
absolute
flex布局
响应式
rem
相对长度单位，相对于根元素，常用于响应式布局
设置根元素的font-size
em
相对长度单位，相对于父元素，不常用
px
绝对长度单位，最常用
常用方案
media-query
根据不同的屏幕宽度设置根元素的font-size
rem
基于根元素的相对单位
网页视口尺寸
window.screen.height
屏幕高度
windeow.innerHeight
网页视口高度
=100vh
document.body.clientHeight
body高度
单位
vh
网页视口高度的1/100
vw
网页视口宽度的1/100
vmin
视口高度和视口宽度中取小的那个
vmax
视口高度和视口宽度中取大的那个
盒模型计算
offsetWidth
content+padding+border
box-sizing:border-box
会把border算进content里
CSS3
2D
transform属性
translate
位移
scale
形变放大缩小
rotate
旋转
3D
transform属性
rotateX,rotateY,rotateZ
沿坐标系旋转
transition属性
property
要过渡的css属性
duration
过渡的时长
timing-function
过渡的时间函数
ease
linear
ease-in
ease-out
动画
@keyframes
规定动画
animate属性
name
指定使用哪个动画
duration
动画执行时长
iteration-count
执行次数
filter
滤镜
常用于按钮的悬浮样式
Js基础学习
创建对象的三种方式
let obj = new Object();
new在执行的过程中做的四件事情
let obj = {}
function Star(){}
静态成员和实例成员
静态成员
在构造函数本身上添加的成员，只能通过构造函数来访问
实例成员
只能通过实例化的对象来访问，不能通过构造函数来访问。
原型
__proto__
对象原型
prototype
原型对象
prototype和__proto__以及constructor的关系
分支主题
原型链
分支主题
成员寻找原则，从底往上找，就近原则
this指向
构造函数中的this指向实例对象
原型对象函数里面的this也指向实例对象
结果为true
面向对象
ES5
通过构造函数+原型对象模拟实现继承，被称作组合继承
通过call函数来实现继承
通过原型对象来实现继承
常用方法
forEach
迭代
无返回
filter
返回过滤后的数组
map
返回处理过后的数组
some
返回布尔值，表示判断数组里是否有符合条件的元素，查找到第一个满足条件的元素后就终止
Object.defineProperty
定义对象中新属性或者修改原有属性
Object.keys(obj)
获取对象的所有属性
ES6
类（构造函数的另一种写法）
函数
创建函数的方式
匿名函数
let fn = function(){}
命名函数
function fn(){}
Function函数
let fn = new Function('参数1'，'参数2'，'函数体')
函数也是对象
函数的调用方式
1.普通函数
function fn() {
console.log('人生的巅峰');
}
fn();
2.对象的方法
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
3.构造函数
function Star() {};
new Star();
4.绑定事件
btn.onclick = function() {};
5.定时器函数
setInterval(function() {}, 1000);
6.立即执行函数
(function() {
console.log('人生的巅峰');
})();
拷贝
浅拷贝
只拷贝一层，针对更深层次的拷贝，则只是拷贝内存地址
assign()函数就是浅拷贝
深拷贝
每一层都拷贝，拷贝的数据会存放在新的内存空间
可以使用递归的方式来拷贝
改变函数内this指向
call()
普通参数传递
会调用函数
apply()
数组传递
会调用函数
bind()
不会调用函数
高阶函数
是对其他函数进行操作的函数
将函数作为返回值输出
接收函数作为参数
闭包
定义：有权访问另一个函数作用域中变量的函数
作用：在函数外面的作用域可以访问函数内部的变量（外外面的全局变量访问里面的局部变量），相当于延伸了变量的作用范围
也算高阶函数的一种用法
严格模式
为了解决以前js不合理，不严谨的地方
可以为整个脚本设置严格模式
可以单独为某个函数设置严格模式
启用后
变量必须先声明再使用
不能随意删除，已经声明好的变量
全局作用域中函数的this是undefined
定时器中的this还是window
正则表达式
利用字面量创建
let rg = /123/
rg.test(123)
边界符
^ $
字符类
[]
表示有一系列字符可供选择，只要匹配其中一个就可以了
-
表示范围
[^]
^表示取反符
量词符
*
重复零次或更多次
let reg = /^a*$/
+
重复一次或更多次
let reg = /^a+$/
？
重复零次或一次
let reg = /^a?$/
{n}
重复n次
let reg = /^a{n}$/
{n,}
重复n次以上
let reg = /^a{n,}$/
{n,m}
重复大于等于n,小于等于m
let reg = /^a{n,m}$/
替换
replace方法
支持普通字符串替换
也支持正则表达式替换
正则表达式参数
/表达式/[switch]
g:全局匹配
i:忽略大小写
gi:全局匹配和忽略大小写
ES6新特性
let
块级作用域
防止循环变量变成全局变量
不存在变量提升
若未声明就用,则会报错
暂时性死区
块级作用域如果有变量和外面作用域中的变量有相同的变量名,则块级作用域中的变量和外面作用域的变量是没有关系的
const
必须赋初始值
常量被赋值后不能更改(内存地址不能更改)
复杂数据类型的值
数组被定声明后,可以改变数组里面的值,但是不能直接赋值新的数组给原来数组(内存地址不能更改)
对象也是如此
不存在变量提升
块级作用域
解构赋值
按照一定模式,从数组中或对象中提取值,将提取出来的值赋值给另外的变量
数组解构
对象解构
属性匹配:一定要和属性名一致
支持解构后重新更改属性名
箭头函数
()=>{}
如果函数体只有一行代码,则可以省略大括号
如果函数只有一个形参,则小括号可以省略
不绑定this,箭头函数没有自己的this关键字,如果在箭头函数中使用this,则该this关键字指向箭头函数定义位置中的this
剩余参数
允许将不定数量的参数表示为一个数组
主要是函数的形参,多个实参可以用一个形参表示
...args
拓展运算符
可以将数组或者对象转为用逗号分割的参数序列
let arr = [1,2,3]
...arr // 1,2,3
一般用户数组合并
将伪数组转化为真正的数组,这样就可以使用数组的方法和属性
Array
Array.form()
将伪数组转为真正的数组
Array.find()
返回符合条件的数组成员,没有找到则返回undefined
Array.findIndex()
返回符合条件的数组成员的下标,没有找到则返回-1
Array.includes()
判断数组中是否包含给定的值
字符串操作
判断字符串是否以某个字符串开始或结束
startsWidth
endsWith
模板字符串
let name = `name`
可以解析变量
let name = `lijian`;
let sysout = `我的名字是${name}`
支持换行
可以调用函数
const sayHello = ()=> '我最牛逼'
let result = `${sayHello()}`;
重复字符串n次,生成新的字符串
let a = 'hello'
a.repeat(3)
//;hellohellohello'
Flex布局
友情链接
阮一峰
布局
主轴
交叉轴
父元素属性
display:flex
flex-direction:row
flex-wrap:nowrap
flex-flow：row nowrap
justify-content:center
align-items:center
align-content:center
子元素属性
order:0
flex-grow:0
0 条评论
下一页
