web
文章平均质量分 59
web
royalpioneer
这个作者很懒,什么都没留下…
展开
-
解决外边距坍塌问题
块级盒子在垂直方向上会有外边距坍塌的现象,为什么会有,需要去翻翻W3C文档外边距坍塌的情况有以下几种:(1)兄弟节点:如果是相向的margin,只有其中一个较大的margin会起作用(2)父子节点:如果是同向的margin,只有一个较大的margin会起作用解决办法有以下几种:(1)后者使用position定位(2)后者使用inline-block布局(3)使用BFC给其中一个套进BFC里面(4)使用flex布局,主轴设置为垂直的...原创 2021-08-25 19:54:09 · 98 阅读 · 0 评论 -
清除浮动方法梳理
当一个父容器中的子元素变为浮动后,父容器就会坍塌,下面的盒子也会就此补充上来因此,为了解决这样的问题,就有了清除浮动的几种方案:<!-- 清除浮动 --><div class="container"> <div class="inner"></div></div><style> html, body { margin: 0; padding: 0; } .co原创 2021-08-20 20:29:36 · 109 阅读 · 0 评论 -
js常见手写题梳理
1、使用XHR发起对 /api 发起GET请求 与 POST 请求:XHR: 创、开、配、达、错、发回调函数写法:let xhr = new XMLHTTPRequest();xhr.open("GET", url, true);xhr.responseType = "json";xhr.setRequestHeader("Accept", "application/json");xhr.onreadystatechange = function() { let state = xh原创 2021-08-11 16:26:52 · 134 阅读 · 0 评论 -
浏览器渲染过程梳理
当我们输入一个 www.google.com 到浏览器搜索框的时候,经过一系列通信链路,我们最终拿到了一份HTML文件。浏览器会使用这份HTML文件来 构建DOM、构建CSSOM、再将两者合并成Render树、再排版Layout、再绘制Paint。整个Web页面的构建过程我们可以通过监听 document 的 readystate 变化事件,变化过程为:构建DOM的过程就是将HTML字符串解析成DOM树构建CSSOM时是 将浏览器默认的样式,和用户自定义的样式构建将上述DOM和CSSOM的过程原创 2021-08-10 12:27:42 · 97 阅读 · 0 评论 -
[CSS] 选择器梳理
1、选择器选择器第一个要关注的点就是它们的优先级了:从位置上来看:内嵌 > 内联 > 外联 、 重复时后写的会覆盖掉先写的从选择器类型来看:后面跟!important的属性 > id选择器 > (class、属性、伪类)选择器 > (标签、伪元素)选择器 > *通配符选择器 > 浏览器的自带的默认属性另外选择器是可以组合的,如果在组合的过程中某个元素的样式属性出现了重复,我们就可以用求和的方式计算优先级,从而判断最终的结果样式。组合的方式有以下几种:原创 2021-08-09 18:12:00 · 63 阅读 · 0 评论 -
[JS-OOP] 封装
ES5实现一个类的方式是使用函数,以及函数的3个内部对象:this、prototype、new.target,如:实例成员定义在构造函数内部,是每个实例各自维护的内容,格式为:this.a = 1;this.fn = function(){}原型成员定义在原型上,是每个实例共享的内容,格式为:Fn.prototype.b = 2;Fn.prototype.fn1 = function() {};用这种方法定义一个类未免会让代码显得过于零散,好在ES6给我们提供了一套class语法糖。cl原创 2021-08-02 13:19:25 · 60 阅读 · 0 评论 -
[JS-OOP] 继承
Js是通过原型链实现继承的,有以下几种方式:1、原型链继承:方式:子类 的 prototype 属性指向 父类 的 一个实例局限:(1)父类实例 的 实例属性 会变成 下方原型链 所有实例 的 原型属性(2)创建子类实例时,不能自定义源自父类的实例属性,源自父类的实例属性只能采用默认值function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { re原创 2021-08-02 12:37:01 · 99 阅读 · 0 评论 -
DOM练习
(1)创建Excel表格(2)设计一个todo-list(3)实现弹窗组件(4)红包模拟器(5)数字键盘(6)上传文件并不刷新页面原创 2021-07-31 20:32:40 · 70 阅读 · 0 评论 -
计算机网络
1、TCP建立连接与断开连接TCP通信实质上是两个进程间的通信,除此之外进程之间的通信可以通过:管道、消息队列、共享内存、信号、信号量。补充见小林coding博客为什么要三次握手?实质上解释为什么多余三次,少于三次不行为什么要四次挥手?TCP与UDP的差异2、HTTP缓存机制3、DNS域名解析过程4、CDN加速的原理...原创 2021-07-30 15:06:41 · 67 阅读 · 0 评论 -
在浏览器中进行跨源通信
为了保证用户信息的安全,防止恶意网站窃取数据,浏览器拥有一项同源策略。同源策略规定,不同源的站点在 LocalStorage、SessionStorage、IndexDB、DOM上不能共享,AJAX请求不能发送。两个站点同源,具体是指 协议+域名+端口号 要相同。但是如果我们的一些这正常合法的逻辑中需要跨源通信或共享资源该怎么办呢?如果是共享存储内容(cookie、LocalStorage、SessionStorage)可以使用 postMessagepostMessage的使用方法为:假定 A原创 2021-07-29 16:13:22 · 121 阅读 · 0 评论 -
[javascript] 使用函数
N个指针函数名就是指向函数的指针因此一个函数可以有多个函数名可以通过 函数.name 获取N个参数function不关心参数数量,在函数内部可以使用 arguments 类数组对象来获取每一个参数(箭头函数无)也可以使用拓展运算符 …args 来获取参数,你拿到的args一定是形如这个格式的:[ 所有参数 ]js中函数不能重载,所谓重载就是不同函数签名就是两个函数,而 js 中是不同函数名才是两个函数,意味着后定义的函数会覆盖前一个函数不过可以以检查函数参数数量与类型+分类讨论的方式来模拟函原创 2021-07-24 12:28:44 · 76 阅读 · 0 评论 -
使用vue-router自动生成导航菜单
当我们选用ElementUI作为页面开发的组件库,并打算创建一个如下的菜单表项:如果我们采用 ElementUI 库中的 el-menu 组件来实现的话,效果会很不错,但是代码的画风可能是这样的: <el-menu> <el-submenu index="1"> <el-menu-item index="1-1"></el-menu-item> <el-menu-item index="i-2"&原创 2021-07-19 16:17:16 · 3332 阅读 · 0 评论 -
容同学深夜洗牌竟然是因为..
某天深夜,我翻开了群聊记录,发现每个歪歪斜斜的气泡上都写着“随机“两个字。我横竖睡不着,仔细看了半夜,才从字缝里看出字来,满屏都写着四个字是“洗牌算法”!– 鲁迅解决思路要实现随机发送n个的需求,可以先将数据使用洗牌算法随机重排,然后选用连续的n个数据即可。洗牌算法有三种,对应三种思想–“抽牌”、“换牌”、“插牌”,后者都是对前者进行了不同程度上的优化,我们来看看这几种洗牌是怎么样实现的,适用于哪些场景。一、抽牌法 ( Fisher-Yates Shuffle)思路:从牌堆随机抽出,..原创 2021-07-19 11:37:52 · 76 阅读 · 0 评论 -
图解Git常用指令
之前使用git都是 add 、 commit 、 push 一套流程,完全当个上传下载器来使用,现在来较为系统的学习下git指令的用法,并画图总结下:最初状态我们约定一下,最初只有一条提交记录的状态,如图:git commit新建1次提交git branch Tomgit checkout Tommaster和Tom各自提交一次git merge Tomgit checkout Tom; git merge mastergit rebase Tom我们回到master 和原创 2021-07-19 11:27:37 · 130 阅读 · 0 评论 -
使用VueRouter自动生成导航菜单
我们在搭建Web的后台管理系统时,会选择 ElementUI 进行快速搭建,但是在某些场景下,单纯的使用组件是不能满足要求的。因为需求是在不断增加,不断变化的,如果像 ElementUI 给的示例去维护后台管理系统的菜单栏的话,代码会非常臃肿,维护起来也不是很方便:菜单是一个树形结构,VueRouter的配置项 routes 也是树形结构,每一个具体的路由都对应着一个页面,因此可以利用 routes 来配合 ElementUI菜单组件 动态生成菜单。大体思路如下:(1)拿到routes: this原创 2021-07-15 18:13:33 · 1165 阅读 · 0 评论 -
Javascript的一些坑点(二)
1、this指向问题当我们需要抽离一个类/对象的函数出来使用时,需要手动调整函数内部的this指向如:class Foo { constructor(num) { this.num = num; } getNum() { return this.num; }}let obj = new Foo();print(obj.getNum);function print(fn) { Promise.resolve() .then(function() { fn(); re原创 2021-07-12 12:21:52 · 69 阅读 · 0 评论 -
Javascript踩坑记录
在使用JS进行程序设计时,往往最终的结果会事与愿违,我将导致这种情况的因素称为坑点。1、Array.prototype.sort([fn])需要对数组原地稳定排序时,可以使用 arr.sort(fn), 但别忘了指定排序规则函数fn(a,b),否则会按元素的unicode码大小升序排序,如[1,2,10] => [1,10,2]2、Number类型运算js中无整数,只有IEEE754标准的双精度64位浮点数,因此做加减乘除运算的时候会很坑:// 第一个坑点0.1 + 0.2 不等于 0.3原创 2021-04-25 14:52:46 · 431 阅读 · 0 评论 -
理解闭包,应用闭包
PS:从onenote复制出来就变成图片了,神奇原创 2021-07-04 13:46:34 · 46 阅读 · 0 评论 -
使用Promise进行异步编程
1、Promise调用链Promise是一个有限状态自动机Promise在收到既定事件后,会根据预设的规则进行转换状态,转换完后执行相应回调Promise 拥有3种状态PENDING 初始状态FULFILLED 已兑现REJECTED 已拒绝转换规则fulfill / resolve 将 PENDING 转换为 FULFILLED (已敲定)reject 将 PENDING 转换为 REJECTED (已敲定)处于已敲定 settled 状态下的 Promise 的状态原创 2021-07-03 23:40:17 · 449 阅读 · 0 评论