abuanden的博客_CSDN博客-技能树,JavaScript基础,前端面试题杂谈领域博主

abuanden

码龄2年

查看详细资料

个人成就

获得27次点赞
内容获得25次评论
获得77次收藏

TA的专栏

兴趣领域设置

前端

javascriptcss
网络

https
职场和发展

面试

搜TA的内容

原生JS实现简单弹窗和遮罩层功能

遮罩层为父子关系 /* html */<div class="container"> <div id="popup"> <span>主题</span> <div> <span>1</span> <span>2</span.

发布博客 2021.04.09 ·

Vue封装全局防抖节流函数

一：目录结构二：utils.js文件/* 防抖节流函数 */let timeout = null // 创建一个标记用来存放定时器的返回值let canRun = true;//!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！export function debounce(fn) { return function() { clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = se

发布博客 2021.04.07 ·

js类型判读

判断是不是函数1. fun1 instanceOf Function2. fun1.__proto__== Function.prototype3. typeof4. Object.prototype.toString.call() =>// ‘[object Function]’5. constructor判断是不是数组1. arr1 instanceOf Array2. arr1.__proto__==Array.prototype3. Array.isArray（最好用的

发布博客 2021.03.30 ·

数组去重

文章目录一、利用ES6 Set去重（ES6中最常用）二、利用for嵌套for，然后splice去重（ES5中最常用）三、利用indexOf去重四、利用includes五、利用hasOwnProperty六、利用Map数据结构去重七、利用filter选自：JavaScript数组去重（12种方法，史上最全）一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'t

发布博客 2021.03.30 ·

JS判断属性和方法是否是自身的

一.hasOwnproperty所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。var test = function () {}test.func = function () { console.log(222);}test.prototype.wuwu = function () { console.log(333);

发布博客 2021.03.28 ·

cookie、session、token

一、常见验证方式cookie：客户端使用 cookie直接认证，需要设置 cookie为 httpOnly，可以防止 xss攻击。但是无法防止 csrf攻击。需要设置伪随机数 X-XSRF-TOKEN。（推荐，不需要处理 xss，并且xsrf 随机数有完善的应用机制）自定义请求头token：客户端使用 auth授权头认证，token存储在 cookie中。这样可以防止 csrf攻击，但是需要防止xss攻击。，因为 csrf只能在请求中携带 cookie，而这里必须从 cookie中拿出相应的值并放到

发布博客 2021.03.26 ·

前端常见网络攻防问题

前端常见安全问题的十个方面：iframeopenerCSRF（跨站请求伪造）XSS（跨站脚本攻击）ClickJacking（点击劫持）HSTS（HTTP严格传输安全）CND劫持HTTPS中间人攻击SQL注入Dos服务拒绝攻击一、iframe1. 如何让自己的网站不被其他网站的 iframe 引用？// 检测当前网站是否被第三方iframe引用// 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。if(top.location != self.

发布博客 2021.03.25 ·

构造函数方法与原型链方法的区别

ES5的解释在new一个实例之后，他的实例可以调用构造函数和prototype上面的方法。但是不同的是，定义在构造函数里面的方法，会在每一个实例里面创建一个函数，占用空间。每个实例的test方法指向不同内存。而prototype中的方法，只占用一块内存，所有实例指向他，节约空间。 function Cat(x,y) { this.test1 = () => { console.log("我是1"); } } Ca

发布博客 2021.03.22 ·

2、虚拟内存和物理内存

虚拟内存和物理内存物理内存就是内存条的大小，一般来说4G、8G左右。代码，数据运行都要到这里来，cpu才能运行。（32位系统最高物理内存是2 32 = 4GB）虚拟内存是在磁盘空间（一般几TB）里面划分出和物理内存大小一样的空间出来（比如4GB），用来放置代码。物理内存和虚拟内存里面都以4KB（8KB也有）为基本单位划分区域。称作（页框）和（页）。然后通过页表建立映射关系。cpu工作时，先通过发送虚拟地址，MMU通过页表解析虚拟地址。如果在物理内存里面，则直接运行。如果不在的话，则参数缺页异常，

发布博客 2021.03.16 ·

1、进程和线程详解

文章目录一、什么是进程和线程二、深入理解2.1 进程(线程+内存+文件/网络句柄)2.2 线程(栈+PC+TLS)2.3 TLS:3. 进程之间的是怎么进行交互的呢？4. 线程之间又是怎样进行交互？5.小结：选自：一篇让你明白进程与线程之间的区别与联系结论提前讲：进程和线程的关系：（1）一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程。（2）资源分配给进程，同一进程的所有线程共享该进程的所有资源。（3）线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信（TCP

发布博客 2021.03.14 ·

7、Vue双向绑定原理和实现

原理视图（view）变化更新数据（data）。这个很简单，通过事件监听就可以实现数据（data）变化更新视图（view）。通过数据劫持（即Object.defineProperty( )方法）结合发布者-订阅者模式下面重点介绍数据变化更新视图。总流程：全文浓缩为一句话：Vue是采用1.数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter2. 在数据变动时发布消息给订阅者3. 触发相应的监听回调请看完再回

发布博客 2021.03.14 ·

5、作用域链和原型链的区别

针对的对象不同作用域链：针对变量原型链：针对构造函数（对于对象的属性，方法）形式不同作用域链：作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。如：var a = 1;function b(){ var a = 2; function c(){ var a = 3; console.log(a); } c();}b();最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了

发布博客 2021.03.14 ·

3、Vue组件通信的六种方式

选自：vue组件间通信六种方式（完整版）方法一、props/$emit（必掌握）父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现1.父组件向子组件传值（props）这是最最常用的父子组件通信方式，父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的方法：父组件 => 定义传参名字和数据 v-bind:name = ‘parameter’子组件 => props

发布博客 2021.03.11 ·

2、Vue：虚拟Dom，Diff算法通俗易懂的解释

选自：vue之虚拟DOM、diff算法一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有

发布博客 2021.03.10 ·

1、Vue的生命周期和钩子函数

选自：理解vue实例的生命周期和钩子函数vue生命周期钩子函数的正确使用方式一、vue实例的生命周期生命周期：二、结合生命周期理解钩子函数时间线：create => mounted => updated => destoryvue2.0提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应：也可以这么看：结合代码：<!DOCTYPE html><html><head> <title>钩子函数

发布博客 2021.03.10 ·

5、Ajax原理以及Fetch

选自：Ajax原理一篇就够了fetch 如何请求常见数据格式文章目录一、什么是Ajax二、Ajax原理是什么三、Ajax的使用1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)2.向服务器发送请求3.服务器响应处理（区分同步跟异步两种情况）**①同步处理****②异步处理**什么是readyState？什么是status？③GET和POST请求数据区别一、Fetch API:序言二、与Ajax对比三 Promise复习四请求常见数据格式1.fetch请求本地文本数据2.fetc

发布博客 2021.03.09 ·

3、同源策略、跨域解决方案

选自：同源策略和跨域的解决方案前端常见跨域解决方案（全）什么是跨域 & 跨域的3种解决方案文章目录同源策略1. 什么是同源?2. 为什么制定同源策略?3. 同源策略有什么影响，哪些需要跨域操作?４. 跨域有风险吗?跨域的解决方案1. 降域 document.domain2. JSONPJSONP的简单实现过程：jsonp跨域存在的问题：3、CORS跨域资源共享(重点掌握）客户端需要做什么?两种请求简单请求非简单请求CORS怎么设置同源策略1. 什么是同源?所谓同源是指：协议、域名、端口

发布博客 2021.03.09 ·

2、浏览器缓存策略

选自：面经汇总（三）——浏览器和HTTP协议文章目录缓存策略Doctype强缓存和协商缓存1.强缓存（Cache-control）2. 协商缓存（Last-Modifined）缓存：cookie、session、webStorage1. cookie，sessionStorage和localStorage2. cookie和session总结：多个标签页之间进行通信1.通过localStorage2.通过cookie+setInterval缓存策略Doctype< Doctype > 标

发布博客 2021.03.08 ·

1、简述浏览器渲染机制

选自：简述浏览器渲染机制文章目录一：为什么要了解浏览器渲染页面的机制二：基本概念三：需要注意的是：四：浏览器渲染的整个流程浏览器的加载、解析时间线一：为什么要了解浏览器渲染页面的机制目的：主要还是性能的优化。了解浏览器如何进行加载，我们可以在引用外部样式文件，外部JS时，将它们放到合适的位置，是浏览器以最快的速度，将文件加载完毕。了解浏览器如何进行解析，我们可以在构建DOM结构，组织CSS选择器的时候，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明白渲染的

发布博客 2021.03.08 ·

8、this指向全解答

选自：文章目录this 是什么this 的四种绑定规则1. 默认绑定2. 隐式绑定**`多层调用链`**隐式丢失（函数别名）隐式丢失（回调函数）3. 显示绑定call和apply硬绑定4. new 绑定绑定规则的优先级绑定例外扩展：箭头函数case 1 (正常调用)this 是什么理解this之前，先纠正一个观点，this 既不指向函数自身，也不指函数的词法作用域。如果仅通过this的英文解释，太容易产生误导了。它实际是在函数被调用时才发生的绑定，也就是说this具体指向什么，取决于你是怎么调用的函

发布博客 2021.03.08 ·