![](https://img-blog.csdnimg.cn/2021012717004920.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
工作积累
整理 自己在工作中的种种问题, 写下心得, 提升自己
爱吃鸡蛋的程序员
努力学习 muscle up
展开
-
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 · 189 阅读 · 0 评论 -
JS: map 和 weakMap
Set成员唯一、无序且不重复[value, value],键值与键名是一致的(或者说只有键值,没有键名)可以遍历,方法有:add、delete、hasWeakSet成员都是对象成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏不能遍历,方法有add、delete、hasMap本质上是键值对的集合,类似集合可以遍历,方法很多可以跟各种数据格式转换WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名键名是弱引.原创 2021-03-01 00:43:08 · 213 阅读 · 0 评论 -
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 · 279 阅读 · 0 评论 -
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 · 20668 阅读 · 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 · 1476 阅读 · 0 评论 -
css: visibility:hidden 和 display:none 相同点和不同点
相同点:如果元素上有点击事件, 都不会响应了, 不会响应了他们都会被插入 dom tree 中不同点 :visibility:hidden仍然占据文档流’’display:none 则不会有文档流里面, 当我们用 chorme inspec 的时候, 当我们在 dom tree 点击该元素的时候, 是无法有对应的显示出来的...原创 2021-02-07 14:40:13 · 226 阅读 · 0 评论 -
css: 横向并排 去除重叠的边框
今天遇到一个 横向并排的 4 个 div, 发现 div 的右边与相邻的 div 的左边的边框重叠了, 从而产生了加深的效果(每个格子的右边与每个格子的左边重叠了)去除这样的效果我们可以用 margin-left : -1px 来帮助我们去除掉重叠边框的效果...原创 2021-02-02 23:38:41 · 427 阅读 · 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 · 494 阅读 · 0 评论 -
css: zoom 和scale 的区别
最近项目用到了 sacle 和 zoom, 感觉起来这两个没啥大区别, 都是放大, 然后真的等到了查了一下才发现还真的是不一样兼容性zoom 是 ie 自己自定义的属性, 然后虽然有些别的浏览器也支持了, 但是仍然存在一部分浏览器不支持这个属性scale 是 W3C 协会被 zoom 启发了, 然后命名了 scale() 并把这个 scale()列入为css 的标准, 因此被各大浏览器厂商都支持(过老的浏览器除外)缩放锚点zoom 默认是从 元素 左上角进行缩放scale 默认是从元素 中原创 2021-01-26 11:16:45 · 401 阅读 · 0 评论 -
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 · 697 阅读 · 0 评论 -
transform-origin : 在不同的 transform 属性中 有不同的含义
今天做了一个 css 菜单的特效, 结果发现 默认的缩放是重中心到四周扩散的, 然后没有我们要的下拉效果, 利用transform-origin 这个 css 字段可以设置我们的动画效果是从哪里开始, 默认是从中心作为点,进行缩放动画, 如果我们设置成 top 就定位最上面边是我们动画开始的基点从上到下进行我们的动画具体情况代码<!-- 菜单特效 --><!DOCTYPE html><html lang="en"> <head> <m.原创 2021-01-23 18:32:51 · 476 阅读 · 0 评论 -
css:translateZ()坐标单位不能是 百分数
今天在做 3d 转换,发现 translateZ(50%) 并不能像其他的 translateX 和 translateY 一样可以采用百分比, 而必须是一个具体的长度值, 含有px的那种原创 2021-01-22 19:11:12 · 542 阅读 · 2 评论 -
使用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 · 180 阅读 · 0 评论 -
z-index 在元素有 position 属性的时候才会生效
z-index 属性在 元素被 添加了 positon 属性点的时候才会产生效果原创 2021-01-21 14:15:12 · 471 阅读 · 0 评论 -
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 · 198 阅读 · 0 评论 -
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 · 4038 阅读 · 0 评论