20180826_ARTS_week09

栏目: JavaScript · 发布时间: 5年前

内容简介:第9周 ARTS,算法题 Palindrome Number,看了一篇介绍 ES6 箭头函数的文章,介绍一个移动端使用 passive 来提高滚动性能的小技巧,分享了阅读《暗时间》的一些些感想。第一种方法,把数字转成字符串,再变成数组,倒转,然后再变回字符串。 很明显,这个方法效率不高。之前在20180811_ARTS_week07 中的算法题已经做过了倒转数字的,在这里可以直接用上。

第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

20180826_ARTS_week09


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

参数化建筑设计

参数化建筑设计

高云河、白云生 / 华中科技大学出版社 / 2016-8-1 / 69.80

《参数化建筑设计》以案例的形式讲解参数化建筑设计的具体方法,其中包含犀牛(Rhino)和Grasshopper的应用。本书不单单是一本计算机软件教材,书中教会读者的是参数化建筑设计的思路,希望通过完成一个个案例使读者融会贯通,在今后的设计工作中能够熟练使用,辅助自身完成建筑设计。全书共有10个案例,循序渐进,由浅入深,几乎涵盖了参数化建筑设计所要使用的所有功能和方法。一起来看看 《参数化建筑设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具