自己建设网站麻烦吗,北京做百度推广的公司,重庆高端网站制作,网站开发要先买服务器吗1.display#xff1a;
2.bfc#xff1a;
Bfc是块级格式化上下文 子元素不受外界影响 有自己的渲染规则 比如说#xff1a;计算高度的时候浮动元素的高度也会计算在内
怎样触发BFC
绝对定位以及固定定位 flex布局 display不是none的情况 overflow#xff1a;hidde…1.display
2.bfc
Bfc是块级格式化上下文 子元素不受外界影响 有自己的渲染规则 比如说计算高度的时候浮动元素的高度也会计算在内
怎样触发BFC
绝对定位以及固定定位 flex布局 display不是none的情况 overflowhidden 总结
BFC就是一个块级元素块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器容器里的标签不会影响到外部标签
垂直方向的距离由margin决定 属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时浮动元素也参与计算 BFC解决了什么问题
1.使用Float脱离文档流发生高度塌陷
div classcontainer div classbox/div div classbox/div /div
可以看到上面效果给box设置完float结果脱离文档流使container高度没有被撑开从而背景颜色没有颜色出来解决此问题可以给container触发BFC上面我们所说到的触发BFC属性都可以设置。
2.Margin边距重叠 可以看到上面我们为两个盒子的margin外边距设置的是10px可结果显示两个盒子之间只有10px的距离这就导致了margin塌陷问题这时margin边距的结果为最大值而不是合为了解决此问题可以使用BFC规则为元素包裹一个盒子形成一个完全独立的空间做到里面元素不受外面布局影响或者简单粗暴方法一个设置margin一个设置padding。
div classcontainer div classbox/div pdiv classbox/div/p /div 包裹了一个p标签 3.两栏布局
可以看到上面元素第二个div元素为300px宽度但是被第一个div元素设置Float脱离文档流给覆盖上去了解决此方法我们可以把第二个div元素设置为一个BFC。
也就是给第二个元素设置displayflex即可 style div { width: 200px; height: 100px; border: 1px solid red; } /style body div stylefloat: left; 两栏布局两栏布局两栏布局两栏两栏布局两栏布局 /div
div stylewidth: 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的值为 truediv才会被创建此时再去获取 可以使用这个函数 因为获取值的时候想要实现的效果就是 输入框一出现就自动获取焦点 并拿到里面的值。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 { 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 obj3shallowClone(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 obj4deepClone(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
#
小结
前提为拷贝类型为引用类型的情况下
浅拷贝是拷贝一层属性为对象时浅拷贝是复制两个对象指向同一个地址深拷贝是递归拷贝深层次属性为对象时深拷贝是新开栈两个对象指向不同的地址 ← 和 区别分别在什么情况使用
