Estelle_qi-CSDN博客

原创 css元素居中的方法

目录标题水平居中1、给元素设置margin:0 auto2、margin 负值法3、transform4、table布局5、flex布局6、inline-block垂直居中1、margin：auto2、margin 负值法3、transform4、table布局5、flex布局水平垂直居中1、margin：auto2、margin 负值法3、transform4、table布局5、flex布局水平居中1、给元素设置margin:0 auto2、margin 负值法.outer{ position:

2021-08-12 17:28:32 448

原创 css 常见布局实现

文章目录css 布局圣杯布局双飞翼布局Flex 布局绝对定位布局表格布局网格布局三栏布局的实现方式1、使用 float：2、使用 position：3、使用 table 实现：4、flex 实现：5、grid 实现：6、圣杯布局7、双飞翼布局两列等高布局的实现方式1、负margin：2、使用 position3、使用 table 实现4、flex 实现5、grid 实现css 布局圣杯布局中间元素位于开头，父元素使用padding预留左右元素的位置，三个元素浮动，左元素使用margin负值和相对定

2021-08-11 18:02:29 447

原创 css浮动清除以及BFC

浮动浮动原理：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在 CSS 规范中，浮动定位不属于正常的页面流，而是独立定位的。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘。浮动清除：1、使用带 clear 属性的空元素在浮动元素后使用一个空元素： <div class="clear"></div> .clear{ clear: both; }2、使用 css 的 overflow 属性给浮动元素的容器添加属

2021-08-11 15:08:14 213

原创前端设计模式

设计模式概念设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。类型1、结构型模式：通过识别系统中组件间的简单关系来简化系统的设计。外观模式、代理模式2、创建型模式：处理对象的创建，根据实际情况使用合适的方式创建对象，创建型模式通过以某种方式控制对象的创建来解决问题。单例模式、工厂模式3、行为型模式：用于识别对象之间常见的交互模式并加以实现，增加了交互的灵活性。观察订阅模式、策略模式、迭代器模式、中介者模式、访问者模式外观模式把多个子系统中复杂逻辑进行抽象，从而提供一个更统

2021-04-12 10:38:19 132

原创 vue的路由模式

hash模式URL 中带有 “#” 则为 hash 模式，hash 模式 “#” 之前的内容会被包含在请求中，之后的不会包含在请求中。工作原理hashchange 事件，可以在 window 对象上监听 hash 的变化。window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); console.log(location.hash);}特点1、改变 URL 不会触发页面重新加载，不算是

2021-04-11 10:36:42 95

原创 js 中的6种继承方式

1、原型链的继承（ES5）让新实例的原型等于父类的实例。function Cat(){}Cat.prototype = new Animal();Cat.prototype.name = 'cat';特点实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性缺点1、无法实现多继承2、新实例无法向父类函数传参3、新实例共享父类属性，一个实例修改原型属性，其他实例也会被修改2、构造继承（ES5）使用父类的构造函数来增强子类实例，用 call() 和 apply()

2021-04-05 11:06:35 158 2

原创关于js中的this

文章目录this指向全局作用域中的this非箭头函数中的this箭头函数中的this特点事件绑定中的this定时器中的this构造函数中的thisthis 绑定形式默认绑定隐式绑定隐式丢失显式绑定三者异同new绑定特点this 特点this指向全局作用域中的thisthis ——> window非箭头函数中的this非箭头函数的 this 指向在函数被调用时绑定的，this ——> 调用的对象。var obj = { fn1:function() { console.lo

2021-04-05 10:46:32 193

原创 Webpack

什么是 webpack？webpack 是一个前端模块化方案，更侧重模块打包，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过加载器和插件对资源进行处理，打包成符合生产环境部署的前端资源。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。打包原理：将所有依赖打包成一个bundle.js，通过代码分割成单元片段，进行按需加

2021-04-04 22:04:26 129

原创 javascript的原型、原型链

文章目录原型概念作用属性prototype__ proto __Constructor方法hasOwnProperty()in 操作符原型链作用特点ES6 Class使用静态方法静态属性实例属性原型概念每一个javascript对象创建的时候，就会关联另一个对象，这个对象就是原型。作用原型是为了解决每个对象独占方法的问题，原型方法可以做到多个对象共享数据，对象可以从原型继承一些方法和属性。属性prototypeprototype 是函数才有的属性，这个属性指向函数的原型对象。prototyp

2021-04-04 19:41:21 106

原创前端所有安全问题总结

文章目录一、XSS 攻击防御二、CSRF 攻击防御三、iframe 风险防御四、点击劫持危害防御五、第三方依赖包带来的问题防御六、https 存在的风险过程防御七、CDN劫持防御八、本地存储数据泄露防御一、XSS 攻击XSS（Cross Site Scripting，跨站脚本），即攻击者往 Web 页面里嵌入恶意的客户端脚本，当用户浏览此网页时，脚本就会在用户的浏览器上执行，进而达到攻击者的目的。【获取用户的 Cookie、导航到恶意网站、携带木马】防御1、对输入和 URL 参数进行过滤，过滤掉会导

2021-04-04 14:55:18 2451 2

原创浏览器的缓存机制

浏览器缓存1、Service Worker运行在浏览器背后的独立线程，涉及到请求拦截，传输协议必须为 https，可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。2、Memory Cache内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了，读取速度快，且有时效性。3、Disk Cache存储在硬盘中的缓存，读取缓存需要对该缓存存放的硬盘文件进行 I/O 操作，读取速度慢

2021-04-04 10:27:06 154

原创 TCP三次握手、四次挥手及UDP详解

文章目录UDP概念应用场景TCP概念应用场景三次握手过程为什么要进行“三次”握手？第二次传回了 ACK，为什么还要传回 SYN？四次挥手过程为什么要进行“四次”挥手？为什么最后一次需等待2MSL（TIME_WAIT）？为什么会出现大量 CLOSE_WAIT 的现象？TCP 和 UDP 的区别为什么 TCP 是面向连接的？为什么 TCP 是可靠的？如何使 UDP 做到可靠传输？UDP概念用户数据协议 UDP（User Datagram Protocol），提供无连接的数据传输服务。应用场景即时通

2021-04-03 22:52:45 836

原创 http、https以及状态码超全详解

文章目录HTTP概念作用http 请求http 头部http 连接各版本的区别http1.0http1.1：http2.0：HTTPS概念作用工作原理优点缺点http 和 https 区别http 状态码重定向什么是重定向？什么时候会重定向？301 和 302为什么尽量使用 301？如何解决 304 问题？HTTP概念超文本传输协议（Hyper Text Transfer Protocol），是客户端和服务器端请求和应答的标准（TCP），属于应用层。http 的生命周期通过 Request 来界定，

2021-04-03 21:32:38 6825 8

原创进程和线程

进程概念进程是具有独立功能的程序在一个数据集合上运行的过程，它是并发执行的程序在执行过程中分配和管理资源的基本单位，因此进程是动态的。系统运行一个程序即是一个进程从创建，运行到消亡的过程。状态就绪（Ready）状态：进程已分配到除CPU以外的所有必要资源，只要获得处理机便可立即执行。执行（Running）状态：进程已获得处理机，其程序正在处理机上执行。阻塞（Blocked）状态：正在执行的程序，由于等待某个事件发生而无法执行。使用场景对资源的管理和保护要求高，不限制开销和效率时，使用多进程

2021-04-03 20:00:30 192

原创前端优化总结

前端优化1、减少 http 请求2、使用 http23、使用服务端渲染服务端渲染（SSR）客户端渲染（CSR）4、使用CDN原理优势场景5、缓存6、文件压缩7、图片优化（1）图片懒加载（2）响应式图片（3）使用缩略图代替大图（4）使用 iconfont 代替图片（5）使用 webp 格式的图片8、按需加载9、减少重绘重排重排重绘优化10、将 CSS 放在头部，JS 放在底部1、减少 http 请求一个完整的 HTTP 请求需要经过 DNS 域名解析、TCP 握手、浏览器发出 HTTP 请求、服务器接收

2021-04-01 22:07:52 184

原创前端模块化规范

模块化概念模块化就是将一个复杂的程序按照一定的规则封装成几个块，并组合在一起。块的内部数据与实现是私有的, 只是向外部暴露一些接口与外部其它模块通信。优势1、避免命名冲突2、更好的分离，按需加载3、更高复用性4、高可维护性script标签最初模块化的雏形是使用 script 标签，将每个 js 文件看作不同的模块，加载进来。缺点1、污染全局作用域。2、开发人员必须手动解决模块和代码库的依赖关系。3、文件必须按照 script 标签的书写顺序进行加载。4、在大型项目中各种资源难以管

2021-03-31 16:08:58 328

原创前端面试常见手写代码集合

手写代码集合1、节流和防抖节流防抖2、改变this指向的函数bindapplycall三者异同3、promise概念状态实现一个promisepromise.allpromise.race4、深拷贝5、发布订阅模式6、new7、Object.create8、Ajax9、Jsonp10、路由11、函数柯里化12、数组扁平化13、数组去重14、instanceof15、reduce16、sleep1、节流和防抖节流在 s 秒内即使被触发多次，也只能执行一次。function throttle(fn,

2021-03-30 11:16:38 889

原创前后端数据交互

前后端数据交互前后端数据交互方式有三种：1、form表单2、ajax3、websocketform表单<form action="/form.html" method="post/get"> <input type="text" name="username" placeholder="username"> <input type="password" name="password" placeholder="password"> &l

2021-03-29 14:26:23 2743

原创跨域和同源

跨域问题

2021-03-29 10:45:34 178

原创 Vue的生命周期详解

声明周期解释操作beforeCreate()在实例初始化后，this 指向创建的实例，不能操作 DOM 节点请求资源、数据created()实例已经创建完成之后被调用，DOM 未生成改变data中的数据，获取computed中的计算属性beforeMount()在挂载开始之前调用，data 已初始化，为虚拟 DOMmount()挂载到实例上之后调用，可以操作 DOM 节点ajax请求beforeUpdate()数据更新时调用，发生在虚拟 DOM...

2021-03-29 10:18:33 129

原创 vue的diff算法

数据变化时vue进行节点更新问题：有时修改了某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM树的重绘和重排。解决：先根据真实 DOM 生成一颗 virtual DOM，计算 virtual DOM 中节点数据变化的部分，将该部分进行原生 DOM 操作，而不用重新渲染整个页面。virtual DOM用 js 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插入到文档当中。当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树的差异。把所记

2021-03-29 09:48:25 214

原创 Vue的数据双向绑定

双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。数据劫持：是在访问或者修改对象的某个属性时，拦截这个行为，进行额外的操作或者修改返回结果。1、监听器Observer：通过 Object.defineProperty 的getter和setter进行读取和赋值的属性来劫持并监听所有属性，如果有变动的，就通知订阅者。2、订阅者Watcher：可以收到属性的变化通知并执行相应函数，从而更新视图。3、解析器Compile：可以扫描和解析每个节点的相关指令，并根据初始

2021-03-28 23:05:02 247

原创 Event Loop

Event Loop浏览器或Node的一种使得js单线程运行时不会阻塞的一种机制，也就是使用异步的原理。js有一个主线程（main thread）和调用栈（call-stack），所有的任务都会被放到调用栈中，等待主线程执行完毕后，再依次执行栈中的任务，直到栈被清空。宏任务和微任务任务队列分为两种：macro-task、micro-taskmacro-task 包含任务：script(主程序代码)，setTimeout， setInterval，setImmediate，I/O，UI render

2021-03-28 16:40:25 56

qq_38713274的博客