学习记录1.14

wyzqhhhh

已于 2024-02-26 12:54:37 修改

阅读量971

点赞数 21

文章标签： css css3 html

于 2024-01-14 02:06:56 首次发布

本文链接：https://blog.csdn.net/wyzqhhhh/article/details/135578670

版权

1.display：

2.bfc：

Bfc是块级格式化上下文子元素不受外界影响有自己的渲染规则比如说：计算高度的时候浮动元素的高度也会计算在内

怎样触发BFC

绝对定位以及固定定位 flex布局 display不是none的情况 overflow：hidden

总结：

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列

BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签

垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠

计算BFC的高度时，浮动元素也参与计算

BFC解决了什么问题

1.使用Float脱离文档流，发生高度塌陷

</div>

可以看到上面效果给box设置完float结果脱离文档流，使container高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给container触发BFC，上面我们所说到的触发BFC属性都可以设置。

2.Margin边距重叠

可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

</div>

包裹了一个p标签

3.两栏布局

可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

也就是给第二个元素设置display：flex即可

<body> <div style="float: left;"> 两栏布局两栏布局两栏布局两栏两栏布局两栏布局 </div>

<div style="width: 300px;display:flex;"> 我是蛙人，如有帮助请点个赞助个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭 </div> </body>

3.如何自适应？栅栏格式

4.vue2 vue3 $set

5.nexttick 当数据更新了，在dom中渲染后，自动执行该函数，

因为vue更新dom是异步执行的。当修改数据的时候 vue会开启一个异步队列视图不会第一时间就进行更新而是等所有异步队列数据都变化完毕才会进行统一更新

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

什么时候使用它呢？

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中不然会报错。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

————————————————

更改数据后当你想立即使用js操作新的视图的时候需要使用它。比如说数据改变后重新获取焦点

现在有一个场景就是有一个div 使用v-if来判断它是否出现点击一个按钮 v-if的值会改变变成true的时候 div出现并获取input框中的值，如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取，

可以使用这个函数

因为获取值的时候想要实现的效果就是输入框一出现就自动获取焦点并拿到里面的值。this.$refs.inputTitle.focus()不在外面嵌套$nextTick，就会出错，因为vue是在执行完函数时候判断数据是否改变在进行重新获取焦点也就是说函数执行完之后input框才可见然后获取焦点是在函数内执行的。

所以就要使用nexttick函数。因为nexttick方法是在渲染完页面之后这才执行的就可以正常获取焦点了

————————

6.判断数据类型

instanceof. 值返回true false 判断引用数据类型

const arr = [1, 2, 3]

console.log(arr instanceof Array) // true

Typeof 判断基本数据数据类型

console.log(typeof undefined); // "undefined"

console.log(typeof null); // "object"

console.log(typeof {}); // "object"

console.log(typeof []); // "object"

console.log(typeof NaN); // "number"

Object.prototype.tostring() 都可以

7.内存泄漏

内存泄漏是指不再用到的内存，没有及时释放。既不能使用，又不能回收。

导致内存泄漏的几种常见情况：

1.意外形成全局变量
解决方法：加上 ‘use strict’ 启用严格模式来避免这类问题, 严格模式会阻止你创建意外的全局变量.
2.闭包
解决方法：在函数外部定义事件处理函数，解除闭包。或在闭包中，删除没用的属性以减少对内存的消耗。或在外部函数中删除对DOM的引用。
3.清除页面dom元素时，dom元素绑定的事件未解绑
解决办法：手工移除事件。
4.循环引用

function fn() {

var a = {};

var b = {};

a.pro = b;

b.pro = a;

}

fn();

解决办法：手工解除循环引用。

5.未清除的计时器或延时器
解决办法：clearTimeout()，clearInterval()。

=================

1.说一说设计模式

单例模式：

指在内存中只会创建并且只创建一次对象的设计模式，在程序中多次使用一个对象，并且作用相同的时候，为了防止频繁的创建对象使得内存飙升，单例模式可以让程序只在内存中创建一个对象，让所有需要调用的地方都共享这一个单例对象。

有两种类型；懒汉式和饿汉式

懒汉式：在真正需要使用对象时才去创建该单例类对象
饿汉式：在类加载时已经创建好该单例对象，等待被程序使用

场景例子：

1 资源共享： 当系统中的多个部分需要共享某个资源时，使用单例模式可以确保该资源只被创建一次，避免资源浪费。

日志记录： 在需要记录日志的系统中，单例模式可以确保只有一个日志实例，以便集中管理日志信息。

使用闭包实现一个单例模式：

在这个示例中，Logger是一个立即执行函数，返回一个包含createInstance方法的对象。getInstance方法用来创建并返

回单例实例。在第一次调用getInstance时，会创建一个实例并将其存储在instance变量中，后续调用则直接返回这个实例。

这种方式使用了闭包来维护实例，并且只暴露了一个公共的访问点getInstance来获取这个实例。

观察者模式：定义对象间的一种一对多的依赖模式，当一个对象的状态发生改变的时候，所有的依赖于他的对象都得到通知并被自动更新

主要用来解决：一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作

观察者模式的应用：

事件处理： 在前端开发中，观察者模式常用于事件处理。DOM元素的事件监听机制本质上就是观察者模式的应用。
消息订阅与发布：不同模块可以订阅感兴趣的消息，当消息发布时，所有订阅者都会收到通知。
数据绑定： 一些现代的前端框架，如Vue和React，采用了观察者模式用于数据绑定。当数据发生变化时，与之相关联的视图会自动更新。
异步编程中的回调： 观察者模式也可以用于处理异步编程中的回调。当异步操作完成时，通知所有相关的观察者执行相应的操作。

所有对象都有原型吗？

不是的，大多数对象都有原型。

然而，有一些对象例外，它们并不具有原型。

一个典型的例子是Object.prototype。Object.prototype 是原型链的最顶层，它本身不再继承其他对象，因此不具有原型。其他一些例外对象包括null和undefined。它们也没有原型，因为它们不是实例对象，它们是原始值。

常见的this指向：

全局作用域中或者普通函数中this指向全局对象window
立即执行函数this必定指向window
定时器this指向window
事件中this指向事件源对象
方法中谁调用就指向谁
构造函数中this指向对象实例

1.全局作用下默认绑定window 全局作用下独立调用函数绑定window

2.隐式绑定：对象內调用方法谁调用就指向谁

let obj = {

foo: function () {

console.log(this); //this指向obj

}

obj.foo()

===================

let obj = {

foo: function () {

console.log(this); //obj

function test() {

console.log(this); //window 为什么？因为test独立调用

}

test()

} } obj.foo()

===================

隐式丢失

let obj = {

foo: function () {

console.log(this); //window 为什么不是obj？ bar拿到obj.foo的引用，然后在全局下独立调用

} }

let bar = obj.foo

bar()

=======

3.显式绑定

call、apply、bind bind返回一个新函数，新函数指向绑定的对象，旧函数不会

4、new绑定

this指向函数实例化之后的对象

绑定规则优先级：

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

深浅拷贝：

从上图发现，浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样

浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象

// 浅拷贝

const obj1 = {

name : 'init',

arr : [1,[2,3],4],

};

const obj3=shallowClone(obj1) // 一个浅拷贝方法

obj3.name = "update";

obj3.arr[1] = [5,6,7] ; // 新旧对象还是共享同一块内存

console.log('obj1',obj1) // obj1 { name: 'init', arr: [ 1, [ 5, 6, 7 ], 4 ] }

console.log('obj3',obj3) // obj3 { name: 'update', arr: [ 1, [ 5, 6, 7 ], 4 ] }

但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

// 深拷贝

const obj1 = {

name : 'init',

arr : [1,[2,3],4],

};

const obj4=deepClone(obj1) // 一个深拷贝方法

obj4.name = "update";

obj4.arr[1] = [5,6,7] ; // 新对象跟原对象不共享内存

console.log('obj1',obj1) // obj1 { name: 'init', arr: [ 1, [ 2, 3 ], 4 ] }

console.log('obj4',obj4) // obj4 { name: 'update', arr: [ 1, [ 5, 6, 7 ], 4 ] }

小结

前提为拷贝类型为引用类型的情况下：

浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址
深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址

← == 和 ===区别，分别在什么情况使用

wyzqhhhh

关注

21
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
学习记录1.14

可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。
复制链接

扫一扫