前言

前些天写bug的时候，需要对数组按字母进行排序，就想到了 sort ，没想到还给了我个惊（jing）喜（xia）

随着互联网的飞速发展，人们已经不满足于在web页面上使用一些默认字体了，但是页面引入字体文件体积很大加载又费时，那是怎么办呢？今天介绍的这个工具就可以完美的解决这个问题

记录一些日常工作中经常会用到的 Linux 命令

PureComponent 和 Component差不多，但是 PureComponent 会通过 prop 和 state 的浅比较来实现shouldComponentUpdate，某些情况下可以用 PureComponent 提升性能。

PureComponent 不仅会影响本身，而且会影响子组件，所以PureComponent 最佳情况是展示组件

假设现在有 Index、Example 两个组件。

Index 为父组件，Example 为子组件。

1、父组件继承 Component ，子组件继承 Component，每次父组件的 prop、state 更新，都会更新 Index、Example 组件。

2、父组件继承 Component，子组件继承 PureComponent，初始化的时候渲染 Index、Example 组件，当父组件发生变化，子组件会对前一次的 state、props 进行一个浅比较来判断需不需要重新渲染子组件，这就在某种程度上提升了性能

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。

1
2
3

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

如果不加 passive:false; 在 ios 上是不能起作用的。

解释

微信在 Android 端和 IOS 端使用的不是同样的浏览器内核：

• Android 版 微信浏览器 ：QQ浏览器 X5内核（相当于使用的 Chrome）
• IOS 版 微信浏览器 ：WKWebView（相当于使用的Safari）
  所以下面分别使用 Chrome 和 Safari 来分析。

浏览器内核总结：https://www.cnblogs.com/jesse131/p/4888857.html

1. Chrome 默认的事件监听参数
   

• useCapture:false 表示事件采用冒泡机制（capture 译为 捕获），浏览器默认就是 false
• passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为（可以提高运行速度）。

2. Safari 默认的事件监听参数

   Safari Update：Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
   更新了根文档触摸事件侦听器，默认使用passive:true提高滚动性能并减少崩溃

所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。这将导致设置的 e.preventDefault() 代码失效。

所以 Safari 默认是不会阻止滚动的。

通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

!function(window, document) {
    function setSize() {
        // 设备宽度
        let deviceWidth = window.screen.width;
        // 设计稿宽度
        const baseValue = 750;
        // html的字体大小 = (设备宽度 / 设计稿宽度) * 100
        document.documentElement.style.fontSize = (deviceWidth / baseValue) * 100 + 'px';
    }
    // DOM树加载完执行
    window.addEventListener("DOMContentLoaded", function() {
        setSize();
    })
    // 屏幕变化执行
    window.addEventListener("resize", function() {
        setSize();
    })
    setSize();

}(window, document)

(不同设备的宽度 / 设计稿的尺寸) * 100%

比如设计稿是750px，有个按钮是 590px 换算之后就是 5.9rem

配合 postcss-pxtorem 这个插件一起食用更香噢~

技巧太多，快点开全文吧