本周 ARTS,做了算法题 String to Integer (atoi),看了一篇介绍 BEM 命名方式的文章,Tip 记录了 css 属性 pointer-events 的用法,分享了使用 python 结合拉普拉斯算子实现图片清晰度识别的方法。
/**
* 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 码,然后判断范围就可以了。
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 这种书写方式主要体现在:
这个规则基本上还是比较好理解的。
之前也听说过 BEM 的命名方式,我理解一个是为了每个模块更严谨,命名更加合理和语义化,另一方面也是为了能避免样式的冲突。不过随着 Vue 等框架支持 css scoped 之后,冲突的问题有很大的缓解。
BEM 的使用还是要根据实际情况,如果规定的太严格,样式上的重用性会降低不少。
这里介绍一个 CSS 属性,pointer-events
。
这是我用过的一个巨牛逼的属性,如果你设置 pointer-events:none;
可以把一个元素的所有事件都屏蔽。比如一些全屏下雪场景,又要浮在主内容上,又不能挡着主内容的操作交互,就可以使用这个属性。
除此之外,还可以嵌套着用,最外层设置 pointer-events:none;
,然后给里面需要点击的东西设置 pointer-events:all;
,里面东西的时间又可以用了。
这个属性,移动端支持比较好,PC 端 IE 11 开始有支持。
分享这周记录的,关于使用 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 拉普拉斯算子做边缘识别,最后计算方差,得出的值越高代表图片越清晰,然后就可以通过设置阀值来判断图片是否达到需要的清晰度。原理是一个图片越清晰,它能被识别的边缘就越多。
但也有一些局限性,在一些故意对图片背景做模糊和景深虚化的场景不太适用,容易误杀。
记录一些所思所想,写写科技与人文,写写生活状态,写写读书心得,主要是扯淡和感悟。 欢迎关注,交流。