20180818_ARTS_week08

Posted on 2018-08-18 in ARTS by yucongchen

本周 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 拉普拉斯算子做边缘识别,最后计算方差,得出的值越高代表图片越清晰,然后就可以通过设置阀值来判断图片是否达到需要的清晰度。原理是一个图片越清晰,它能被识别的边缘就越多。

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


碎碎念

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

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

公众号ID : MonkeyCoder-Life

程序员的诗和远方