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