20180818_ARTS_week08

本周 ARTS,做了算法题 String to Integer (atoi),看了一篇介绍 BEM 命名方式的文章,Tip 记录了 css 属性 pointer-events 的用法,分享了使用 python 结合拉普拉斯算子实现图片清晰度识别的方法。

Algorithm

/**
 * String to Integer (atoi)
 * 
 * https://leetcode.com/problems/string-to-integer-atoi/description/
 * 
 * @param {string} str
 * @return {number}
 */
var myAtoi = function (str) {

    var rs = 0;
    var rsStr = "";

    var sign = "";

    for (var i = 0; i < str.length; i += 1) {
        var s = str[i]
        var charCode = s.charCodeAt()

        if (!rsStr && !sign && (charCode == 43 || charCode == 45)) { // + - , 有数字之后再遇到符号就退出了
            sign = s;
        } else if (charCode >= 48 && charCode <= 57) { // 9 ~ 0
            rsStr += s;
        } else if (charCode == 32) { // 空格
            if (rsStr || sign) { // 中间有空格的情况  "    +0  123"
                break;
            }
            continue;
        } else {
            break;
        }
    }

    if (!rsStr) {  // 只有符号,没有数字
        return rs;
    }

    rs = (sign + rsStr) * 1


    if (rs < -Math.pow(2, 31)) {
        return -Math.pow(2, 31);
    } else if (rs > Math.pow(2, 31) - 1) {
        return Math.pow(2, 31) - 1;
    } else {
        return rs;
    }

};

console.log(myAtoi("42"))
console.log(myAtoi("    -42"))
console.log(myAtoi("4193 with words"))
console.log(myAtoi("words and 987"))
console.log(myAtoi("-91283472332"))

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 O(n^2),可以考虑把 0~9 作为字典下标。

我这里是用 stringt.charCodeAt() 方法把字符串变成 ASCII 码,然后判断范围就可以了。

Review

A quick introduction to Block Element Modifiers (BEM)

https://medium.freecodecamp.org/a-quick-introduction-to-block-element-modifiers-bem-9df46d29b64c

作者主要介绍了 BEM 这种书写 HTML 和 CSS 的约定。

BEM 这种书写方式主要体现在:

  1. B -- Block,页面按块划分,比如头部叫 header,相应的 css 类名就叫 herder。
  2. E -- Element,element 指块中的元素,比如头部的按钮,css 类名就叫 header-button。
  3. M -- Modifier,这个指块中元素的不同状态,比如头部按钮有不可点击态,css 类名就叫 header-button-disabled。

这个规则基本上还是比较好理解的。

之前也听说过 BEM 的命名方式,我理解一个是为了每个模块更严谨,命名更加合理和语义化,另一方面也是为了能避免样式的冲突。不过随着 Vue 等框架支持 css scoped 之后,冲突的问题有很大的缓解。

BEM 的使用还是要根据实际情况,如果规定的太严格,样式上的重用性会降低不少。

Tip

这里介绍一个 CSS 属性,pointer-events

这是我用过的一个巨牛逼的属性,如果你设置 pointer-events:none;可以把一个元素的所有事件都屏蔽。比如一些全屏下雪场景,又要浮在主内容上,又不能挡着主内容的操作交互,就可以使用这个属性。

除此之外,还可以嵌套着用,最外层设置 pointer-events:none;,然后给里面需要点击的东西设置 pointer-events:all;,里面东西的时间又可以用了。

这个属性,移动端支持比较好,PC 端 IE 11 开始有支持。

Share

分享这周记录的,关于使用 Python 做图像清晰度识别的文章。http://www.imbeta.cn/python-zuo-tu-pian-qing-xi-du-shi-bie.html#python-zuo-tu-pian-qing-xi-du-shi-bie

步骤是对先图片做灰度,然后用 3x3 拉普拉斯算子做边缘识别,最后计算方差,得出的值越高代表图片越清晰,然后就可以通过设置阀值来判断图片是否达到需要的清晰度。原理是一个图片越清晰,它能被识别的边缘就越多。

但也有一些局限性,在一些故意对图片背景做模糊和景深虚化的场景不太适用,容易误杀。


碎碎念

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 20180722_ARTS_week04

    这题寻找两个已经排好序的数组的中值,一开始思路比较简单,两个数组合一起,然后排个序就很容易找到中值了。

    Bob.Chen
  • 20180803_ARTS_week06

    这个是个比较不好的解法,就是像题目介绍里面那样先把这个『之』字形给做出来,然后再逐行读成字符串,但是通过这个比较好帮助我们理解这个题目。

    Bob.Chen
  • Canvas基础-粒子动画Part4

    在之前的文章 Canvas基础-粒子动画Part2 和 Canvas基础-粒子动画Part3 中分别讲了用图片和文字做粒子动画,今天我们来把代码简单整理一下,...

    Bob.Chen
  • 为什么 Django 能持续统治 Python 开发世界

    对于 Python 开发者来说,web 开发框架真可谓玲琅满目。然而 Django , 毋庸置疑的成为最受青睐的 web 框架。通过本篇博客,我来为大家讲解下为...

    Debian社区
  • 无痛使用 Django+xAdmin+MongoDB

    前几天开始自己在做些日志的分析的小玩具,要分析手搜的用户访问情况,工具很简单,处理逻辑也很简单——从kafka拿nginx日志,然后处理完保存的数据库中,然后以...

    the5fire
  • Python Web 学习资料汇总

    image Test-Driven Development with Python

    马哥Python
  • mds/journal.cc: 2929: FAILED assert解决

    在处理一个其他双活MDS无法启动环境的时候,查看mds的日志看到了这个错误mds/journal.cc: 2929: FAILED assert(mds->se...

    用户2772802
  • Python高级进阶(一)Python框架之Django入门

      Django是一个开放源代码的Web应用框架,由Python写成。采用了MVC的框架模式,即模型M,视图V和控制器C。它最初是被开发来用于管理劳伦斯出版集团...

    马一特
  • python制作缩略图

    学习笔记: 1、os模块,python的os模块封装了常见的文件和目录操作。 2、PIL模块中Image类thumbnail()方法可以用来制作缩略图,...

    py3study
  • Golang groupcache LRU 缓存简介与用法

    LRU(Least Recently Used,最近最久未使用算法)是一种常见的缓存淘汰算法,当缓存满时,淘汰最近最久未使用的元素,在很多分布式缓存系统(如Re...

    Dabelv

扫码关注云+社区

领取腾讯云代金券