- 博客(59)
- 收藏
- 关注
RSS订阅原创 Virtual DOM原理
一、什么是Virtual DOMVirtual DOM 本质上是对DOM更加轻量级描述的JS对象。二、为什么需要Virtual DOMDOM操作起来更慢，而且频繁地变动DOM会造成浏览器的回流或者重绘，会严重地影响到性能；在patch过程中，也会将差异尽可能地一次性更新到DOM中，保证了DOM不会出现性能差的情况。Virtual DOM的好处：在现代前端框架中，无需手动操作DOM。一方面是保证了程序的性能，（多人协作开发项目中如果review不严格可能，开发出来的代码性能较低）不会出现性
2021-10-31 11:44:45
353
原创 options请求（跨域预检）
概述options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。一、什么是 options 请求HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"*"）使用该方法。(简而言之，就是可以用 opti
2021-10-29 17:57:40
14102
原创 CSS作用域（样式分割）
CSS作用域（样式分割）的使用在vue中，让css样式只在当前组件中生效：scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。二、scoped的实现原理vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： <style scoped> .test { color: blue; } </style> <temp
2021-10-29 11:32:06
861
原创 端口合法，字符串消消乐，格式转换和洗牌算法
端口号为整数，范围在0~65535之间function isPort(port) { if (/^[1-9]\d*|0$/.test(port) && port * 1 >= 0 && port * 1 <= 65535){ return true } return false;}console.log(isPort(8080));//trueconsole.log(isPort("cfe"));//false字符串消消乐链接
2021-10-28 14:02:28
220
原创 判断一个变量是否是一个空对象
// 方法一：就是粗暴的直接转字符串，然后强行比较function isEmptyObject1(obj) { return (JSON.stringify(obj) === '{}');}console.log(isEmptyObject1({}));//trueconsole.log(isEmptyObject1({name: "xiaoming"}));//false// 方法二：通过对象的键长度来判断function isEmptyObject2(obj){ return
2021-10-25 15:48:09
337
原创 鉴权的4种基本方法
一、基于服务器常出现的问题Seesions： 每次认证用户发起请求时，服务器需要去创建一个记录来存储信息。当越来越多的用户发请求时，内存的开销也会不断增加。可扩展性： 由于sessions存放在服务器内存中，伴随而来的是可扩展性问题。当我们想要增加服务器来解决负载问题时，session里的关键性信息会限制我们的扩展。CORS(跨域资源共享)： 当我们扩展应用程序，让数据能够从不同设备上访问时，跨域资源的共享会是一个让人头疼的问题。在使用Ajax抓取另一个域的资源时（移动端访问我们的API服务器），
2021-10-21 11:07:09
10529
原创 自己捋的常见算法
1.打印图形// // 三角形打印function log(n){ for(var i = 1; i <= n; i ++){ for(var j = 0; j < n - i; j ++){//循环使前边空格产生 document.write(" "); } for(var k = 0; k < i; k ++){//使星星产生 document.write(" * ");
2021-10-19 15:58:14
100
原创 js多线程的实现
一、前言JS作为脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。但是单线程的语言，有一个很致命的确定。如果说一个脚本语言在执行时，其中某一块的功能在执行时耗费了大量的时间，那么就会造成阻塞。这样的项目，用户体验是非常差的，所以这种现象在项目的开发过程中是不允许存在的。二、JS实现多线程方式（Worker）JS为我们提供了一个Worker的类，它的作用就是为了解决这种阻塞的现象。当我们使用这个类的时候，它就会向浏览器申请一个新的线程。这个线程就用
2021-10-19 11:10:04
7184
原创 vue中data必须是一个函数
一、 VUE组件中的data必须是函数Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了;在JavaScript中，只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。 这是因为js本身的特性带来的，跟vue本身设计无关。例如：const MyComponent = function(
2021-10-19 10:48:35
178
原创 Vue的模板和数据是如何渲染成DOM的
一、实现过程1、new Vue 初始化数据等;2、$mount 将 render、template 或 el 转为 render 函数;3、生成一个渲染 Watcher 收集依赖，并将执行render 函数生成 vnode 传递给 patch 函数执行，渲染页面;4、当渲染 Watcher 依赖发生变化时，执行Watcher 的 getter 函数，重新依赖收集。并且重新执行 render 函数生成 vnode 传递给 patch 函数进行页面的更新。参考文献：【面试题解析✨】Vue
2021-10-19 10:34:30
609
原创 Vue Router的路由模式hash和history的实现原理
一、Vue-router 中hash模式和history模式的关系最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。二、hash模式实现原理早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#
2021-10-18 22:23:00
4104
1
原创 Promise实现原理及使用
一、什么是回调地狱在以往的js中使用异步编程，都是串联多个异步回调，嵌套大量的回调函数（将一个函数作为参数传递给另个函数），也就是“回调地狱”的解决方法。如下代码所示：function a(functionb(){ c(function d(){ })})造成代码混乱，可读性差和后期维护困难等负作用。二、Promise基本用法和实现原理Promise是异步编程的一种解决方案，解决前端异步函数多层嵌套所产生的回调地狱问题，以及回调地狱错误不方便捕捉的问题；可以
2021-10-18 13:09:59
410
原创 观察者模式与发布订阅
一、定义观察者模式（Observer Pattern）观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。发布订阅模式（Pub-Sub Pattern）说明：发布订阅模式只是观察者模式的一个别称。 但是经过时间的沉淀，似乎他已经强大了起来，已经独立于观察者模式，成为另外一种不同的设计模式。在现在的发布订阅模式中，称为发布者的
2021-10-12 10:59:24
408
原创 Ajax与JSON的定义及优缺点
一、定义Ajax 是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新。是一种创建交互式网页应用的网页开发技术。json是一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。二、优缺点Ajax优点： 异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担；缺点： 异步回调问题、this指向问题、路由跳转back问题；对搜索引擎的支持比较弱，对于一些手机还不是很好的支持。JSON优点：数据格式比较简单，易于读写，格式都是压
2021-10-07 11:38:25
649
原创 显示与隐藏
一、CSS显示与隐藏的方法1.display 显示display属性规定元素应该生成的框的类型。值为none： 此元素不会显示，从而达到影藏的效果；值为block： 将此元素设为块级元素，从而达到显示的效果；隐藏后不占据页面空间，不再为其保留位置。2.visibility可见性visibility 属性规定元素是否可见。值为hidden： 使元素不可见；值为visible： 是元素可见；隐藏后继续占据页面空间上的位置。3.overflow 溢出overflow属性规
2021-10-03 16:27:57
682
原创 Vue中的Computed和Watch的区别
computed 计算属性支持缓存，只有依赖数据（一般在data中的数据）发生变化，才会重新进行计算；不支持异步，当computed内有异步操作时无效，无法监听数据的变化；computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值；如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一对一或多对一，一般使用computed；如果computed属性属性值是函数，那么默认会走get方法，函数返回
2021-10-03 14:45:12
78
原创 进程与线程（前端部分）
一、线程与进程进程是资源分配的最小单位，线程是操作系统可识别的最小执行和调度单位；一个进程可以有多个线程，线程运行在进程中，一个线程只能属于一个进程；一个标准的线程由线程ID、当前指令指针（PC）、寄存器集合和对栈组成；在现代面向线程设计的计算机结构中，进程是线程的容器，是程序的实体（程序是指令、数据及其组织形式的描述）；线程有就绪、阻塞和运行三种基本状态, 就绪状态： 是指线程具备运行的所有条件，逻辑上可以运行，在等待处理机； 运行状态： 是指线程占有处理机正在运行； 阻塞状态：
2021-10-02 10:08:21
281
原创 div水平垂直居中的4种方法
HTML： <div id="box"> <div id="chil-box"> test </div> </div>方式一： #box { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ba
2021-10-01 10:54:29
101
原创 防抖与节流
一、概念函数防抖和函数节流二者都是优化高频率执行js的一种手段；常用于绑定resize、scroll、mousemove 等事件；可控制在事件持续触发的过程中按自己的频率地去执行函数。防抖： n秒后在执行该事件，若在n秒内被重复触发，则重新计时。节流：n秒内只运行一次，若在n秒内重复触发，只有一次执行。相同点：都可以使用定时器来实现；目的都是，降低回调执行频率。节省计算资源。区别：函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeou
2021-09-30 17:16:12
66
原创 常见数组去重
方法一：function remote_Repeat1(arr) { let newArr = []; for(let i = 0; i < arr.length; i++) { if(!newArr.includes(arr[i])) { newArr.push(arr[i]); } } return newArr;}var test1 = [1, 2, 3, 4, 4, 4,5,5,5,5];console.log(remote_Repeat1(
2021-09-25 23:12:00
56
原创 回文、分位隔符和斐波那契数列
是否会文function isHuiWen(str) { return str == str.split("").reverse().join("")}console.log(isHuiWen("mnm")); //true逐步解析console.log('eyhuwa'.split(""));//[ 'e', 'y', 'h', 'u', 'w', 'a' ]console.log('eyhuwa'.split("").reverse());//[ 'a', 'w', 'u', 'h.
2021-09-25 23:03:46
52
原创 五种常用排序
冒泡排序原理： 比较两个相邻的元素，将值大的元素交换到右边。实现思路： 依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。优点： 比较简单，空间复杂度较低，是稳定的。缺点： 时间复杂度太高，效率不好。function bubbleSort(arr) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] &g.
2021-09-25 22:59:37
924
原创 DOM事件流和事件委托
DOM事件流（分为三个阶段）：捕获阶段目标阶段冒泡阶段在addeventListener()的第三个参数(useCapture)设为true，就会在捕获阶段运行，默认是false冒泡事件委托利用冒泡原理(子向父一层层穿透)，把事件绑定到父元素中，以实现事件委托...
2021-09-24 22:59:56
134
原创 如何清除浮动
额外标签 clear:both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .
2021-09-24 22:48:01
50
原创 script标签中defer和async
Problem：script会阻塞页面的加载，如果是引用外部js的话，可能会由于这个外部js请求很久而出现空白页问题解决方法：defer / asyncdefer<script src="a.js" defer></script><script src="b.js" defer></script>不会阻止页面解析，并行下载对应的js文件;下载完之后不会执行;等所有其他脚本加载完之后，在DOMContentLoaded事件之前执行对
2021-09-24 22:43:48
84
原创 数据双向绑定
有Object.defineProperty() 和 Proxy 对象（代理）两种方式来实现数据双向绑定。 用对数据的劫持操作的方式。当访问或者修改某个对象的某个属性的时候，通过一段代码进行拦截行为，然后进行额外的操作，然后返回结果。Vue2.x 是使用 Object.defindProperty()，来进行对对象的监听的;Vue3.x 版本之后就改用Proxy,进行实现的。原理: 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视.
2021-09-24 20:40:24
3789
1
原创 从输入URL到获取页面的完整过程
简述：先进行DNS域名解析，获取域名对应的IP地址；浏览器与服务器建立tcp连接；浏览器向服务器发送http请求，服务器根据浏览器请求的资源返回；浏览器将拿到的资源进行解析和和加载，最终对页面渲染，将页面呈现给用户。详析：一、先进行DNS域名解析先查看本地hosts文件，查看有没有当前域名对应的IP地址，诺有的话直接发起请求；没有的话会在本地域名服务器去查找，该查找属于递归查找；如果本地域名没有查找到；会从根域名服务器查找，该过程属于迭代查找，根域名会告诉你从哪个服务器查找，最后查
2021-09-23 19:35:52
692
原创 Vue与React的异同
两者的本质区别Vue 本质是 MVVM 框架，由 MVC 发展而来;React 是由前端组件化框架，由后端组件化发展而。Vue 使用模板（最初由angular提出），React 使用JSX（jsx不是react独有的）。React 本身就是组件化，没有组件就不是React，虽然 __Vue__也支持组件化，不过是在MVVM上的扩展。两者的共同点都支持组件化；都是数据驱动视图。自己的看法模板语法上，我更加倾向于 JSX，因为它更接近js 语法（列如vue的循环用的是新指
2021-09-23 13:45:49
168
原创 git的介绍和常用命令
Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。1.git框架介绍Workspace：开发者工作区Index / Stage：暂存区/缓存区Repository：仓库区（本地仓库）Remote：远程仓库2.文件上传命令操作流程图：3.常用命令第一步：配置提交人信息git config --global user.name yourName //配置用户名git config --global user.email yourEmai.
2021-09-23 11:21:52
151
1
原创 http1.0~2.0的区别和https实现原理
http1.0、http1.1和http2的区别http0.9只能进行get请求;http1.0添加了POST，HEAD，OPTION，PUT，DELETE等;http1.1增加了长连接keep-alive，增加了host域，而且节约带;http2 多路复用，头部压缩，服务器推送。https和http有什么区别，https的实现原理http无状态无连接，而且是明文传输，不安全。https传输内容加密，身份验证，保证数据完整性。https实现原理:浏览器把自己支持的加密规则（
2021-09-22 17:17:35
1501
原创 XSS和CSRF的实现原理和防范方法
xss脚本注入不需要你做任何的登录，它会通过合法的操作（比如：在URL中输入、在评论框中输入），向你的页面注入脚本（可能是就是、HTML代码块等）。防御：编码：对用户输入的数据进行HTML Entity编码，把字符串换成转义字符。Encode的作用是将$var等一些字符进行转化，使得浏览器在最终输出结果上是一样的。过滤：移除用户输入的和事件相关的水性。CSRF跨域请求伪造在未退出A网站的情况下访问B，B使用A的cookie去访问服务器。防御： token，每次用户提交表.
2021-09-22 17:16:05
954
原创 CDN实现原理及作用
什么是CDNCDN即，Content Delivery Network或Content Ddistribute Network，即内容分发网络。作用: 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。基本思路： 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。1.首先访问本地的 DNS
2021-09-22 17:14:43
1344
原创 TCP与UDP
TCP和UDP区别连接方面tcp面向连接，udp不需要连接；可靠性-tcp是可靠传输，一旦传输过程中丢包的话会进行重传；udp是不可靠传输，但会最大努力交付。工作效率UDP实时性高，比TCP工作效率高。是否支持多对多-TCP是点对点的；UDP支持一对一，一对多，多对多。首部大小TCP首部占20字节；UDP首部占8字节。...
2021-09-22 17:12:09
181
原创 http缓存
缓存分为强缓存和协商缓存。强缓存在浏览器加载资源时，先看cache-control里的max-age，判断数据有没有过期，如果没有过期，就直接使用该缓存；过期的话就重新向服务器请求新资源；但是有些用户可能会在没有过期的时候就进行了刷新，这个时候浏览器就回去请求服务端，要想避免这么做，可以在cache-control里面加一个immutable。public允许客户端和虚拟服务器缓存该资源，所有的客户端都可以访问到；private只允许客户端缓存该资源；no-storage不允许强
2021-09-19 20:24:16
54
原创 跨域及解决方法
1. 跨域是什么跨域本质是浏览器基于同源策略的一种基本安全手段。同源策略就是一种约定是浏览器最基本的安全功能。同源是指在同一个域（协议、主机、端口相同），当其中一项不相同时，就会产生跨域问题。2. 解决方法通过jsonp跨域；-document.domain+iframe跨域；-location.hash+iframe；-window.name+iframe跨域；-postMessage跨域；-跨域资源共享（CORS）；-nginx代理跨域；-nodejs中间件代理跨域；-We
2021-09-19 19:46:29
177
原创 JS的继承
1. 原型继承原理：把父类的实例作为子类的原型。缺点：子类的实例共享了父类构造函数的引用属性，不能传参。var person = { friends: ["a", "b", "c", "d"];} var p1 = Object.create(person);p1.friends.push("aaa"); console.log(p1.__proto__ == person);//trueconsole.log(p1);// {}console.log(person);//{
2021-09-19 11:21:29
65
原创 闭包的详解
一、什么是闭包闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现；也就是说，闭包可以让你在一个内层函数中访问到其外层函数的作用域（也通常被称为是函数之间的沟通的桥梁）。1.1 闭包的3个特性函数嵌套函数；函数内部可以引用函数外部的参数和变量；参数和变量不会被垃圾回收机制回收。1.2 函数作为返回值经典①function fn() { let age = 19; return function() { return age; }}let
2021-09-18 23:49:58
743
原创 代理、模块化、ES6和CommonJS的区别
一、代理的几种定义字面量定义，对象里面的get和post；类定义，class中的get和set；Proxy对象，里面传两个对象；第一个对象是目标对象target，第二个对象是专门放get和set的handler对象。Proxy和上面两个的区别在于Proxy专门对对象的属性进行get和set。代理的实际应用Vue的双向绑定（Vue2用的是Object.definedProperty，Vue3用的是Proxy）；校验值；计算属性值（get的时候加以修饰）...
2021-09-18 09:01:54
85
原创 Get和Post的区别
缓存get请求时幂等的，请求的数据是可以缓存的；post请求时不幂等的，查询对数据是有副作用的，不可缓存。传参get传参，参数是在URL中的；post传参，参数是在请求体中的。安全性get较不安全；post较为安全；但是，准确地说两者都不安全，都是明文传输的，路过公网的时候都会被访问到，不管是Url还是header还是body，都会被访问到，要想做到安全，就需要使用https。参数长度get参数长度有限，是较小的；post传参长度不受限制。发送数据p
2021-09-15 17:39:12
86
原创 Vue3.0的优化（相较于Vue2.0）
一、更快1.1 重构了Virtual DOM在传统Virtual DOM的数据改变渲染上，在数据变更之后，新的Virtual DOM进行patch算法比较，匹对出新旧DOM之间的差异，再将差异进行修改。传统Virtual DOM性能跟模板大小呈正关系，而与动态节点数量无关，模板（组件）越大，那么进行数据更新时损耗的性能就有多大；这种方式利用率低，数据更新时，要对比整个模板（组件），存在性能损耗。 Vue3.0 Virtual DOM是采用动静结合的方式，将模板基于动态指令切割为嵌套的区块，各
2021-09-15 16:16:03
762
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人