学习记录1.14

news/2024/2/25 13:55:02/文章来源: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 class="container">

        <div class="box"></div>

        <div class="box"></div>

    </div>

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

2.Margin边距重叠

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

<div class="container">

        <div class="box"></div>

        <p><div class="box"></div></p>

    </div>

包裹了一个p标签

3.两栏布局

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

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

<style> div { width: 200px; height: 100px; border: 1px solid red; } </style> 

 <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 资源共享: 当系统中的多个部分需要共享某个资源时,使用单例模式可以确保该资源只被创建一次,避免资源浪费。

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

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

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

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

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

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

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

观察者模式的应用

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

所有对象都有原型吗?

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

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

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

常见的this指向:

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

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

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

 let obj = {

      name: 'obj',

      foo: function () {

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

      }

    }

    obj.foo()

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

let obj = {     

 name: 'obj',     

 foo: function () {     

   console.log(this);    //obj       

 function test() {       

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

 }       

 test()  

   }   }    obj.foo()

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

隐式丢失

 let obj = {     

 name: '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 ] }

1

2

3

4

5

6

7

8

9

10

11

#

小结

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_926288.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于信号完整性的PCB设计原则

最小化单根信号线质量的一些PCB设计建议 1. 使用受控阻抗线&#xff1b; 2. 理想情况下&#xff0c;所有信号都应该使用完整的电源或地平面作为其返回路径&#xff0c;关键信号则使用地平面作为返回路径&#xff1b; 3. 信号的返回参考面发生变化时&#xff0c;在尽可能接近…

wins安装paddle框架

一、安装 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/windows-pip.html 装包&#xff08;python 的版本是否满足要求&#xff1a; 3.8/3.9/3.10/3.11/3.12&#xff0c; pip 版本为 20.2.2 或更高版本 &#xff09; CPU 版:…

LLM论文:ALCE (Enabling Large Language Models to Generate Text with Citations)

这是一篇RAG领域的文章&#xff0c;原文在这&#xff1a;https://aclanthology.org/2023.emnlp-main.398.pdf 时间[Submitted on 24 May 2023 (v1), last revised 31 Oct 2023 (this version, v2)]背景LLM在信息搜索、生成带引用的文本时存在幻觉问题&#xff0c;即事实准确性…

《 乱弹篇(四)》

既然是“乱弹”&#xff0c;弹&#xff08;谈&#xff09;题便可以包罗万象&#xff1b;天上地下&#xff0c;飞的走的&#xff0c;你的我的他的事儿&#xff0c;甚至还有许许多多八竿子都打不着的怪涎事儿&#xff0c;都可成为弹&#xff08;谈&#xff09;资 。比如&#xff…

计算机毕业设计 | 大型SpringBoot宠物医院管理 宠物商城购物系统(附源码)

写在前面 Le Dao宠物医院管理系统是一个超大型的&#xff0c;完成度很高的&#xff0c;集宠物医疗、宠物美容、宠物交易、宠物周边等各种功能于一身的&#xff0c;权限涵盖普通用户、医生、化验师、美容师、仓库主管、采购员等多种角色于一体的大型宠物医疗&#xff0c;购物系…

Rust-Panic

什么是panic 在Rust中&#xff0c;有一类错误叫作panic。示例如下&#xff1a; 编译&#xff0c;没有错误&#xff0c;执行这段程序&#xff0c;输出为&#xff1a; 这种情况就引发了一个panic。在这段代码中&#xff0c;我们调用了Option::unwrap()方法&#xff0c;正是这个方…

【开源】基于JAVA语言的网上药店系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 药品类型模块2.3 药品档案模块2.4 药品订单模块2.5 药品收藏模块2.6 药品资讯模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 药品表3.2.3 药品订单表3.2.4 药品收藏表3.2.5 药品留言表…

【Django开发】美多商城项目第2篇:Django用户注册和登录开发(附代码,已分享)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端…

Kubernetes (K8S) 3 小时快速上手 + 实践

1. Kubernetes 简介 k8s即Kubernetes。其为google开发来被用于容器管理的开源应用程序&#xff0c;可帮助创建和管理应用程序的容器化。用一个的例子来描述&#xff1a;"当虚拟化容器Docker有太多要管理的时候&#xff0c;手动管理就会很麻烦&#xff0c;于是我们便可以通…

【SQL注入】SQLMAP v1.7.11.1 汉化版

下载链接 【SQL注入】SQLMAP v1.7.11.1 汉化版 简介 SQLMAP是一款开源的自动化SQL注入工具&#xff0c;用于扫描和利用Web应用程序中的SQL注入漏洞。它在安全测试领域被广泛应用&#xff0c;可用于检测和利用SQL注入漏洞&#xff0c;以验证应用程序的安全性。 SQL注入是一种…

初识OpenCV

首先你得保证你的虚拟机Ubuntu能上网 可看 http://t.csdnimg.cn/bZs6c 打开终端输入 sudo apt-get install libopencv-dev 回车 输入密码 回车 遇到Y/N 回车 OpenCV在线文档 opencv 文档链接 点zip可以下载&#xff0c;点前面的直接在线浏览&#xff0c;但是很慢 https…

k8s云原生环境搭建笔记——第二篇

目录 1、使用普通方式安装prometheus和grafana1.1、安装kube-state-metrics容器1.1.1、下载并修改yaml文件1.1.2、导入kube-state-metrics镜像1.1.3、执行yaml文件目录 1.2、安装node-exploer1.2.1、创建名称空间prometheus1.2.2、执行yaml 1.3、安装prometheus1.3.1、创建集群…

基于python集成学习算法XGBoost农业数据可视化分析预测系统

文章目录 基于python集成学习算法XGBoost农业数据可视化分析预测系统一、项目简介二、开发环境三、项目技术四、功能结构五、功能实现模型构建封装类用于网格调参训练模型系统可视化数据请求接口模型评分 0.5*mse 六、系统实现七、总结 基于python集成学习算法XGBoost农业数据可…

多行SQL转成单行SQL

如下图所示 将以上多行SQL转成单行SQL 正则表达式如下 (?s)$[^a-zA-Z()0-9]*结果如下 灵活使用,也未必只能使用Sublime Text 提供了一个在线工具

[Docker] Docker为什么出现

Docker为什么出现 一款产品&#xff1a; 开发–上线 -->两套环境 | 应用配置 开发即运维&#xff01; 环境配置十分麻烦&#xff0c;每一个机器都要部署环境&#xff08;Redis, ES, Hadoop&#xff09; 费时费力 项目带上配置环境安装打包。 传统&#xff1a; 开发jar&…

基于pyqt5+scapy 根据ip 具体端口 进行扫描 的程序

先给出代码 import sysfrom PyQt5 import uic from PyQt5.QtWidgets import *from scapy.all import * import argparse import logging from scapy.layers.inet import IP, TCP from scapy.sendrecv import sr1class MyWindow(QWidget):def __init__(self):super().__init__(…

AI人工智能工程师证书专业认证培训班有用吗?

当然有用&#xff0c;它即让自身技术技能有所提升&#xff0c;也拿到行内有含金量的证书&#xff0c;让自己在选择职业、升职加薪中更有竞争力。但是要擦亮眼睛&#xff0c;建议大家如果要找人工智能培训&#xff0c;就找性价比较高的培训班&#xff0c; 人工智能AI培训班怎么…

IP风险画像:源头防范网络攻击的全面策略

在当今数字化的时代&#xff0c;网络攻击呈现多样化和复杂化的趋势&#xff0c;为了确保网络的安全&#xff0c;制定全面的IP风险画像并从源头防范网络攻击是至关重要的。ip数据云将探讨如何通过建立IP风险画像来识别和应对潜在的威胁&#xff0c;从而实现更加安全可靠的网络环…

UML-用例图

提示&#xff1a;用例图是软件建模的开始&#xff0c;软件建模中的其他图形都将以用例图为依据。用例图列举了系统所需要实现的所有功能&#xff0c;除了用于软件开发的需求分析阶段&#xff0c;也可用于软件的系统测试阶段。 UML-用例图 一、用例图的基础知识1.用例图的构成元…

Spring Boot 3 + Vue 3实战:引入数据库实现用户登录功能

文章目录 一、实战概述二、实战步骤&#xff08;一&#xff09;创建数据库&#xff08;二&#xff09;创建用户表&#xff08;三&#xff09;后端项目引入数据库1、添加相关依赖2、用户实体类保持不变3、编写应用配置文件4、创建用户映射器接口5、创建用户服务类6、修改登录控制…