10 2021 档案

Webpack 配置 proxy 代理解决跨域问题
摘要：1. 同源策略：https://www.cnblogs.com/twinkleG/p/15357210.html 2. CORS 跨域：https://www.cnblogs.com/twinkleG/p/15359409.html 3. 以上两个链接是个人对同源策略以及CORS跨域的一些浅薄理解， 阅读全文
posted @ 2021-10-22 20:57 TwinkleG 阅读(923) 评论(0) 推荐(0)
JavaScript 闭包！
摘要：1. 闭包：指的是那些引用了另一个函数作用域变量的函数，通常在嵌套函数中出现闭包。 2. 简单理解一下定义和执行一个函数时发生的事情 【假设在全局作用域中定义函数】：首先，在定义一个函数时，会为这个函数创建一个作用域链，它预装载了全局变量对象，之后将这条作用域链保存到这个函数的内部属性 [[ sco 阅读全文
posted @ 2021-10-18 19:09 TwinkleG 阅读(42) 评论(0) 推荐(0)
第10章 函数【ES6部分】
摘要：1. ES6 箭头函数：一对圆括号包含命名参数，后跟一个胖箭头(=>)，加函数体。 可以实现和普通函数一样的功能，不同之处在于： （1）无法使用 arguments、super 、new.target 等，同时不能用于构造函数，箭头函数没有 prototype 属性. 在箭头函数中使用 argume 阅读全文
posted @ 2021-10-14 14:41 TwinkleG 阅读(137) 评论(0) 推荐(0)
手写 forEach
摘要：1. 在循环时，使用 while 的效率要比 for 高，因此尽量采用 while 循环： Array.prototype.myforEach = function (callback) { let index = -1; const length = this.length; while (++i 阅读全文
posted @ 2021-10-11 20:38 TwinkleG 阅读(110) 评论(0) 推荐(0)
深拷贝 和 浅拷贝
摘要：1. 首先需要了解一下在内存中数据的存放形式。内存中，分为了 栈区、堆区、全局/静态区、只读区。栈区主要存放局部变量值、函数命名参数，堆区存放引用类型变量。全局/静态区存放全局变量和静态变量，只读区存放常量和代码段。 2. 深拷贝和浅拷贝实际上是针对于应用类型数据来说的，因为对于基本数据类型变量来说 阅读全文
posted @ 2021-10-11 20:11 TwinkleG 阅读(136) 评论(0) 推荐(0)
Vue 数组和对象属性的响应式问题
摘要：Vue 数组和对象属性的响应式问题：接 https://www.cnblogs.com/twinkleG/p/15389823.html 由于 JavaScript 的限制，响应式原理无法追踪数组和对象中属性的变化【官方文档写的是无法追踪数组和对象的变化，我觉得不严谨，对象和数组改变了还是可以追踪到 阅读全文
posted @ 2021-10-10 17:26 TwinkleG 阅读(203) 评论(0) 推荐(0)
Vue API 详解（1）—— data
摘要：1. 官方文档：https://cn.vuejs.org/v2/api/#data 2. 首先这里涉及到一个面试题：组件中的 data 为什么必须是函数形式，而不能是对象形式？ 原因在于，组件可能会被多次实例化使用，如果组件中的 data 仍然是对象形式，则所有的实例化组件共享引用同一个 data 阅读全文
posted @ 2021-10-10 16:50 TwinkleG 阅读(496) 评论(0) 推荐(0)
Vue 响应式原理
摘要：1. 这里有一个简单的响应式原理 demo：https://juejin.cn/post/6844903597986037768【转载】 2. 如果说需要我手写出来那还是有一定难度，在这里总结一下： 首先，Vue 利用 Object.defineProperty 实现了数据劫持； 属性分为两种，一种 阅读全文
posted @ 2021-10-09 20:06 TwinkleG 阅读(70) 评论(0) 推荐(0)
一个关于变量提升的题目【暂时不会】
摘要：1. 下面两个情况分别输出什么？ function a(b, c) { function b() {} alert(b); // function b() {} } a(1, 2); function a(b, c) { var b; alert(b); // 1 } a(1, 2); 2. 不太理 阅读全文
posted @ 2021-10-07 22:04 TwinkleG 阅读(37) 评论(0) 推荐(0)
神奇的 margin/paddding 百分比布局
摘要：1. 今天累的有点迷茫，躺在床上看着看着面试题，突然看到个好玩的，然后自己坐起来打开电脑跑了一下代码。 2. margin、padding 在使用百分比时，它的百分比值是参照父元素的 width 值，是的，margin-top/left/right/bottom 都是 以父元素宽度为参照。 而且如果 阅读全文
posted @ 2021-10-07 21:43 TwinkleG 阅读(74) 评论(0) 推荐(0)
Web安全——攻击与防护
摘要：1. 针对 Web 应用的攻击模式： （1）主动攻击：以服务器为目标的主动攻击：SQL 注入攻击、OS 命令注入攻击，主动攻击指的是攻击者直接访问 Web 应用，把攻击代码传入的攻击模式，需要攻击者能够访问到那些资源。 （2）被动攻击：以服务器为目标的被动攻击：利用圈套策略执行攻击代码的攻击模式，攻 阅读全文
posted @ 2021-10-07 17:15 TwinkleG 阅读(223) 评论(0) 推荐(0)
HTTP 用户身份认证
摘要：1. 有时，服务器端可能只希望特定的用户访问，那这个时候就需要服务器端确认客户端用户的身份。 2. HTTP 1.1 有四种对用户身份验证的方式： （1）BASIC 认证 （2）DIGEST 认证 （3）SSL 客户端认证 （4）Web 表单认证 3. （1）BASIC 认证：HTTP 1.0 推出 阅读全文
posted @ 2021-10-07 16:37 TwinkleG 阅读(1004) 评论(0) 推荐(0)
HTTP 1.0 | 1.1 | 2.0 区别
摘要：【1】 1.0 VS 1.1 区别： （1）长链接：HTTP 1.1 默认使用长链接，即在多次请求时，只需要一次 TCP 连接，接下来请求响应、请求响应......不需要每次请求都要建立一次 TCP 连接，而 HTTP 1.0 默认是短链接，需要 使用头部字段 Connection：keep-ali 阅读全文
posted @ 2021-10-05 21:15 TwinkleG 阅读(194) 评论(0) 推荐(0)
GET 和 POST 区别？
摘要：1. GET 用于获取资源，POST 用于发送实体主体。 2. GET 传参拼接在 URL 尾部，有长度限制，不是针对参数，而是说整个 URL 长度不能超过某个值【最大值随浏览器有所不同】；POST 传参在实体主体中，无长度限制。 3. GET 参数在 URL 尾部，直接暴露，相比较于 POST 不 阅读全文
posted @ 2021-10-05 20:51 TwinkleG 阅读(52) 评论(0) 推荐(0)
HTTP 常见请求方法
摘要：1. GET 用于获取资源 2. POST 用于发送实体主体 3. DELETE 用于删除文件 4. PUT 用于上传文件 5. CONNECT 要求使用隧道协议连接代理服务器，主要是用 SSL、TLS 协议将通信内容加密后经过网络隧道传输。 6. OPTIONS 向服务器查询支持的请求方法 7. 阅读全文
posted @ 2021-10-05 20:41 TwinkleG 阅读(252) 评论(0) 推荐(0)
URI 和 URL 的区别？
摘要：URI 统一资源标识符，作用是唯一标识一个资源 URL 统一资源定位符，作用是提供一个资源的路径 URL 是 URI 的子集，URI 像是人的身份证号，可以唯一标识一个人的身份【唯一标识资源】，URL 像是人的地址和姓名，可以根据 URL 定位找到这个人【定位找到资源】。 阅读全文
posted @ 2021-10-05 20:05 TwinkleG 阅读(154) 评论(0) 推荐(0)
Function 和 Object 原型链关系
摘要：转自：https://blog.csdn.net/weixin_41784648/article/details/108252962 一些关于原型链的题目： 1. 让 Foo 继承 Bar，求 Foo.__proto__、Foo.prototype.__proto__ 以及 Function.__p 阅读全文
posted @ 2021-10-05 19:23 TwinkleG 阅读(64) 评论(0) 推荐(0)
HTTP 和 HTTPS 理解
摘要：1. 首先 HTTP + 明文加密 + 身份验证 + 数据完整性保护 = HTTPS【HTTP 协议 + SSL/TLS 协议】 2. HTTP 协议是用来客户端和服务器端进行通信的协议，但其存在三个缺点： 【1】报文是明文发送的，即没有经过任何加密处理，在传输过程中可以被窥视到信息，比如客户端输入 阅读全文
posted @ 2021-10-04 16:06 TwinkleG 阅读(150) 评论(0) 推荐(0)
《图解HTTP》【6】Cache-Control
摘要：1. 通用首部字段：请求报文和响应报文都会使用的字段； 2. Cache-Control：通过指定字段 Cache-Control 的指令，可以控制缓存的行为。 ※ 注意对 no-cache 和 no-store 的区分：字面意思上看似乎 no-cache 代表不缓存，但它实际意思是 不缓存“过期” 阅读全文
posted @ 2021-10-04 15:13 TwinkleG 阅读(108) 评论(0) 推荐(0)
《图解HTTP》【5】网关、隧道、代理
摘要：1. 通信数据转发程序：代理、网关、隧道 2. 【1】代理：代理是具有转发功能的应用程序，客户端和服务器端的中间人，接收客户端的请求，转发给服务器，同时接收服务器的响应，响应给客户端。 代理服务器负责转发，源服务器是提供响应数据的服务器，每次通过代理服务器，都会在请求头部字段 Via 添加代理服务器 阅读全文
posted @ 2021-10-04 14:40 TwinkleG 阅读(205) 评论(0) 推荐(0)
《图解HTTP》【4】HTTP状态码
摘要：1. 客户端发送请求给服务器端，服务器端响应内容给客户端，而状态码用以描述服务器端响应是否正常。 2. 状态码分类： 1xx：信息性状态码 接收的请求正在处理 2xx：成功状态码 请求正常处理完毕 3xx：重定向状态码 需要附加操作以完成请求 4xx：客户端错误状态码 服务器无法处理请求 5xx：服 阅读全文
posted @ 2021-10-04 14:09 TwinkleG 阅读(150) 评论(0) 推荐(0)
《图解HTTP》【3】
摘要：1. 内容协商返回最合适的内容：P57 一个 Web 网站可能有多份相同内容的页面，但使用的语言不同，我们需要根据内容协商来返回最适合的语言版本给客户端。 内容协商以请求头部的某些字段作为判断基准： 【1】Accept 【2】Accept-Charset 【3】Accept-Language 【4】 阅读全文
posted @ 2021-10-04 13:30 TwinkleG 阅读(30) 评论(0) 推荐(0)
两栏布局三种方式实现
摘要：1. 实际上类似 三栏布局，仍然是三种实现方式：浮动、定位、flex 【1】float + margin-left / BFC（overflow: hidden;） <div class="box"> <div class="left"></div> <div class="right"></div 阅读全文
posted @ 2021-10-03 20:23 TwinkleG 阅读(133) 评论(0) 推荐(0)
flex-basis 优先级问题
摘要：1. content【flex弹性盒宽度】-> width【指定弹性子元素宽度】-> flex-basis 【指定弹性子元素宽度】 优先级依次上升，不过虽然 flex-basis 优先级大于 width，但 max-width 和 min-width 可以限制 flex-basis 的宽度。 阅读全文
posted @ 2021-10-03 20:20 TwinkleG 阅读(110) 评论(0) 推荐(0)
CSS 绘制同心圆
摘要：1. 利用三个 div 盒子，以及 margin、border-radius 属性实现同心圆效果： <style> .outer { width: 150px; height: 150px; background-color: deeppink; border-radius: 50%; } .mid 阅读全文
posted @ 2021-10-03 19:37 TwinkleG 阅读(1425) 评论(0) 推荐(0)
CSS 绘制三角形
摘要：1. 两种 CSS 三角形画法 【1】选取一条底边，另外两边作为腰： .box1 { width: 0; height: 0; border-left: 40px solid blue; border-right: 60px solid mediumspringgreen; border-botto 阅读全文
posted @ 2021-10-03 19:27 TwinkleG 阅读(179) 评论(0) 推荐(0)
《图解HTTP》【2】
摘要：1. 发送多种数据的多部分对象集合 P53，引出 Content-Type 头部字段 2. 获取部分内容的范围请求：在下载过程中，如果遇到网络波动问题中断了下载，那么我们不想看到的是重头开始下载，我们希望它记录下中断处，下次从此处开始下载。那么我们就需要指定下载的范围，对于一份 10000 字节的数 阅读全文
posted @ 2021-10-03 19:06 TwinkleG 阅读(34) 评论(0) 推荐(0)
《图解HTTP》【1】
摘要：1. 找到本好书《图解HTTP》，这 HTTP 真的是太难啃了，今天把这本书读了一部分，简单记一下需要注意的地方，以后要详细研究. 2. 【1】TCP/IP 协议族并不是 TCP 协议和 IP 协议的组合，而是互联网各类相关的协议的总称。 【2】TCP/IP 分层管理： （1）应用层 （2）传输层 阅读全文
posted @ 2021-10-03 18:32 TwinkleG 阅读(67) 评论(0) 推荐(0)
作用域 和 作用域链
摘要：【很乱，不知道怎么说】 作用域就是一块代码区域中变量和函数的可访问范围，它控制着变量和函数的可见性和生命周期。一般分为全局作用域、函数作用域、ES6的块级作用域【let、const】。 作用域链决定了各级作用域中变量和函数的访问顺序，当前正处于哪个作用域，那这个作用域就处于作用域链的最前端，一般先在 阅读全文
posted @ 2021-10-02 17:10 TwinkleG 阅读(105) 评论(0) 推荐(0)
new 一个构造函数的过程 以及 手写 new
摘要：1. new 一个构造函数的过程： 【1】创建一个空对象 【2】空对象的 [[ prototype ]] 指向 构造函数的 prototype 【3】将 this 指向新对象 【4】执行构造函数内部代码，给新对象添加属性 【5】返回新对象 2. 手写 new： function Dog(name) 阅读全文
posted @ 2021-10-02 16:32 TwinkleG 阅读(460) 评论(0) 推荐(0)
原型式继承简单测试
摘要：1. 今天遇到了一些问题，复习了一下原型式继承... 详细讲解在：https://www.cnblogs.com/twinkleG/p/15325715.html 2. 原型式继承 目的是 实现一个对象属性被实例所共享，上代码： function func(obj) { function f() { 阅读全文
posted @ 2021-10-02 16:04 TwinkleG 阅读(43) 评论(0) 推荐(0)
localStorage 和 sessionStorage 对比
摘要：1. 在了解 localStorage 和 sessionStorage 之前，先介绍一下 Web Storage 规范，这个规范的目的是解决一个问题：有些信息不需要频繁发送给服务器，但是需要存储在客户端本地，因此使用 Cookie 不合适问题。由此 Web Storage 定义了两个对象，即我们今 阅读全文
posted @ 2021-10-02 15:06 TwinkleG 阅读(122) 评论(0) 推荐(0)
Cookie 详解
摘要：1. 首先，Cookie 是什么？ 简单来说，Cookie 是用来在客户端存储会话信息的，它要求服务器在响应给客户端信息时，携带一个头部字段 Set-Cookie，其内容为键值对——一些需要存储在客户端本地的信息。在之后的每一次请求中，浏览器会将这些信息，携带在请求头部字段 Cookie 中，发送给 阅读全文
posted @ 2021-10-02 14:13 TwinkleG 阅读(604) 评论(0) 推荐(0)
Web Socket 理解
摘要：1. Web Socket 是 HTML5 的新协议，允许服务器端主动向客户端发送数据，是一种全双工、双向的通信方式，并且它可以保持长时间通信. 概念理解： 【1】全双工：意思就是服务器向浏览器发送数据的同时，浏览器也可以向服务器传递数据，即同时进行信息的双向传递. 扩展：（1）半双工：允许通信双方 阅读全文
posted @ 2021-10-01 23:29 TwinkleG 阅读(1103) 评论(0) 推荐(0)
数组去重六种方式【还有一些方式未补充】
摘要：数组去重的方式，直接贴代码： // 1. indexOf + for循环 var removeDuplicates = function (nums) { let arr = []; for (let i of nums) { if (arr.indexOf(i) -1) { arr.push(i) 阅读全文
posted @ 2021-10-01 22:45 TwinkleG 阅读(49) 评论(0) 推荐(0)
JavaScript JSONP实现跨域
摘要：1. JSONP 是一种跨域问题解决方案，它利用了 script、img、iframe、link 等标签可以跨域的性质，来避免浏览器同源策略对跨域的限制. 不过除了 script ，其他标签均接收不到服务器数据. 2. JSONP 跨域步骤： 【1】JavaScript 实现对 URL 和 查询字符 阅读全文
posted @ 2021-10-01 20:20 TwinkleG 阅读(400) 评论(1) 推荐(1)
跨域问题解决方案【后续会慢慢补充详解随笔】
摘要：1. 牛客网大厂前端面经常客了属于是，上一篇随笔记录了 CORS 解决跨域问题，这里再介绍几种. 2. 跨域问题解决方案： 【1】CORS 跨域资源共享：在服务器端设置一个 Response Header ：Access-Control-Allow-Origin 的值设置为希望访问此服务器资源的源， 阅读全文
posted @ 2021-10-01 16:35 TwinkleG 阅读(35) 评论(0) 推荐(0)
CORS跨域资源共享 详解
摘要：1. CORS：全称 Cross-Origin Resource Sharing，它允许浏览器向跨域服务器发送 XMLHttpRequest 请求，克服了 Ajax 只能同源请求的限制.【在这里可能你会见到跨域或跨源两种说法，两者并无区别】 2. CORS简介： 需要浏览器和服务器同时支持，CORS 阅读全文
posted @ 2021-10-01 14:58 TwinkleG 阅读(439) 评论(0) 推荐(0)
HTTP 头部解析【红宝书 P713-P714】
摘要：1. 每个 HTTP 请求和响应都会携带一些头部字段，这些字段可能会对开发者有用. 2. 默认情况，XHR 请求会发送一些常见字段： 【1】Accept：浏览器可以处理的内容类型. 【2】Accept-Charset：浏览器可以显示的字符集 【3】Accept-Encoding：浏览器可以处理的压缩 阅读全文
posted @ 2021-10-01 14:15 TwinkleG 阅读(129) 评论(0) 推荐(0)