行业动态

  1. fuse.js：轻量级模糊搜索插件

    • 链接：https://fusejs.io/
    • 关键词：轻量级（11KB），零依赖，模糊搜索
    • 应用：适合于小数据量的简单搜索，可依据匹配程度排序

  2. 3个值得期待的JavaScript新特性

    • 链接：https://mp.weixin.qq.com/s/aM5vlKkka8GEFSFM222fNg

    • 简述

      • 可选运算符(Optional Chaining, stage-1)：简单的防止访问object时，由于数据结构不规范导致的报错。 

        1
        2
        3
        4
        5
        6
        const data = {
            user: {}
        };
        console.log(data.user?.address?.street); // undefined
        // 可替代以下写法
        // const street = data && data.user && data.user.address && data.user.address.street;

      • 空值合并(Nullish Coalescing, stage-1)：判断是否为null或undefined，可以在保护0，false，``的情况下，设置默认值

        1
        2
        3
        4
        5
        6
        var val1 = undefined, val2 = null, val3 = 0, val4 = false, val5 = '';
        val1 ?? 'default value'; // val1 = 'default value'
        val2 ?? 'default value'; // val2 = 'default value'
        val3 ?? 'default value'; // val3 = 0
        val4 ?? 'default value'; // val4 = false
        val5 ?? 'default value'; // val5 = ''

      • 管道运算符(The Pipeline Operator, stage-1)：链式调用函数

        1
        2
        3
        4
        5
        6
        let result = "hello"
            |> doubleSay
            |> capitalize
            |> exclaim;
        // 替代以下写法
        // result = exclaim(capitalize(doubleSay("hello")))
  1. 常见的CSS图形绘制合集

近期问题记录

  1. 页面视频资源会发出3次请求的原因
    • 原因分析：https://www.zhangxinxu.com/wordpress/2018/12/video-moov-box/
    • 简述：解释了一下页面中某些video资源会请求3次的原因，赶忙看了一下之前做的项目拉取视频也有这个问题，文章中修复方案实测有效。除此之外发现使用http链接，请求依旧会有2次，第一次请求的code为307，原因是后台做了强制https访问的限制（基于HSTS），改用https链接问题解决。
  2. babel舍弃了以前的babel-*-*的命名方式，7.x版本采用了@babel/*-*形式，使用7.x版本babel安装插件时需要注意对应。
  3. animation动画安卓下卡顿？
    • 原因分析：修改width/height/margin，误差叠加
    • 解决：
      • 修改为transform，避免重排；
      • 修改为单一属性变化，减少误差；
      • 加入transform: translateZ(0)启动GPU加速

好玩的H5案例

  1. 我的剪纸新年照
    分析：https://www.h5anli.com/cases/201902/chuanghua.html
    h5链接：http://m.baconbuy.com/qq/paperCuts/
  2. 我家年夜饭（类似汪年全家福）
    分析：https://www.h5anli.com/cases/201902/pupupula.html
    h5链接：https://pupupula.net/nian/index.html?from=singlemessage

关注学习ing

  1. Lottie
    https://airbnb.design/introducing-lottie/
    http://test.imweb.io/topic/5b23a745d4c96b9b1b4c4efc
  2. parcel
  3. react devtools：https://github.com/facebook/react-devtools
    这个没啥，就是好工具，用上用上~
  4. 优化动画卡顿：近期正在整理输出相关文章