- 博客(33)
- 收藏
- 关注
原创 Github Libral github:443 问题登录补上, 无法 git pull 和 git push
终于发现大佬的文章, 经过测试确实可行Mac 用户需要 在finer 中 cmd+ shift+g 搜索 /etc/hosts 找到 host 文件具体:链接: https://www.cnblogs.com/dabenhou/p/13949621.html.
2021-03-17 02:07:38
202
原创 JS: map 和 weakMap
Set成员唯一、无序且不重复[value, value],键值与键名是一致的(或者说只有键值,没有键名)可以遍历,方法有:add、delete、hasWeakSet成员都是对象成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏不能遍历,方法有add、delete、hasMap本质上是键值对的集合,类似集合可以遍历,方法很多可以跟各种数据格式转换WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名键名是弱引.
2021-03-01 00:43:08
220
原创 Vue3: 手写代码:简单版 reactive
shallowReactive 和 reactive// 浅响应function shallowReactive(target) { if (target && typeof target === "object") { return new Proxy(target, handler); } return target;}// 定义 Proxy 第二位参数 handlerconst handler = { // 获取值 get(target, prop) {.
2021-02-24 00:03:36
292
原创 Vue3: 知识总结 : toRefs 函数
toRefs() 函数可以将 reactive() 创建出来的响应式对象, 转换为普通对象, 只不过这个普通对象上的而每一个属性都是响应式的, 这样我们 用 es6 的对象解构赋值的时候, 就可以了,不会出现问题了
2021-02-23 17:11:59
12615
原创 Vue3: 知识总结: hooks(是函数形式)
Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数例子 :首先在src目录下建立一个 hooks 文件夹申明一个我们要复用的方法的名字.ts 文件下面是 useMousePosition.ts 代码import {onBeforeUnmount, onMounted, ref} from 'vueexport default functi.
2021-02-23 17:00:52
20723
6
原创 Vue3: 知识总结: ref, toRef, toRefs 和 reactive 的细节区分
相同:ref 和 reactive 都是用来处理数据响应式的他们都可以作用与对象类型的数据上不同:reactive 是利用 proxy 来实现ref 则是用把数据给包装成 ref 对象, .value 的方式去访问其数据,在 setup 中吗,在模板中不需要, 因为会自动添加.valuevue 强烈建议 ref 用来处理 非指针类型的数据类型, string number 等, 通过给 value 属性添加 getter /setter 来实现对数据的劫持reactive 用来处理 对
2021-02-23 14:22:06
1480
原创 css: visibility:hidden 和 display:none 相同点和不同点
相同点:如果元素上有点击事件, 都不会响应了, 不会响应了他们都会被插入 dom tree 中不同点 :visibility:hidden仍然占据文档流’’display:none 则不会有文档流里面, 当我们用 chorme inspec 的时候, 当我们在 dom tree 点击该元素的时候, 是无法有对应的显示出来的...
2021-02-07 14:40:13
231
原创 js: prototype 与 __prop__解析
prototype 是对该函数以及其实例函数的公用说明, 可以理解为, 在实例化的时候, js 会一并把该函数的的 prototype 一并付给实例化的对象__proto__, 代表的是关于其父级的联系function Person(){}let person = new Person();person.__proto___=== Person.prototype // true函数的 prototype !== __proto__function Person(){}1. Pe.
2021-02-03 00:36:57
366
原创 css: 横向并排 去除重叠的边框
今天遇到一个 横向并排的 4 个 div, 发现 div 的右边与相邻的 div 的左边的边框重叠了, 从而产生了加深的效果(每个格子的右边与每个格子的左边重叠了)去除这样的效果我们可以用 margin-left : -1px 来帮助我们去除掉重叠边框的效果...
2021-02-02 23:38:41
448
1
原创 js 展示FPS,优化 web 动画效果 必备
javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob
2021-01-27 16:57:19
514
原创 css: zoom 和scale 的区别
最近项目用到了 sacle 和 zoom, 感觉起来这两个没啥大区别, 都是放大, 然后真的等到了查了一下才发现还真的是不一样兼容性zoom 是 ie 自己自定义的属性, 然后虽然有些别的浏览器也支持了, 但是仍然存在一部分浏览器不支持这个属性scale 是 W3C 协会被 zoom 启发了, 然后命名了 scale() 并把这个 scale()列入为css 的标准, 因此被各大浏览器厂商都支持(过老的浏览器除外)缩放锚点zoom 默认是从 元素 左上角进行缩放scale 默认是从元素 中
2021-01-26 11:16:45
416
原创 css: 小技巧(backface-visibility: hidden)
今天做一个动画效果是动画页面的翻转效果, 当两个 div 顶部 div transform: rotateY(180deg)的时候, 我需要把 底部的 div的 z-index 给调上来, 这样当顶部 div 的翻转的时候, 底部的 div 才能显示出来然后, css 中已经有这样的属性已经帮助我们这样做了backface-visibility:当我们旋转的角度 >= 90deg , 也就是当我们能看到 div 的背面的时候, 如果 value 是 hidden的话, 该 div 会自动隐藏.
2021-01-24 16:41:00
711
原创 css: transform(2d, 3d转换) 与 transition(过度), Animation(一次性全弄懂)
注意:1. transform 属性中, 如果有同名属性则是覆盖 而不是合并例子:main { transform: translate(300px, 400px);}main:hover { transform: rotateX(45deg);}在上面的例子中, 带有 hover的 main 标签在做第下面的变换的时候, 并不会把上面的 translate(300px , 400px) 给带上, 而是直接覆盖2. transform 中的 值定义的先后有区别div { t
2021-01-23 23:21:20
463
1
原创 ts: 反向枚举
今天在工作中想尝试用到 枚举因为我记得在 ts 中枚举往往会变成带正向和方向的枚举例如enum Week { Monday= 'haha' Tuesday ='sad'}Week[Week['haha']] // 输出应该是 haha结果并没有如我所愿, 经查证是, 因为在字符串枚举类型中, ts 并不会被编译成反向枚举, 如果我们 log(Week), 我们会发现只有 {'Monday' : 'haha' , 'Tuesady': 'sad'}那么什么情况下才会生成带有方向枚举
2021-01-23 22:37:33
1797
1
原创 transform-origin : 在不同的 transform 属性中 有不同的含义
今天做了一个 css 菜单的特效, 结果发现 默认的缩放是重中心到四周扩散的, 然后没有我们要的下拉效果, 利用transform-origin 这个 css 字段可以设置我们的动画效果是从哪里开始, 默认是从中心作为点,进行缩放动画, 如果我们设置成 top 就定位最上面边是我们动画开始的基点从上到下进行我们的动画具体情况代码<!-- 菜单特效 --><!DOCTYPE html><html lang="en"> <head> <m.
2021-01-23 18:32:51
484
原创 css:translateZ()坐标单位不能是 百分数
今天在做 3d 转换,发现 translateZ(50%) 并不能像其他的 translateX 和 translateY 一样可以采用百分比, 而必须是一个具体的长度值, 含有px的那种
2021-01-22 19:11:12
574
2
原创 position:sticky 粘性定位 (sticky) 与 固定定位
position:sticky是css定位新增属性;可以说是static(没有定位) 和 固定定位fixed 的结合;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置position 的其他定位absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过"left",.
2021-01-21 14:40:17
5955
1
原创 使用display:none和visibility:hidden隐藏的区别
display:none和visibility:hidden的区别是:1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面
2021-01-21 14:20:13
183
原创 css:图形绘制
clip-path() 可以绘制各种类型的 div, 默认是矩形,clip-path( 50% 0, 0 100% , 100% 100%). 绘制等边三角形
2021-01-20 21:50:52
78
原创 css:文本环绕
文本环绕方式shape-outside 可以控制该 div 与 其同级的文字的环绕方式, 是环绕 div 的外边框, 内边框 还是 content具体可以查看 shape-outside
2021-01-20 21:46:49
647
原创 css:table
table 标签table 标签中常用的子元素:<tr>代表行<td>代表行中的单行格子table 常用技巧1. 单元格边框合并table { border-collapse:collapse;}这样单元格与单元格之间就是看上去合并的效果, 中间没有空隙2. 空单元没有数据单元格不展示<table> <tr> <td>1</td> <td>2</td> <td&
2021-01-19 19:54:47
157
原创 css 文本
div { text-align:center; //left, right, justify vertical-align: middle; // top, bottom ...}
2021-01-19 19:07:00
110
原创 jQuery 获取 innerWidth, outerWidth
jquery获取元素各种宽高及页面宽高总结window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin, **也就 content 内容的宽度** b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + p
2021-01-19 14:18:07
205
原创 CSS: transform:scale() 在行内元素中会失效
今天在工作中遇到了在 ::before() 伪类中定义了一个 transform :scale(0.5) 结果并没有效果. 查询之后才知道 transform :scale(0.5)在 inline 属性中的元素不起作用, 而伪类 ::before() 是行内元素, 因此, 只要我们把伪类改成非行内元素就行了.noteSign-sharp { position: relative; &::before { // 伪类是行内元素 content: "#"; transform:
2021-01-18 18:59:52
4089
原创 css: 渐变技巧
css: 渐变处理线性渐变辐射渐变(从中间到四周)渐变标志位**1. 渐变起止位置****2. 渐变点定位**线性渐变1. css3 之前的处理渐变技巧截取图像渐变 1 px 大小, 然后 background-image: url(1px.png) repeat2. css3 自带background: linear-gradient(rgba) 实现渐变 div { background:linear-gradient(90deg, red, green, blue)
2021-01-15 18:58:55
508
原创 js的hosting (变量提升 和 函数声明提升)比较
我们知道在js中, js解析器会在 执行代码之前, 把 变量申明和函数申明 都预读一遍然后, 有一个疑问来了, 到底是 变量提升 权重高 还是 函数申明提升权重高?我们可以做个试验:example1: var a=20;function a (){ console.log(10);}console.log(a); //输出的值是20example2: f...
2019-10-17 14:08:17
162
原创 关于对象数组的拷贝
发现了一个坑, 自己平时没有太多去想,今天做code review的时候 发现了: 先po上代码let myArray =[{onset: 1},{onset1: 2},{onset2:3}];let myArray2 = [];for(let i=0; i<myArray.length; i++){ myArray2.push(myArray[i]);}for(let i...
2019-10-12 17:57:42
276
原创 ++i和 i++的坑
最近在重构别人写的代码, 发现了一个bug 但是逻辑怎么看都没问题. 但是结果就是出来不对, 后来debug 逐步排查 ,发现了在 i++ 的时候除了问题i=5;let x = i++; //x =5. i=6++i 先给i自加1,再计算表达式的值。i++先计算表达式的值,再给i自加1。...
2019-10-09 14:59:39
154
原创 利用Map 把 string类型的 array 转换为Number 类型的Array
最经常想到的是 用for循环, 然后把每一项 从 string转成NumberstringArray=["1", "2", "3"];numberArray=[]for( let i=0; i<stringArray.length; i++){ numberArray[i]=Number(stringArray[i]);}但是像这种典型的 Array里面每一个item...
2019-10-09 14:39:40
401
原创 如何在Array中 查找到同类值, 并合并到 object的 key value中
最近在做js开发,发现经常需要在一列myArray =[{time:1, value:10}, {time:2, value:20}, {time:1, value: 15}, {time:2, value: 10}];把这样的数组 给 最终 转换成 :myMap= {1: [ {time:1, value:10},{time:1, value: 15} ],2:[{...
2019-10-09 11:50:43
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人