20180826_ARTS_week09

第9周 ARTS，算法题 Palindrome Number，看了一篇介绍 ES6 箭头函数的文章，介绍一个移动端使用 passive 来提高滚动性能的小技巧，分享了阅读《暗时间》的一些些感想。

Algorithm

/**
 * 
 * Palindrome Number
 * https://leetcode.com/problems/palindrome-number/description/
 * 
 * @param {number} x
 * @return {boolean}
 */

var isPalindrome = function (x) {
    return x == x.toString().split("").reverse().join("");
};

console.log(isPalindrome(121))
console.log(isPalindrome(-121))
console.log(isPalindrome(10))

第一种方法，把数字转成字符串，再变成数组，倒转，然后再变回字符串。 很明显，这个方法效率不高。

之前在20180811_ARTS_week07 中的算法题已经做过了倒转数字的，在这里可以直接用上。

var isPalindrome = function (x) {
    if (x < 0 || (x !== 0 && x % 10 === 0)) { return false; }

    let rev = 0;
    let tmpX = x;
    while (tmpX !== 0) {
        rev = rev * 10 + tmpX % 10;
        tmpX = Math.trunc(tmpX / 10);
    }

    return rev === x;
};

console.log(isPalindrome(121))
console.log(isPalindrome(-121))
console.log(isPalindrome(10))

复杂度 O(n) very good。

Review

A Beginner’s Guide to Arrow Functions in ES6: Part 1

A Beginner’s Guide to Arrow Functions in ES6: Part 1

介绍 ES6 箭头函数的文章。

其实 ES6 箭头函数最重要的特性就是箭头函数中的 this 是词法作用域，由上下文确定。

比如：

var foo = {
    money: 100,
    boo: function () {
        var fn = function () {
            return this.money;       
        };
        return fn();
    }
};

这里 this 指向 window，并没有 money 属性。

而改成箭头函数

var foo = {
    money: 100,
    boo: function () {
        var fn = () => {
            this.money;       
        };
        return fn();
    }
};

这里 this 就指向 foo 对象。

Tip

介绍一个移动端提高滚动性能的小 tip。

16年 Google 推出了 passive 这个特性。如果你的 touch 事件不需要通过 preventDefault 来阻止事件的默认行为，那就可以添加 passive 参数，来提高滚动性能。

target.addEventListener(type, listener, { passive: true });

其原理是，原来的事件执行器不知道你会不会禁用默认行为，要等绑定的事件执行完了，浏览器才知道你是否禁用了默认行为。举个例子，当你点击 a 标签的时候，要等你绑定的事件执行完之后，浏览器才能决定是否跳转。 而加了 passive 之后，创建事件执行器的时候，就告诉了浏览器，我不会调用 preventDefault 来阻止事件。

对此，Chrome 还做了统计：

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

大概意思是，在 Android 版 Chrome 浏览器的 touch 事件中，80% 的页面都不会调用 preventDefault 函数。在滑动上，有 10% 的页面因此增加了至少 100ms 的延迟，1% 的页面增加 500ms 以上的延迟。

现在 Chrome 56 之后，会默认开启 passive，如果你在事件处理中使用了 preventDefault 而又没有指定 passive:false，就会有报错：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

最后，送上一个 polyfill:

// Test via a getter in the options object to see 
// if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("test", null, opts);
} catch (e) {}

// Use our detect's results. 
// passive applied if supported, capture will be false either way.
elem.addEventListener(
  'touchstart',
  fn,
  supportsPassive ? { passive: true } : false
);

Share

周末开始看刘未鹏大大的《暗时间》，有几段话印象深刻，与你分享下。

如果你有一台计算机，你装了一个系统之后，就整天把它搁置在那里，你觉得这台计算机被实际使用了吗？没有。因为 CPU 整天运行的就是空闲进程。运行空闲进程也是一天，运行大数据量计算的程序也是一天，对于 CPU 来说同样的一天，价值却是完全不一样的。

大脑也是如此。

这让我想到著名的『10000 小时定律』，总说某个事情做一万小时能达到精通，一万小时的空转或者低效率运转又怎么可能达到精通呢。

这里又牵涉书中说的另一个概念：

"投入时间"这个说法本身就是荒唐的，实际投入的是时间和效率的乘积。

就像上周耗子哥在群里分享的一张图，学习其实是有效率之分的，听讲和阅读学习内容的平均留存率是 5%~10%，而讨论实践和教授个他人的平均留存率能达到 50%~90%。

这点挺有体会的，开始写博客写公众号之后，学点新东西，以为记录一下，写写很简单，却发现写的过程中可能这个点做 demo 的时候没想清楚，那又要去查相关的知识，实际上花的时间比预想的要多很多。

所以不要以为平时看了书就算学了，有没有实践，有没有和他人分享，甚至以『跟别人讲清楚』的方式来写文章沉淀，效率都会高很多。

虽然我和庞加莱是没法比的，但是常常也在路上想出答案，这真是一种愉悦的体验。

这段和《程序员思维修炼》一书中 R 型大脑讲的异曲同工。《程序员思维修炼》中把大脑分为 L 型和 R 型，并不是字面上的左右脑，L 型是主动性的，集中注意力时，L 型就在工作；而 R 型则不同，你不能主动使用它，只能邀请它。有意思的是，特意回去翻了翻《程序员思维修炼》，书中在讲这部分的时候，同样说到了庞加莱。

我试过洗澡的时候突然想到某个疑难问题的可能解决方案，洗完之后跑去试了试，果然可以，你要问我怎么想到的，我还真说不出来，这真的是一种愉悦的体验。

有时候，看过的书互相印证，互相交织，也是一种愉悦的体验。

碎碎念

记录一些所思所想，写写科技与人文，写写生活状态，写写读书心得，主要是扯淡和感悟。 欢迎关注，交流。

微信公众号：程序员的诗和远方

公众号ID : MonkeyCoder-Life