SakuraSnow's Blog

发表于2021-04-16

前言这一切都要从一道面试题开始说起虽然被问的不是我，是我的舍友 123456789101112131415161718192021222324252627282930313233class Parent { constructor (name = "Parent") { this.name = "Parent"; this.rua = "qaq" } getName() { return this.name; } getRua() { return this.rua; }}class Child extends Parent { constructor (name = "Child", age = 16) { super(); this.name = name; thi ...

vuex-analyize

发表于2021-03-30

前言这是一篇很水的Vuex原理解析，因为我前几天翻代码时翻到了我很久前写的vuex，所以随手写一下，虽然我很多中间过程都忘得差不多了

Vue-Router原理介绍

发表于2021-03-24

前言又到了快乐写博客的时间，今天来介绍一下，Vue路由的实现原理超简易版12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="path-to-regexp.js"></script></head><body><script src="https://cdn.bootcdn.ne ...

Vue优化小技巧

发表于2021-03-21

前言又到了我最喜欢的水博客时间，今天让我们来看看在vue项目中的一些性能优化小技巧吧这个应该会长期更新，啥时候看到了新的优化方法就可以丢上来代码优化在v-for中使用keykey的使用有两个好处把diff算法中的就地转化变成移动元素防止input元素出现一些状态错误的bug（这个Vue3修复了） 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { var oldStartIdx = 0; var newStartIdx = 0; var oldEndIdx = oldCh.length - 1; var oldStartVnode = oldCh[0]; va ...

Thanks For Inventing Javascript

发表于2021-03-14

前言昨天在朋友圈看到了这张有趣的图那我们今天就来讲讲这个图吧正文Typeof1typeof NaN 因为typeof只能返回下面的东西所以它只能返回个number了，而且NaN一般是在想把什么东西转化成number类型但是转化失败了才会出现的结果，某种意义上还是说的过去的浮点数精度12349999999999999999 // 100000000000000000.1 + 0.5 == 0.6 // true0.1 + 0.2 == 0.3 // false1.335.toFixed(2) == 1.33 // true JavaScript 中的数字按照 IEEE 754 的标准，使用 64 位双精度浮点型来表示，而我们知道，想用有限的位来表示无穷的数字，显然是不可能的，因此会出现一些列精度问题：浮点数精度问题，比如 0.1 + 0.2 !== 0.3 大数精度问题，比如 9999 9999 9999 9999 == 1000 0000 0000 0000 1 toFixed 四舍五入结果不准确，比如 1.335.toFixed(2) == 1. ...

JS内存管理

发表于2021-03-09

前言这是一篇JavaScript内存相关的笔记，介绍一下堆栈和内存管理相关的知识栈空间和堆空间假如有下面的代码 1234567function foo(){ var a = "极客时间" var b = a var c = {name:"极客时间"} var d = c}foo() 最终的内存的示意图如下所示：从上图你可以清晰地观察到原始类型是存放在栈空间里的，原始值会被复制一份直接保存在变量上对象类型是存放在堆空间的，在栈空间中只是保留了对象的引用地址你也许会感到奇怪，可以把所有数据直接存放在“栈”中嘛？答案是不可以的，因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。所以通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多 ...

奇怪的CSS字体知识增加了

发表于2021-02-25

前言这篇文章介绍一些字体相关的内容字体是什么字体都是通过一些文字制作软件制作的，是一些点阵的结合你可以使用FontForge来查看和编辑字体文件参考线在学习英文字母时，我们使用的单词本是几条横线的，这就是参考线的一种，同样的，在设计字体时也有参考线的存在这些参考线的位置都是字体设计者自己定的，对于不同的文字类型，参考线不一样。同一种文字类型，参考线一致。字体大小和参考线那么参考线有什么用呢，有很重要的一点是对应字体大小首先我们要知道，字体设计时是使用相对大小的这里有几个值可以注意下 Em Size：字体的相对大小，一般是1000、2048、1024这些 Win Ascent：Window系统下顶线离基线的相对长度 Win Descent：Window系统下底线离基线的相对长度文字顶线到底线的距离，就是文字的实际大小也叫作文字的内容区(content-area) 你可以用活字印刷的例子来理解它们的概念，在最初设计字体时，会刻录下一个个文字模板这里的Em Size就可以理解成文字的框，设计者在这个框内设计文字，这个框的大小只是用于和文字的真正大小进行比例 ...

css浮动

发表于2021-02-23

前言这篇是随缘复习一下CSS的浮动orz，对，非常随缘正文怎么设置浮动123456/* 设置左浮动 */float : left;/* 设置右浮动 */float : right;/* 默认值 */float : none; 设置了浮动的元素会发生什么变化元素必定为块盒(display设置为block) 浮动元素的包含块和常规流一样，是父元素的内容盒盒子尺寸会发生什么变化宽度为auto时，适应内容宽度高度为auto时，和常规流一致，适应内容的高度 margin为auto时，相当于设置成0 边框，内边距，百分比和常规流一样盒子怎么排列左浮动的盒子，从左上角开始依次往右排列右浮动的盒子，从右上角开始依次往左排列如果浮动盒子前面有常规流块盒，会避开常规流块盒常规流块盒在排列时，无视浮动盒子行盒在排列时，会避开浮动盒子（文字是被匿名行盒包裹的，所以文字会避开浮动盒子）外边距不会发生合并，因为只有常规流会发生边距合并你可以记忆成，常规流块盒是在地上的，设置了浮动的元素会在天上飞，在天上飞的元素可以看得到地上的块盒，然后在排列时避开它，但是在地上的常规流块盒看不见 ...

Vue3的数据响应式原理

发表于2021-02-13

前言心态爆炸的几天，为什么新年会这么心态爆炸QAQ 不过就算心态爆炸爆炸还是要学一下的，这篇介绍一下Vue3是怎么实现数据响应式的，Vue2的实现的方法我也写过，可以看这里：https://www.sakura-snow.com/archives/491 这篇来介绍一下Vue3的数据响应式，我们会使用我们自己手写的effect和reactive来模拟（因为源码不是那么好看，不过也会放一下源码）文档：https://github.com/vuejs/docs-next vue3：https://github.com/vuejs/vue-next reactive和effect的实现我们用下面的代码来进行测试 1234567891011121314151617let { reactive, effect, computed } = VueReactivity;let obj = { name: 'Sakura', age: 16, address: { a: 1 }, arr: [1, 2, 3,4,5] ...

奇怪的知识点增加了

发表于2021-02-08

前言这是一篇刷题笔记，不定期更新，看到有趣的题就会记录一下面试Object.freeze123456789const box = { x : 10}Object.freeze(box);const shape = box;shape.x = 100;console.log(shape); // {x : 10} Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；也就是说冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改已有属性的值，不能修改该对象已有属性的可枚举性、可配置性、可写性。非严格模式下只是修改无效严格模式下会报错TypeError 另外，冻结是浅层的，可以使用递归完全冻结顺带一提Object.seal可以防止属性被添加或者被移除，不能防止属性的值被修改 ParseInt它可以用来把一个字符串转化成数字，参数如下要解析的字符串解析的字符串是什么进制这里只介绍三种特殊的规则进制无效或者无法按照传入进制解析时会返回NaN 12parseInt(& ...