爱吃鸡蛋的程序员-CSDN博客

原创 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

原创 z-index 在元素有 position 属性的时候才会生效

z-index 属性在元素被添加了 positon 属性点的时候才会产生效果

2021-01-21 14:15:12 473

原创 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: 浮动特性(高度塌陷)(BFC: overflow)

浮动类型

2021-01-20 18:19:26 185

原创 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

学习园地