看似没用的小知识点 vol.2

317 阅读2分钟
  • bind 修改后无法再次修改 this,因此诞生了软绑定 softBind案例

  • 在省略样式处创建层叠上下文,会未被省略,但表现很奇特,案例

  • 浏览器回退时接口会 from disk cache 使用缓存造成动态数据未更新,应该是主要依据于 Last-Modified

  • 父级 pointer-events: none 但子级为 auto,子级范围内仍然可触发父级效果,案例

  • case 若不加 {} 并未独立作用域,比如 switch(1) { case 1: let a; break; case 2: let a; break; } 会报错

  • transition-delay0ms 不会触发 transitionend 事件,哪怕有 0.001ms 就会。animation 没这问题

  • 部分浏览器 transition: background-image 1s 会有两图重叠渐显渐消的效果,但非常不稳定

  • CSS 的 gap/grid-gap 中 y 轴若为百分比,会以宽度为准,但不会撑起高度

  • flex: 1 实则为 flex: 1 1 0 的缩写,应写为 flex: autoflex: 100% 更好

  • transitionanimation0 必须有单位,如 0s

  • inline 中定位然后 right: 0 是按最后一个字符来定的,而不是容器边界

  • CSS 的 content: attr(data-title) 中 attr 加引号会失效

  • SVG 当 fill="none" 时无法触发 SMIL 的 begin="click",需用 fill="transparent"

  • let a = b = 1 中的 b 其实是 var

  • 给定位定高的 body 设置背景图,contain 会失效,案例

  • 给不定高 bodybackground-size 表现比较意外,案例

  • 当父级 overflow: auto,子级绝对定位超出,父级不加 relative 可看到子级,案例

  • 阻止微信浏览器字体大小 setFontSizeCallback 在微信上可行,在企业微信上不可行

  • 子级非 flex-shrink:0 且父级为 flex 时,子级尺寸不会超出父级,案例

  • 在部分版本浏览器中,某些元素如 <summary> <fieldset> <button> 不可作为 flex 容器

  • 'abc'.includes('') 包含空字符串为空时始终为 true,需进行规避

  • 空字符串 ''.split() 会得到 [''] 而非 [],需进行规避

  • 空数组进行 every 判断始终为 true,需根据场景做好规避

  • 解密 decodeURI(decodeURI("%5Cu9648")) 不可行,需 JSON.parse('"' + decodeURI('%5Cu9648') + '"')

  • 小程序自定义组件中,无法 canvasToTempFilePath 生成图片,报 fail canvas is empty

  • 小程序自定义组件中的 canvas,在 createCanvasContext (canvasId, context) 时必须加 context

  • 正则 \w 也会匹配到下划线 _ 和数字

  • vue 中当 props: { x: [Boolean, String] } 时,x: ''truex: 'x''x'

  • 小程序 <web-view> 的链接部分版本下 xx?a=1 会访问 404 ,改为 xx/?a=1 才行

  • inlinemargin-lefttext-indent 效果是一样的

  • 166.665.toFixed(2) 没有按正确的四舍五入等于 "166.67"

  • 36.62 * 100; // 3661.9999999999995 应用转字符串 replace('.', '')