随笔档案「2021年9月」 - TwinkleG

网络请求基础——XML对象发送请求【红宝书第四版P711-P713】

摘要：1. Ajax【Asynchronous JavaScript and XML】在不刷新页面的前提下，实现请求数据。实现 Ajax 的关键对象是 XHR【XMLHttpRequest】。在早期，Ajax 被称作远程脚本。现在 XHR 对象的 API 实际上已经过时，一般采用 Fetch API 阅读全文

posted @ 2021-09-30 16:21 TwinkleG 阅读(203) 评论(0) 推荐(0)

浏览器同源策略

摘要：1. 同源策略：是一个重要的安全策略，它用于限制一个资源如何能与另一个资源进行交互。它能帮助阻隔恶意攻击，减少可能被攻击的媒介。如果两个 URL 的协议、域名以及端口号均相等，那么称这两个 URL 为同源的. 2. 举例说明同源 URL：下表给出了与 URL http://store.compan 阅读全文

posted @ 2021-09-30 16:06 TwinkleG 阅读(131) 评论(0) 推荐(0)

ES6 常见知识点【清单非详解】

摘要：1. 模板字符串 2. 对象解构 3. 三个点 ... 4. Map、WeakMap、Set、WeakSet 5. Promise 6. async、await 7. 简写对象属性名 8. let const 9. class 10. Proxy 阅读全文

posted @ 2021-09-30 15:38 TwinkleG 阅读(37) 评论(0) 推荐(0)

apply、call、bind 手写源码

摘要：1. apply：改变函数的 this 指向并立即调用，第一个参数是 this 指向，第二个参数为数组形式传入函数参数. Function.prototype.apply = function (thisArg) { let context = thisArg || window; // windo 阅读全文

posted @ 2021-09-30 15:05 TwinkleG 阅读(95) 评论(0) 推荐(0)

Object.prototype.toString.call() 介绍

摘要：1. 在牛客看面试题时，经常看到这个题目，即 Object.prototype.toString.apply() / call()，所以记录一下查看的资料. 2. MDN 给出了比较详细的介绍：https://developer.mozilla.org/zh-CN/docs/Web/JavaScri 阅读全文

posted @ 2021-09-30 14:44 TwinkleG 阅读(158) 评论(0) 推荐(0)

JavaScript 基本数据类型解析

posted @ 2021-09-30 14:17 TwinkleG 阅读(102) 评论(0) 推荐(0)

LeetCode lc226翻转二叉树

摘要：1. 题目地址：https://leetcode-cn.com/problems/invert-binary-tree/ 2. 题目解答：从根节点开始，递归地对树进行遍历，并从叶子节点先开始翻转。如果当前遍历到的节点 \textit{root}root 的左右两棵子树都已经翻转，那么我们只需要交换阅读全文

posted @ 2021-09-28 22:45 TwinkleG 阅读(50) 评论(0) 推荐(0)

LeetCode 树的前、中、后序遍历

摘要：1. 树的各种遍历方法可以说是基本要求了，用递归方式去做，套一个模板就可以，我们主要考虑如何使用迭代法去做，递归代码直接给出： var preorderTraversal = function(root) { let ans = []; function preorder(root) { if (! 阅读全文

posted @ 2021-09-28 22:28 TwinkleG 阅读(94) 评论(0) 推荐(0)

LeetCode lc112.路径总和

摘要：1. 题目地址：https://leetcode-cn.com/problems/path-sum/submissions/ 2. 题目分析：【1】条件有两个：(1) 要求路径从根节点到叶子节点 (2) 要求值加和为 targetSum 【2】BFS var hasPathSum = functio 阅读全文

posted @ 2021-09-27 22:04 TwinkleG 阅读(25) 评论(0) 推荐(0)

LeetCode lc111.二叉树的最小深度

摘要：1. 题目地址：https://leetcode-cn.com/problems/minimum-depth-of-binary-tree/submissions/ 2. 题目解析：【1】使用广度优先搜索BFS，对于每一层的节点，如果第一次发现某节点左、右子结点均为空，则此节点为二叉树的最小深度. 阅读全文

posted @ 2021-09-27 21:50 TwinkleG 阅读(75) 评论(0) 推荐(0)

LeetCode lc110.平衡二叉树

摘要：1. 题目地址：https://leetcode-cn.com/problems/balanced-binary-tree/ 2. 题目分析：【1】平衡二叉树：整棵树中每个节点的左右子树高度差绝对值不超过1 【2】由此可以利用递归方法实现解答，先实现一个 function height 计算每个节点阅读全文

posted @ 2021-09-27 21:27 TwinkleG 阅读(31) 评论(0) 推荐(0)

LeetCode DFS分类题目

摘要：在做 LeetCode 有关树形结构的深度优先搜素的题目时，经常有两种方法：【1】递归形式的DFS 【2】非递归形式的BFS 阅读全文

posted @ 2021-09-27 21:05 TwinkleG 阅读(17) 评论(0) 推荐(0)

LeetCode lc104.二叉树的最大深度

摘要：1. 题目地址：https://leetcode-cn.com/problems/maximum-depth-of-binary-tree/ 2. 代码：【1】递归 DFS：我们知道一棵树的最大深度，是根结点的左子树、右子树最大深度 + 1，那么可以使用递归来做. var maxDepth 阅读全文

posted @ 2021-09-27 21:03 TwinkleG 阅读(37) 评论(0) 推荐(0)

Vue深入理解响应式原理之$nextTick()

摘要：1. 事件循环可能是理解本篇文章的前置知识，不过也可以先看看无妨。 2. Vue 在修改数据后更新 DOM 时是异步的，这意味着，如果你在 Vue 中修改了被 watcher 依赖的数据，Vue 会开启一个任务队列，把所有修改数据的操作放入其中，【如果说同一个 watcher 依赖的数据被修改了多次阅读全文

posted @ 2021-09-25 19:45 TwinkleG 阅读(133) 评论(0) 推荐(0)

JavaScript 事件循环(Event Loop)

摘要：看了很多博客，只能说一知半解，先记录一下等到以后更清晰了回来更新. 1. JavaScript 是一门单线程语言，这是由于其工作场景导致的，在浏览器中，如果 JavaScript 是多线程语言，那么两个线程要做的事情分别为：A：我要删除元素 div，B：我要给 div 添加一个类，此时如果是多线程同阅读全文

posted @ 2021-09-25 19:18 TwinkleG 阅读(208) 评论(0) 推荐(0)

Git 版本管理系统简介

摘要：1. 我们知道在开发一个项目时，可能会做一些没有把握的，尝试性的操作，去解决一个比较困难的问题。又或者我们的开发出现偏移，需要回退到之前的某个版本，但如果只依靠人工去管理，那么你需要做的事情是记住你的代码所有的变化，然后一点点删除这些添加的代码，直到你想要回退的版本。从某方面来说，这是一项艰巨的任务阅读全文

posted @ 2021-09-24 18:38 TwinkleG 阅读(110) 评论(0) 推荐(0)

JavaScript 寄生式继承

摘要：1. 寄生式继承：类似于原型式继承，实际上就是原型式继承 + 工厂模式，直接上代码： function object(o) { function F() {} F.prototype = o; return new F(); } 原型式继承创建对象，用于被所有实例对象所共享，之后使用工厂模式阅读全文

posted @ 2021-09-23 20:30 TwinkleG 阅读(705) 评论(0) 推荐(0)

JavaScript 原型链知识点复习

摘要：1. 学过之后过了一些时间再回来看发现原型链还是比较容易理解的，不想再详细的去重复细节了. 2. 简单复习重要的知识点：【1】原型链的形成：首先我们知道构造函数A 会有一个 prototype 指向原型对象，原型对象又有一个 constructor 指回构造函数A，构造函数A 的实例对象有一个阅读全文

posted @ 2021-09-23 19:55 TwinkleG 阅读(77) 评论(0) 推荐(0)

Object 关于对象的三个方法 keys values entries

摘要：1. Object.keys 获取对象的键的数组 2. Object.values 获取对象的值的数组 const o = { foo: 'bar', baz: 1, qux: {} }; console.log(Object.values(o)); // ["bar", 1, {}] 3. Obj 阅读全文

posted @ 2021-09-22 20:56 TwinkleG 阅读(49) 评论(0) 推荐(0)

JavaScript 对象设计模式详解

摘要：1. 在对象设计模式提出之前，使用 new Object() 或者对象字面量的方式声明对象是可以的，但如果需要多个结构类似的对象，那么会写很多重复性代码。工厂模式解决了这个问题： function createPerson(name, age, job) { let o = new Object 阅读全文

posted @ 2021-09-22 20:29 TwinkleG 阅读(72) 评论(0) 推荐(0)

Vuex核心概念之actions and modules + 进阶知识点

摘要：1. 偷懒，官方文档总结的太好了，我如果写的话也是照搬 Actions：https://vuex.vuejs.org/zh/guide/actions.html Modules：https://vuex.vuejs.org/zh/guide/modules.html 2. 比较重要的进阶：项目结构阅读全文

posted @ 2021-09-22 19:46 TwinkleG 阅读(44) 评论(0) 推荐(0)

Vuex核心概念之Mutations

摘要：1. 有了 state 以及 getters 的基础，mutations 实际上也很容易理解，详解可以直接看官方文档，个人只总结一下重要知识点：【1】改变 state 不能直接获取去改变，应该通过 mutations，只有这样才能够记录状态的变化【2】mutations 只能执行同步操作，不可以阅读全文

posted @ 2021-09-22 19:42 TwinkleG 阅读(812) 评论(0) 推荐(0)

Vuex核心概念之Getters

摘要：1. 问题提出：我们有时可能希望对 vuex 中 state 的属性进行一些操作，再展示或者被用于其他方法中，那么假如在多个组件中都需要这个属性，会导致重复性操作. 例如：一个存放数字0-50的数组，我们希望选出大于20的部分，那么在组件中，我们需要使用计算属性 computed 去选出相应的数，再阅读全文

posted @ 2021-09-21 22:35 TwinkleG 阅读(249) 评论(0) 推荐(0)

Vuex核心概念之State

摘要：1. 通过在根组件挂载 store 对象，这样根组件以及所有子组件都可以使用 store 中的全局属性. 例如我们在 vuex store 全局管理一个 state 中的 count 属性，那么在组件中，可以直接在 Mustache 语法【双大括号】中直接使用 $store.state.count 阅读全文

posted @ 2021-09-21 22:09 TwinkleG 阅读(236) 评论(0) 推荐(0)

vue 中 computed 与 methods 区别 + watch

摘要：1. 有时我们会在模板中添加一些复杂的逻辑，或者是对于组件中 data 对象中的属性进行一些操作后，再将其展示在页面上。此时可以应用 computed. <div id="example"> {{ message.split('').reverse().join('') }} </div> 【这里我阅读全文

posted @ 2021-09-21 21:43 TwinkleG 阅读(90) 评论(0) 推荐(0)

Vue 中 data 为何是一个方法返回的对象形式？

摘要：我们知道，一个组件可能会被多处引用，那么如果直接使用对象形式，可以预想到所有引用此组件的实例，在对这个组件data中数据进行修改时，会影响到其他引用此组件的数据一起修改，造成数据混乱错误. 因此将其设置为一个方法返回的对象，避免了所有引用此组件的实例共享同一个data对象. ———————————— 阅读全文

posted @ 2021-09-21 21:41 TwinkleG 阅读(1545) 评论(0) 推荐(0)

vue-router 路由懒加载

摘要：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效。 const Foo = () => import('./Foo.vue') const router = new VueRo 阅读全文

posted @ 2021-09-20 16:52 TwinkleG 阅读(43) 评论(0) 推荐(0)

vue-router 路由元信息

摘要：这个知识点比较容易理解，没有什么好讲的，直接看官网也可以. 官网没有讲解其具体用途，比如说跳转到一个页面后，这个页面在浏览器顶栏显示的标题 title，可以记录在 meta 中，利用beforeEach导航守卫，每次路由跳转到一个页面，都执行： document.title = to.matched 阅读全文

posted @ 2021-09-20 16:46 TwinkleG 阅读(78) 评论(0) 推荐(0)

vue-router导航守卫理解

摘要：1. vue-router的导航守卫，简单来说就是在一个路由地址跳转到另一个路由地址的过程中，会触发的一些钩子函数，类似于Vue生命周期钩子函数，页面加载执行到某个阶段，就会去执行某个导航守卫. 2. 如果说个人的理解不太清晰的话，可以参考官方文档：https://router.vuejs.org/ 阅读全文

posted @ 2021-09-20 16:39 TwinkleG 阅读(444) 评论(0) 推荐(0)

=== 和 == 的区别？

摘要：js中==和区别【转载，见文末】简单来说： == 代表相同，代表严格相同, 为啥这么说呢，这么理解：当进行双等号比较时候：先检查两个操作数数据类型，如果相同，则进行比较，如果不同，则愿意为你进行一次类型转换，转换成相同类型后再进行比较，而比较时，如果类型不同，直接就是f 阅读全文

posted @ 2021-09-18 21:48 TwinkleG 阅读(496) 评论(0) 推荐(0)

Object.assign()

摘要：1. Object.assign可以实现对象的合并，或者说把src对象的可枚举属性添加到dest对象上，返回dest对象. 实际上是调用src的getter以及dest的setter函数实现的. 2. Object.assign(dest, ...srcs) src参数可以有一个，也可以有多个，如果阅读全文

posted @ 2021-09-18 21:17 TwinkleG 阅读(102) 评论(0) 推荐(0)

vue-router导航守卫

摘要：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB 更新一下个人最新理解：https://www.cnblog 阅读全文

posted @ 2021-09-18 19:45 TwinkleG 阅读(48) 评论(0) 推荐(0)

Vue-router

摘要：1. vue-router的基本使用过程：【1】在vue CLI + webpack项目目录中，创建一个vue-router文件夹，在此文件夹下创建index.js，用来配置vue-router 【2】index.js中：(1) 导入组件 const Home = () => import('.. 阅读全文

posted @ 2021-09-17 19:28 TwinkleG 阅读(76) 评论(0) 推荐(0)

防抖(debounce) and 节流(throttle)

摘要：1. 防抖：简单来说即当一个事件我们不希望其频繁被触发，可以使用防抖. 原理是当一个事件被触发后，如果在未被执行前【处于setTimeout的delay阶段】再次触发该事件，则事件重新计时. function debounce(func, delay) { let timer = undefined 阅读全文

posted @ 2021-09-15 20:58 TwinkleG 阅读(121) 评论(0) 推荐(0)

virtual DOM构建

摘要：1. 构建虚拟DOM，参考资料：https://juejin.cn/post/6844903806132568072#heading-2【仅做为个人学习笔记，如有侵权，请联系本人】 type: 指定元素的标签类型，如'li', 'div', 'a'等 props: 表示指定元素身上的属性，如clas 阅读全文

posted @ 2021-09-14 20:50 TwinkleG 阅读(54) 评论(0) 推荐(0)

repaint reflow详解

摘要：1. reflow: 回流，即对DOM文档中某些或全部元素的尺寸、结构或者字体大小等属性进行修改时，浏览器重新对这些元素或者全部元素渲染的过程. 触发回流的操作：【1】修改元素的尺寸、结构【2】修改元素的字体大小等属性【3】页面首次加载渲染【4】获取offset | client | scr 阅读全文

posted @ 2021-09-14 19:29 TwinkleG 阅读(77) 评论(0) 推荐(0)

顶层对象以及 globalThis

摘要：个人学习转载【如有侵权，立即删除】： https://es6.ruanyifeng.com/#docs/let#%E9%A1%B6%E5%B1%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7 https://es6.ruanyifeng.com/#do 阅读全文

posted @ 2021-09-13 22:21 TwinkleG 阅读(31) 评论(0) 推荐(0)

let const var

摘要：参考资料：https://es6.ruanyifeng.com/#docs/let 1. var示例代码【结合之后特点对应查看】： /* 1. 变量声明提升举例 */ console.log(age); age = 16; console.log(age); var age = 18; /* 2. 阅读全文

posted @ 2021-09-13 22:17 TwinkleG 阅读(125) 评论(0) 推荐(0)

v-model简单介绍

摘要：1. v-model双向绑定是由数据劫持以及发布订阅【观察者模式】实现的，这篇随笔暂时不讲解原理，作为个人小复习. v-model可以由另一种方式实现：v-bind动态绑定value，配合v-on:input使用，利用event.target.value获取输入框的值，当输入框的值改变时将其传给V 阅读全文

posted @ 2021-09-12 21:21 TwinkleG 阅读(861) 评论(0) 推荐(0)

Object.defineProperty

摘要：1. Object.defineProperty(object, propertyName, descriptor) 数据属性： descriptor描述符对象属性：【这里的默认为true是对象字面量形式声明属性时，如果使用object.defineProperty则默认为false】 config 阅读全文

posted @ 2021-09-12 21:12 TwinkleG 阅读(69) 评论(0) 推荐(0)

输入url到浏览器展示页面全过程

摘要：1. 用户输入url2. DNS解析域名为ip地址：优先从浏览器查找缓存ip地址，若未查找到，依次从系统、路由器、ISP【Internet Server Provider】查找，如果所有的缓存都没有DNS解析ip地址，那么DNS会向ISP发送查找请求.3. 请求资源先判断是否存在浏览器缓存【浏览器缓阅读全文

posted @ 2021-09-11 19:43 TwinkleG 阅读(384) 评论(0) 推荐(0)

浏览器缓存详解

摘要：1. 分享一篇讲的极其透彻的文章，仅做个人学习使用，如有侵权，我会立即删除 https://www.cnblogs.com/chengxs/p/10396066.html 2. 个人理解：当需要请求服务器的某资源时，浏览器先根据http请求头的某些header去浏览器缓存中寻找是否强缓存有效，若有阅读全文

posted @ 2021-09-11 19:03 TwinkleG 阅读(259) 评论(0) 推荐(0)

css animation

摘要：1. 先来实现一个简单动画效果 <body> <div>hello animation</div> </body> <style> div { animation: 2s myanimation 3 /*steps(5)*/; // 表示动画花费2s执行完，动画名称为myanimation，动画执行阅读全文

posted @ 2021-09-11 16:16 TwinkleG 阅读(208) 评论(0) 推荐(0)

css transition

摘要：1. 先实现一个简单的过渡效果吧！ <body> <div>hover to move</div> </body> <style> div { width: 100px; height: 100px; background-color: pink; transition: background-co 阅读全文

posted @ 2021-09-11 15:58 TwinkleG 阅读(83) 评论(0) 推荐(0)

BFC块级格式化上下文

摘要：BFC: 块级格式化上下文，它是页面中一块渲染区域，在这个渲染区域里面有一套渲染规则，规定了元素的布局方式以及如何和其它元素相互作用BFC的规则：1. 同一块BFC区域内的相邻元素外边距会发生重叠【margin重叠问题，分为相邻元素重叠和父子元素外边距塌陷问题】2. BFC区域内的元素不会与BFC区阅读全文

posted @ 2021-09-10 17:20 TwinkleG 阅读(145) 评论(0) 推荐(0)

css浮动及清除浮动

摘要：float浮动：会脱离标准流，影响：1. 不保留原位置，因此父元素不设置高度则无法被撑大2. 同级元素应该也浮动，否则布局可能会出现问题清除浮动方法：1. W3C推荐做法：在浮动元素最后添加一个块级标签，css样式设置clear: both;兼容性好，但每次都会多添加一个块级标签，影响代码结构2. 阅读全文

posted @ 2021-09-10 16:44 TwinkleG 阅读(79) 评论(0) 推荐(0)

三栏布局(两边固定，中间自适应)的三种方法

摘要：1. 使用浮动float，左右分别左浮动和右浮动，中间元素设置margin实现自适应 <div class="box"> <div class="left">左边</div> <div class="right">右边</div> <!-- center未脱标，如果标签放在中间，会把right挤到下阅读全文

posted @ 2021-09-10 16:07 TwinkleG 阅读(485) 评论(0) 推荐(0)

css水平、垂直居中

摘要：div水平居中：1. margin: 0 auto2. 定位 position: absolute;left: 50%;transform: translateX(-50%);3. flex布局display: flex;justify-content: center;div垂直居中：1. posi 阅读全文

posted @ 2021-09-10 15:51 TwinkleG 阅读(38) 评论(0) 推荐(0)

css选择器优先级

摘要：1. !important > inline > id > class > tag > * > inherit > default 2. 权重值对比： !important 最大 inline 行内样式 1000 id选择器 100 class选择器 10 标签 1 通配符选择器 0 *** 通配符阅读全文

posted @ 2021-09-10 15:41 TwinkleG 阅读(38) 评论(0) 推荐(0)

flex布局说明

摘要：flex布局又称作弹性盒布局，其由两部分组成，首先是弹性盒【flex-container】，其次是弹性子元素【flex-items】注意：在webkit内核中的flex布局需要加前缀：-webkit-flex 1. flex-container常见属性： 1. flex-direction: ro 阅读全文

posted @ 2021-09-10 15:25 TwinkleG 阅读(358) 评论(0) 推荐(0)

行内元素、块级元素以及行内块元素介绍

摘要：1. 行内元素：常见标签有：a、span、sub、sup、br、strong、b、em、i、label 特点：【1】一行内可以存在多个【2】无法设置width、height，padding、margin值不能设置垂直方向，只可以设置水平方向，可以设置line-height 【3】一个行内元素内可阅读全文

posted @ 2021-09-09 21:18 TwinkleG 阅读(6129) 评论(0) 推荐(0)

instanceof原理

摘要：1. instanceof可用于判断某个实例是否属于某构造函数或者在继承关系中用来判断一个实例是否属于它的父类型或者祖先类型的实例 2. 思路：获取目标类型的显式原型prototype以及需要判断的实例的隐式原型__proto__，将实例按原型链一级一级判断，直到__proto__为null，阅读全文

posted @ 2021-09-09 16:53 TwinkleG 阅读(377) 评论(0) 推荐(0)

Promise详解

摘要：1. Promise基本使用：【1】Promise：两个实例参数，分别为PromiseState和PromiseResult，前者表示Promise状态，后者表示改变状态时传入的data数据. const p = new Promise((resolve, reject) => { resolve 阅读全文

posted @ 2021-09-08 21:02 TwinkleG 阅读(549) 评论(0) 推荐(0)

TwinkleG

09 2021 档案

公告