- 博客(61)
- 收藏
- 关注
RSS订阅原创 JavaScipt中如何实现函数缓存？函数缓存有哪些场景？
下面描述如何实现函数缓存，实现原理比较简单，把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返回计算结果。然后判断输入参数是不是在cache中，如果已经存在，直接返回cache中的内容，如果没存在，使用函数func对输入参数求值，然后把结果存储在cache中。函数foo如何返回另一个函数bar，baz现在持有对foo中定义的bar函数的引用，由于闭包的特性，a的值可以被得到。运用柯里化返回一个函数，返回的函数由于闭包特性，可以访问到cache。
2023-09-07 09:42:31
561
原创 JS-17--深拷贝跟浅拷贝的区别？如何实现一个深拷贝？
深拷贝开辟了一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改另一个对象的属性。浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同地址。浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一地址。即浅拷贝是拷贝一层，深层次的引用类型则是共享内存地址。
2023-09-06 16:50:10
260
原创 js---16-----JavaScript中的类型转换机制
JS中有六种简单数据类型：undefined、null、bollean、string、number、symbol，以及引用类型object。从上面可以看到，Number转换的时候是很严格的，只要有一个字符无法转换成数值，整个字符串就会被转换成NaN。具体规则是：先将复合类型的值转化为原始类型的值，再将原始类型的值转为字符串。上面代码中，x的值在编译阶段是无法获取的，只有等程序运行时才能知道。=、>、<）、if、while需要布尔值地方。遇到预期为字符串的地方，就会将非字符串的值自动转为字符串。
2023-09-06 14:55:29
252
原创 js--15----闭包是什么？说说闭包的使用场景
一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在的词法环境依然存在，以达到延长变量的生命周期的目的。一个函数和对其周围状态（词法环境）的引用绑定在一起（或者说函数被引用包围），这样的组合就是是闭包（closure），也就是说，闭包让你在一个内层函数中访问到其外层函数的作用域。例如，在创建新的对象或者类时，方法通常应该关联与对象的原型，而不是定义到对象的构造器中，原因在于每个对象被创建时，方法都会重新赋值。
2023-09-06 11:34:17
174
原创 js-14---什么是事件代理？应用场景是什么？
如果用了事件委托就没有这种麻烦，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配。所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。在这个例子中，取快递就是一个事件，每个同学指的是需要响应事件的DOM元素，而出去统一领取快递的宿舍长就是代理的元素。事件委托是会把一个或者一组元素的事件委托到它的父层或者更外层的元素上，真正绑定事件的是外层元素，而不是目标元素。
2023-09-06 11:09:19
171
原创 js-13-Js中的事件模型
js中的事件，可以理解为是在HTML中文档或者浏览器中发生的一种交互操作，使得网页具备互动性，常见的有加载事件、鼠标事件、自定义事件等。如上，当希望同一个元素绑定多个同类型事件的时候（上面的这个btn元素绑定2个点击事件），是不被允许的，后绑定的事件会覆盖之前的事件。可以看到，p和div都是在冒泡阶段，响应了事件，由于冒泡的特性，裹在里层的p率先做出响应，如果把第三个参数都改为true。事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受的事件，而最具体的节点（触发节点）最后接受事件。
2023-09-06 10:42:30
136
原创 css-4：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
这种方案不要求父元素的高度，也就是父元素的高度发生了变化，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。设置父元素为display：table-cell，子元素设置display：inline-block。这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候，再给他一个margin：auto，它就可以上下左右都居中。在开发中，经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。
2023-08-07 00:56:25
815
原创 css-3：什么是响应式设计？响应式的原理是什么？如何做？
CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。通过媒体查询，可以通过给不同的分辨率的设备编写不同的样式来实现响应式布局，比如我们为不同的分辨率的屏幕，设置不同的背景图片。除此之外，可以利用主流的ui框架，如element-ui，antd提供的栅格布局实现响应式。
2023-08-07 00:25:43
909
原创 css2-BFC是什么？
display的值为inline-block，inltable-cell，table-caption，table，inline-table，flex，inline-flex，grid、inline-grid。两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个p的margin为80的话，两个p之间的距离是100，以最大的为准。这时候，新的BFC不会与浮动的.aside元素重叠，因此会根据包含块的宽度，和.aside的宽度，自动变窄。
2023-08-06 23:31:25
112
原创 css-1：盒子模型
当对一个文档进行布局（layout）的时候，浏览器渲染引擎会根据标准之一的CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。content-box：默认值，元素的width/height不包含padding，border，与标准盒子模型一致。padding：即内边距，清楚内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。border:即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。
2023-08-06 22:37:51
109
原创 js-12:javascript中执行上下文和执行栈是什么？
每当引擎遇到一个函数的时候，它就会创建一个函数执行上下文，然后将这个执行上下文压到执行栈中，引擎会执行位于执行栈栈顶的执行上下文（一般是函数执行上下文），当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文。函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments对象，外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。second函数执行完毕，对应的函数执行上下文被推出执行栈，执行下一个执行上下文first函数。
2023-08-06 18:52:47
104
原创 js-11：bind、apply、call区别？如何实现一个bind
但是把say方法放在setTimeout方法中，在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，这时候this指向window，所以输出lucy。bind：bind方法和call很相似，第一个参数也是this的指向，后面传入的是一个参数列表（但这个列表可以分多次传入）apply：apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入。call：call方法的第一个参数也是this的指向，后面传入的是一个参数列表。
2023-08-06 18:18:33
75
原创 js-10：new操作符到底做了什么？
new通过构造函数Person创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）根据构建函数返回类型做判断，如果是原始值则被忽略，如果返回是对象，需要正常处理。在javascript中，new操作符用于创建一个给定构造函数的实例对象。上述代码可以看出，构造函数如果返回值为对象，那么这个返回值会被正常使用。new通过构造函数Person创建出来的实例可以访问到构造函数中的属性。可以发现，构造函数中返回一个原始值，然而这个返回值并没有作用。下面在构造函数中返回一个对象。
2023-08-06 18:00:18
194
原创 js-9：this对象
apply()、call()、bind()是函数的一个方法，作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象，因为，这是this指的就是这第一个参数。此时this指向window，这里需要特别注意，this永远指向最后调用它的对象，虽然fn是b的方法，但是fn赋给j的时候并没有执行，所以最终指向window。注意：严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined，只有函数运行在非严格模式下，默认绑定才能绑定到全局对象。
2023-08-06 17:49:40
72
原创 js-8：作用域链
当在javascript中使用一个变量的时候，首先javascript引擎会尝试在当前作用域下寻找该变量，如果没有找到，再到它的上层作用域寻找，依次类推直到找到变量或者是已经到了全局作用域。函数作用域：又称局部作用域，如果一个变量是在函数内部声明的，它就在一个函数作用域下面，这些变量只能在函数内部访问，不能在函数外访问。全局作用域：任何不在函数中或者大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。这说明，我们在全局是无法获取（闭包除外）的函数内部的变量。
2023-08-06 17:16:10
64
原创 js-7：javascript原型、原型链及其特点
Preson.prototype._proto_指向内置对象，因为Person.prototype是个对象，默认是由Object函数作为类创建的，而Object.prototype为内置对象。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。_proto_作为不同对象之间的桥梁，用来指向创建它的 构造函数的原型对象的。每个对象的_proto_都是指向它的构造函数的原型对象prototype的。
2023-08-06 15:37:24
1112
原创 js-6:typeof和instanceof的区别
从上面的例子可以看出，前6个都是基础数据类型，虽然typeof null为object，但这只是javascript存在的一个很悠久的bug，不代表null就是引用数据类型，并且null本身不是对象。所以，null在typeof之后返回的是有问题的结果，不能作为判断null的方法，如果需要在if语句中判断是否为null，直接通过===null来判断就好。typeof也存在弊端，他虽然可以判断基础数据类型（null除外），但是引用数据类型中，除了function类型以外，其他的无法判断。
2023-08-06 15:17:09
221
原创 js-5：==和===的区别，分别在什么情况下使用
所以，除了在比较对象属性为null或者undefined的情况下，可以使用相等操作符，其他情况一律使用全等操作符。如果一个操作数是对象，另一个操作数不是，则调用对象valueOf（）方法取得其原始值，再根据前面的规则进行比较。如果两个操作数都是对象，则比较它们是不是同一个对象，如果两个操作数都指向同一个对象，则相等操作符返回true。如果操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等。等于操作符用两个等号（==）表示，如果操作数相等，则返回true。
2023-08-06 14:14:45
254
原创 js-4：BOM是什么？
BOM（Browser Object Model），浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象，其作用是跟浏览器做一些交互效果，例如如何进行页面的后退，前进，刷新，浏览器窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息。比如像素宽度和高度。在浏览器中，window对象有双重角色，既是浏览器窗口的一个接口，又是全局对象。Bom的核心对象是window，它表示浏览器的一个实例。
2023-08-06 13:58:09
135
原创 js-3：DOM常见的操作有哪些？
日常开发中，离不开Dom操作。上述代码中，获取DOM元素后再进行添加操作，这个js节点是已经存在于当前文档树中，因此这个节点会先从原先的位置删除，再插入到新的位置。它提供了对文档的结构化的表述，并定义了一种方式，可以使从程序中对该结构进行访问，从而改变文档的结构，样式跟内容。删除节点：删除一个节点，首先要获取该节点本身以及它的父节点，然后调用父节点的removeChild把自己的删掉。需要注意的是，该方法返回的是一个NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询。
2023-08-06 13:47:03
208
原创 js2-js中的数据结构
字典是一种以键-值对存储的数据结构，js中的Object类就是以字典的形式设计的。JavaScript可以通过实现字典类，让这种字典对象使用起来更加简单，字典可以实现对象拥有的常见功能，并相应拓展自己想要的功能，而对象在javascript编写中随处可见，所以字典的作用也就异常明显。数组的长度是预先设定的，所有元素根据和该元素对应的键，保存在数组的特定位置，这里的键和对象的键是类型的概念。数组是使用一块连续的内存空间保存数据，保存的数据的个数在分配内存的时候就确定了。
2023-08-06 12:24:19
787
原创 js-1：JavaScript中的数据类型？存储上有啥差别
obj1是一个引用类型，在赋值操作过程中，实际是将堆内存对象在栈内存的引用地址复制了一份给obj2，实际上它们共同指向了同一个堆内存对象，所以更改obj2会对obj1产生影响。Array:JavaScript数组是一组有序的数据，但跟其它语言不同，数组中的每个槽位可以存储任意类型的数据，并且，数组也是动态大小的，会随着数组添加而自动增长。Symbol（符号）是原始值，且符号实例是唯一，不可变的。a的值为一个基本类型，是存储在栈中，将a的值赋值给b，虽然两个变量相等，但是两个变量保存了两个不同的内存地址。
2023-08-06 11:41:18
164
原创 vue2.29-Vue3跟vue2的区别
在vue2.x中，应用根容器的outerHTML将替换为根组件模板（如果根组件没有模板/渲染选项，则最终编译为模板）。在vue2中，像modals，toast等这样的元素，如果我们嵌套在vue的某个组件内部，那么处理嵌套组件的定位，z-index和样式会变得很困难。composition API也是组合式api，通过这种形式，能够更加容易地维护我们的代码，将相同功能的变量进行一个集中式的管理。通过Teleport，可以在组件的逻辑位置写模板代码，然后再vue应用范围之外渲染它。
2023-08-06 00:02:44
201
原创 vue2-slot是什么？
Slot（插槽）花名：占坑，我们可以理解为slot在组件模板中占好了位置，当使用该组件标签的时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口，可以将其类比为插卡式的游戏机，游戏机暴露卡槽（插槽），让用户插入不同的游戏磁条（自定义内容）。默认插槽：子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽里面传内容，标签内DOM结构就会显示在页面。父组件中在使用时通过v-slot：（简写：#）获取子组件的信息，在内容中使用。
2023-08-05 23:12:30
466
原创 vue2-自定义命令及其应用场景
update：所在组件的Vnode更新时调用，但是可能发生在其子Vnode更新之前，指令的值可能发生了改变，也可能没有。vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数。expression：字符串形式的指令表达式，例如v-my-directive=”1+1“中，表达式为”1+1“vue中以v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能。使用自定义指令可以满足日常的一些场景，此处给出几个自定义指令的案例。
2023-08-05 22:41:52
326
原创 vue2-vue项目中你是如何解决跨域的？
Proxy：代理（proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般成为服务端）进行非直接的连接。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据，用postman请求接口能够请求到数据。同源策略（sameoriginpolicy），是一种约定，它是浏览器最核心也是最基本的安全功能。反之非同源请求，也就是协议，端口，主机其中一项不相同的时候，这个时候就会产生跨域。
2023-08-05 21:45:02
853
原创 vue2-组件和插件的区别
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件低耦合，职责单一，所以逻辑会比分析整个系统要简单。此外，还可以通过template属性来编写一个组件，如果组件内容多，可以在外部定义template组件内容，如果组件内容不多，可以直接写在template属性上。降低整个系统的耦合度，在保持接口不变的情况下，可以替换不同的组件完成需求，例如输入框，可以替换为日历，时间，范围等组件做具体实现。
2023-08-05 18:28:57
467
原创 vue2-diff算法
当老Vnode节点的end和新Vnode节点的start相同时，这时候patchVnode后，还需要将当前真实dom节点移动到oldStartVnode的前面，同时老Vnode节点结束索引减1，新Vnode节点的开始索引加1。第二次循环后，同样是旧节点的末尾和新节点的开头相同（节点C），同理，diff后创建了C的真实节点插入到第一次创建的D节点后面，同时旧节点的endIndex移动到了B，新节点的startIndex移动到了E。
2023-08-05 18:04:46
559
原创 vue2-vue实例挂载的过程
到了created的时候，数据已经初始化完成，能够访问data、props这些属性，但这时候并未完成DOM的挂载，因此无法访问到dom元素。vue构建函数调用__init方法，但在文本中并未发现此方法，但仔细可以看到文件下方定义了很多初始方法。initState方法是完成props/data/method/watch/method的初始化。源码位置：/src/paltforms/web/runtime/index.js。源码位置：/src/core/instance/render.js。
2023-08-05 16:27:28
625
原创 vue2-$nextTick有什么作用？
如果没有nextTick更新机制，那么num每次更新都会触发视图更新（上边代码会更新10万次视图），有了nextTick机制，只需更新一次，所以nextTick本质是一种优化策略。解释：Vue在更新DOM时是异步执行的，当数据发生变化时，Vue将开启一个异步更新的队列，视图需要等到队列的所有数据变化完成之后，再进行统一更新。这是因为message数据在发生变化的时候，vue并不会立即去更新DOM，而是将修改数据的操作放在了一个异步操作的队列中。这时候，如果想获取页面最新的DOM值，却发现获取到的是旧值。
2023-08-05 15:38:15
409
原创 vue2-常用的修饰符有哪些应用场景？
相应的代码会以同样的顺序产生。passive：在移动端，当我们监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件添加了一个.lazy。使用async的时候，子组件传递的事件名格式必须为update：value，其中value必须与子组件中的props中声明的名称完全一致。在vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些重复的事情，而能有更多的精力专注于程序的逻辑处理。
2023-08-05 15:12:49
346
原创 vue2-vue中mixin到底是什么？
注意事项：当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项，但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子。日常开发中，经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对来说相对独立，这时可以通过vue的mixin功能将相同或者相似的代码提出来。通过观察上面的组件，发现两者的逻辑是相同的，代码控制也是相同的，这时候mixin就派上了用场。
2023-08-05 13:46:51
593
原创 vue2-vue中key的原理
当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。比较A A，相同类型的节点，进行patch，但数据相同，不发生DOM操作。比较B B，相同类型的节点，进行patch，但数据相同，不发生DOM操作。比较A A，相同类型的节点，进行patch，但数据相同，不发生DOM操作。
2023-08-05 12:09:43
450
原创 vue2-v-show和v-if有什么区别，使用场景分别是什么？
v-if由false变为true时，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候，触发组件的beforeDestory、destoryed方法。控制手段：v-show隐藏则是为该元素添加css–display：none，dom元素依旧还在，v-if显示隐藏是将dom元素整个添加或删除。在vue中，v-if和v-show的作用效果是相同的（不含v-else），都能控制元素在页面是否显示，在用法上也相同。
2023-08-05 10:57:43
326
原创 vue2-v-if和v-for的优先级是什么？
v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items 形式的特殊语法，其中，items是源数据数组或者对象，而item则是被迭代的数组元素的别名。2、如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。这时候我们看到，v-for与v-if作用在不同的标签的时候，是先进行判断，再进行列表的渲染。在进行if判断的时候，v-for是比v-if先进行判断的。1、v-if和v-for的区别。
2023-08-05 10:38:15
950
原创 ES6新增的语法
/ 箭头函数 中的 this 指向的是箭头函数定义区域的 this， 此处箭头函数被定义在 fn 函数的内部，所以箭头函数中的 this 指向的就是 fn这个区域中的this。箭头函数不绑定 this，箭头函数中没有自己的 this，如果在箭头函数中使用this, this关键字将指向箭头函数定义位置中的 this。ES6提供的新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。1，使用 var 声明的变量，作用域为该语句所在的函数内，且存在变量提升现象。
2023-08-04 21:50:58
368
原创 Pytorch多GPU训练踩坑记录
问题介绍使用nn.DataParallel进行多GPU并行训练时，对模型进行传参，出现报错“RuntimeError: chunk expects at least a 1-dimensional tensor”问题分析nn.DataParallel的作用是将模型和数据分配到各个GPU上，让其在各自的GPU上训练，首先检查batchsize是否是GPU数量的整数倍，以及dataloader是否设置了drop_last是否是true,如果没有drop_last，那么最后一个batchsize剩下的数量可
2021-06-09 09:39:38
1516
原创 我理解的第一篇顶会论文
Continual Relation Learning via Episodic MemoryActivation and Reconsolidation
2021-06-07 15:34:01
375
原创 2021-06-01vscode 远程连接ssh 远程配置
问题：之前vscode连接的服务器出现问题，ip地址发生了变化，更改ip后还是连接不上，经查阅，将上图下的之前的ip历史删除，就可以连接了基础配置：https://blog.csdn.net/yijiaobani/article/details/100592300?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162255314916780264095344%2522%252C%2522scm%2522%253A%25222014071.
2021-06-01 21:43:10
272
1
原创 前端笔记css
CSS：美化样式 Cascading Style Sheets按照css的书写位置分为3类：行内样式表（内联样式）：将属性写在标签的style属性中，青春内部样式表：将style标签写在head标签中，包括选择器，选择器{属性：值；}，对标签进行添加选择器，进行筛选。外部样式表：将style标签写在一个css文件中,便于维护 color: red; }html中： 选...
2019-03-26 23:11:01
192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人