20201012赵鑫
学习总结
position定位
static默认值
relative相对定位,相对它原本在文档流中的位置而进行的偏移,没有脱离文档流
absolute绝对定位,根据上一有定位的元素的border进行定位,会脱离文档流
fixed固定定位,与absolute基本相同,但是参考对象是浏览器视窗
sticky粘性定位,依赖于用户的滚动,然后固定在某一位置
inherit,从父级元素继承
CSS选择器优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
JS new操作符
1.创建一个空对象
2.链接到原型
3.绑定this指向,执行构造函数
4.返回对象
自己实现new函数
function mnew(fc){
var obj={};
obj.__proto__ = fc.prototype;
// Object.setPrototypeOf(obj,fc.prototype);//设置obj的原型
fc.call(obj);
return obj;
}
function Person(){
this.age = 20;
}
Person.prototype.male = 'man';
var p = mnew(Person);
console.log(p)
//1.创建一个空对象
//2.让obj链接到原型
//3.绑定this指向,指行构造函数
//4.返回对象
MVVM模式
MVVM即 Model-View-ViewModel
model可以理解为数据、view可以理解为DOM,而ViewModel就是负责model和view之间的联系,来实现双向绑定
MVC模式
MVC模式代表 Model-View-Controller(模型,视图,控制器)
model 数据模型,提供要展示的数据,包含数据和行为
view 负责进行模型的展示,也就视图,界面
controller 接收用户请求,委托给模型进行处理,处理完毕之后把返回的数据返回给视图,由视图负责展示
Vue生命周期
Vue实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是Vue的生命周期
Vue生命周期里的八个生命周期钩子函数
beforeCreat()创建前
created() 创建
beforeMount() 挂载前
mounted() 挂载
beforeupdate() 更改前
updated() 更改
beforeDestroy() 销毁前
destroy() 销毁
面向过程和面向对象
面向过程
面向过程是一种以事件为中心的编程思想,编程的时候把解决问题的步骤分析处理,然后用函数将这些步骤实现,在一步一步的具体步骤中再按顺序调用。
面向过程就好比是做一份蛋炒饭,先想做蛋炒饭第一步需要干什么,放点什么,然后一步一步的去完成。
面向对象
面向对象是一种系统中一切事物皆为对象的编程思想。
用做盖浇饭来解释,当做盖浇饭时,我们先把菜和饭分别做好,这时菜和饭就是两个不同的对象,然后需要什么口味的盖浇饭再将什么菜加入饭中就可以了,这样就可以很大程度的方便做出不同口味的盖浇饭。
垃圾回收
垃圾回收的两种方法
1.标记清除
当一个变量进入执行环境时,就将这个变量标记为进入幻境,当变量离开环境时,就标记为离开环境。被标记为离开环境得变量就会在垃圾回收器运行时被回收。
2.引用计数
引用计数就是跟踪并记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,这个值得引用次数就是1,如果这个变量引用了别的值,那么初始得值得引用次数就减1,当引用次数变为0时,垃圾收集器运行时就会回收它。
引用计数的缺点:因为每次都要遍历所有的变量,所以效率低下。
造成内存泄漏的原因
1.全局变量引起的内存泄漏,主要时是在函数中未声明直接赋值的情况。
2.闭包引起的内存泄漏,因为闭包会存在一直被引用的情况,所以不会被回收。
3.dom清空或者删除时,事件未清除导致的内存泄漏。
4.子元素存在引用引起的内存泄漏。当子元素被引用时,父元素无法被清除。
闭包
什么是闭包:闭包是指能够访问另一个函数作用域的的变量的函数。
JS三大特性
1.封装,封装就是当需要隐藏一些公共方法和属性时,就可以将这些属性和方法封装起来,从外部进行调用。
2.继承,继承就是当多个方法(对象)存在相同的属性和方法时,就把这些相同的属性和方法提取到一个公共的方法中,使用prototype去继承该方法。
3.多态,多态就是在执行同一操作但作用于不同对象时,返回不同的结果。
BFC
BFC直译为块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。
如:BFC区域不会与浮动的盒子重叠,BFC是一个独立的容器,不会影响到外面,计算BFC高度时浮动元素也会参与计算。
触发BFC的条件:
1.float的值不是none
2.position的值为flex和absolute
3.display值为inline-block、flex、table-cell、inline-flex等
4.overflow值不为visible的元素
对象的分类
在JavaScript中,对象分为三类
1.宿主对象(BOM、DOM)
2.原生对象(EMCAScript)
3.自定义对象
数组去重(四种方法)
//数组去重
var arr=[2,5,4,3,1,2,10,2,2,4,6,9,8,7,2,2,2];
console.log(arr)
//1.
var ar1=[...new Set(arr)];
console.log(ar1)
//2.
var ar2 = [];
for(var i = 0 ; i < arr.length ; i++){
if(ar2.indexOf(arr[i])==-1){
ar2.push(arr[i])
}
}
console.log(ar2)
//3.
for(var m = 0 ; m < arr.length ; m++){
for(var n = m+1 ; n < arr.length ; n++){
if(arr[m]==arr[n]){
arr.splice(n,1);
n--;
}
}
}
console.log(arr)
//4.
arr=[2,5,4,3,1,2,10,2,2,4,6,9,8,7,2,2,2];
var arr3 = [];
for(var j = 0 ; j < arr.length ; j ++){
if(arr3.includes(arr[j])==false){
arr3.push(arr[j])
}
}
console.log(arr3)
indexOf()查找数组中有没有这个元素
splice()从第几个元素开始截取几个元素
includes()查找数组中有没有这个元素
join()和split()
//split和join
//split()用于将字符串分割为数组,参与为以什么为间隔分割
//join()用于将数组转换为字符串,参数为分隔符,如果不写默认为逗号
var str = "1654313543513";
console.log(str)
var arr = str.split("");
console.log(arr);
var str2 = arr.join("");
console.log(str2)
call()和apply()
call:调用一个对象的一个方法,用另一个对象替换当前对象。
如: B.call(A,arg1,arg2) 即A对象调用B对象的方法
apply:调用一个对象的一个方法,用另一个对象替换当前对象
如 A.apply(B,arguments)
不同之处在于,call可以传递多个参数,而apply只能传两个参数,新的this对象和一个数组
数组增删合并
合并:ar1.concat(ar2)
删除 shift,从头部开始删除,改变原数组,返回被删除的元素
pop,从尾部开始删除,改变原数组,返回被删除的元素
也可以用splice方法,splice()第一个参数为开始的索引,第二个参数为替换几个值,第三个值为替换成什么,当第三个值为空时就成了删除。
截取字符串
splice()
substring()
两者的区别是,substring不接受负数参数,两者的返回值都是被截取的值。
//字符串截取
var a = '1324351351354131';
var a1 = a.slice(3);//4351351354131
console.log(a1)
console.log(a);
var a2 = a.slice(-3);//131
console.log(a2)
事件绑定
事件绑定有两种方法,一种是普通的添加事件,如 onclick 还有一种是事件监听 addEventListener
用普通的添加事件不支持为同一目标添加多个事件,最下面的事件会覆盖上面的。而用事件监听可以。
普通的添加事件使用 click = null 来取消事件
事件监听使用removeEventListener()取消绑定事件
事件监听不支持低版本ie
DOM事件流
1.事件捕获
2.事件处理
3.事件冒泡
阻止冒泡使用 stopPropagation()
事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener('click',function(e){
if(e.target.tagName == 'LI'){ //这里获取到的tagName是大写
console.log(e.target.innerHTML);
}
})
重绘和重排
重绘:一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,如改变某个颜色的背景等。
重排:一个元素的大小发生了改变,且因为它大小的改变也影响到了其他元素的大小和位置发生了改变,这个时候就会引起重绘。
重绘不一定引起重排,重排一定引起重绘
如何减少重绘和重排:
1.不要一条一条的修改DOM样式,尽量使用类的替换
2.不要把DOM节点的属性值放在一个循环中当成变量
3.不要使用table布局
4.不要在布局信息改变的时候做查询,会导致渲染队列强制刷新。
clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeigh
clientWidth,clientHeight为可见区域的大小
offsetWidth,offsetHeight为当前元素的大小
scrollWidth,scrollHeigh包括没看见的,总之就是整个页面的大小。
注意:JS在获取这些属性时会引起页面的重排,所以,如果要多次使用这些值,应该将他们存在变量中。
对象合并
1.Obj.assign()
可以把任意多个自身的可枚举的属性拷贝给目标对象,然后返回目标对象。
var obj1={
name:"saoge",
age:"20"
}
var obj2={
hobby:"game",
height:"180"
}
var obj3 = Object.assign(obj1,obj2);
console.log(obj3)
2.循环
var obj1={
name:"saoge",
age:"20"
}
var obj2={
hobby:"game",
height:"180"
}
// var obj3 = Object.assign(obj1,obj2);
// console.log(obj3)
for(var i in obj1){
if(obj1.hasOwnProperty(i) == true){ //确定是自有属性
obj2[i]=obj1[i];
}
}
console.log(obj2)
for..of 和 for in
for in 用来遍历对象的键名或者来遍历数组的索引
for of 用来遍历数组的元素。不能遍历对象
深拷贝和浅拷贝
浅拷贝
如果是基本类型,浅拷贝拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,无论哪一个对象改变了这个地址中的数据,都会影响到另一个对象。
深拷贝
深拷贝就是将一个对象从内存中完整的拷贝一份出来,在内存中新开辟一个内存空间来保存新对象,这样两个对象的更改都不会影响另一个对象。
简单深拷贝的实现
var obj1={
a:2,
b:5
}
var obj2={}
obj2.a=obj1.a;
obj2.b=obj1.b;
console.log(obj2)//{a:2,b:5}
obj2.a=10;
console.log(obj1); //{a:2,b:5}
console.log(obj2); //{a:10,b:5}
JSON.stringify()和JSON.parse()实现深拷贝
var obj1={
name:'骚哥',
age:18
}
var str = JSON.stringify(obj1);
var obj2 = JSON.parse(str);
obj1.age = 22;
console.log(obj1);//{name:"骚哥",age:22}
console.log(obj2);//{name:"骚哥",age:18}
注意点:
如果值中含有函数,undefined,symbol无法拷贝
无法拷贝不可枚举的属性,无法拷贝原型链
拷贝Data引用类型会变成字符串
拷贝RegExp引用类型会变成空对象
对象中含有NaN,Infinity 结果会变为Null
无法拷贝对象的循环应用
var obj1={
name:'骚哥',
age:18,
say:function(){
console.log('我是骚哥')
}
}
var str = JSON.stringify(obj1);
var obj2 = JSON.parse(str);
obj1.age = 22;
console.log(obj1);//{name:"骚哥",age:22,say:f} 注意,这里say()中引用的内容没有被拷贝过来
console.log(obj2);//{name:"骚哥",age:18}
obj2.say(); //obj2.say is not a function 报错
自定义函数实现能够拷贝引用对象的深拷贝
var obj1={
name:'骚哥',
age:18,
say:function(){
console.log('我是骚哥')
}
}
function clone(obj){
var newObj = {};
for(var key in obj){
newObj[key] = obj[key]
}
return newObj;
}
clone(obj1.say()); //我是骚哥
学习心得
老师讲的很细致,学到框架就有很多原理性的东西需要深入探究,需要自己多下功夫。
近期评论