用js实现一个计数器

用javascript实现一个计数器,使它具有下面的效果:
Increment(); // Number of events: 1
Increment(); // Number of events: 2
Increment(); // Number of events: 3
每次执行 Increment() 都会输出 “Number of events: N”, 且N每次都会加上1.

解密JavaScript闭包
https://zhuanlan.zhihu.com/p/28213094
下面链接中的 “用闭包模拟私有方法”
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

一开始想的是用 static 来实现,但 js 中的 static 只有 static method 。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

js获取嵌套数组里所有元素

给定一个随机数组,数组可能包含数组(也就是说数组元素可能为数组)。需求用js实现一个函数,返回该数组中所有元素。例如:数组[2,3,[4,6,[1,8]],12,10],返回结果为:[2,3,4,6,1,8,12,10]。

这个用递归来实现比较容易。

 

Hexo, HttpRequestException encountered, could not read Username for ‘https://github.com’

在按照教程(链接1)使用Hexo时,最后一步是部署,但却报错

fatal: HttpRequestException encountered.
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for ‘https://github.com’:

找不到原因,因为我github的ssh配置是正确的。

搜了下才知道,github在两个月前停止了对 TLSv1/TLSv1.1 的支持,见链接3,同时在链接3中也给出了Windows下的解决办法,安装 Git-Credential-Manager-for-Windows v1.14.0

链接1:hexo从零开始到搭建完整

链接2:https://github.com/hexojs/hexo/issues/3043

链接3:Weak cryptographic standards removal notice

香港百佳线上购物体验

百佳超市送的优惠劵,App上购物满500有88折。本着好奇体验了一下,确实很糟糕。

第一次买的时候,选择的送货时间是8PM以后,但他其实下午就打电话给我送货,但我其实不在家,经过一番痛苦的沟通后,终于把快递放在楼管那里。(把快递放在楼管,居然要先电话给物业,物业再通过内线电话告诉相应楼的楼管)

第二次买的时候,想要用另一张送的88折优惠劵,但用不了,没有任何提示,但起来这个只对新用户有效。我选的送货时间是下午,但快递员上午就打电话送货了。

百佳安卓App体验非常糟糕,很慢,订单的状态延迟,都送货完成好几天了还显示正在送货。

总的来说,跟淘宝、京东的差距真的太远了。

Windows 10 更新错误 0x800f081f 的解决办法

我在更新KB4088776时安装失败,错误代码 0x800f081f,重试了几次都没成功。搜了下,微软论坛上有人建议去手动安装该更新,下载地址是
http://www.catalog.update.microsoft.com/home.aspx
我试了下倒居然安装成功了。原来有手动下载更新的地方。

javascript – don’t make functions within a loop

有一次提交project时,被提示 don’t make functions with a loop ,查了些资料后才明白。

上面的代码可以正常输入 1 到 10 。

但上面的代码就会输出10个11 。

当看到输出结果时,想想就明白原因了,因为等到 1 秒后再去输出时,i 的值已经变成 10 了。

就因为容易出现这样的问题,所以不能在 loop 里 make functions 。

参考链接:https://www.youtube.com/watch?v=Nqfs14iu_us

=======20180420更新========

MDN中讲闭包时也有提到这个问题:在循环中创建闭包:一个常见错误

链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

html中script的属性async defer

在用到google map时,其最简单的demo里用到了async和defer。script是html的element,async和defer是script的attributes。

google map demo
https://developers.google.com/maps/documentation/javascript/examples/map-simple

网上有蛮多async和defer分别的作用及对比,两者在fetch其js file时都是异步,这时不影响html加载。async是一fetch到js file就执行,defer是fetch到后等待html加载完了再执行。但如果这两个都放在 </body> 前面的地方,那就区别不大了。

另外,async适合这个js file没有依赖其它的file,它自己执行完了不妨碍其它js执行。

async vs defer attributes (这个链接图示了两者的区别,要看)
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Asynchronous vs Deferred JavaScript (这个链接的结果很重要,要看)
https://bitsofco.de/async-vs-defer/

但上面的文章没有提到这两个属性同时使用的情况,google map demo就是同时用的。

w3中关于这两个属性同时使用有说明。

https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

也就是说同时用是为了兼容旧浏览器,旧浏览器可以识别defer(async将被忽略),那么可以推断,在modern web browsers里,写了两个属性时,应该识别的是async。

https://stackoverflow.com/questions/13821151/can-you-use-both-the-async-and-defer-attributes-on-a-html-script-tag

上面的链接里有个comment,

1.both async defer exist, modern browsers run as async; 2.both async defer exist, old browsers run as defer instead of default behavior

我觉得这个comment是对的。

https://developers.google.com/maps/documentation/javascript/tutorial
The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads.

上面链接中说明了为啥google map中要用async。但感觉讲得有问题,这个js在execution时还是会影响website render,除非是把 script element放在 靠近</body>的前面。

 

input number maxlength chrome

上面这个html代码,其实是想限定number的值为小数点后一位,但其实没有实现。在Chrome中这个maxlength会被忽略掉,在IE 11和Edge中最多只能输到小数点(例如1.2)。

正确的做法是用 step

Chrome中的 input number 的 maxlength 会被忽略,其实忽略掉是对的。

MDN input maxlength
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

Is there a float input type in HTML5?
https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5

*, *::after, *::before { box-sizing: inherit }

我觉得上面的 css 写得很奇怪,照理说 * 已经选中了所有的 html elements 了,为什么还要再加上 *::after 和 *::before。

::after 和 ::before 的正式叫法是 psuedo-elements 。

但其实 * 选中的是所有的DOM tree中的element,但 ::after 和 ::before 并不在document tree里。

http://jsfiddle.net/86gc1w6f/
http://jsfiddle.net/gwbp2vpL/1/
CSS:

HTML:

将上面的 content-box 改为 border-box,会发现其实 box-sizing 的修改并没有影响到 p::after。也就是 * (universal selector) 并没有选中 psuedo-elements 。

universal selector 能选中的element是 actual elements,而 psuedo-elements 是DOM中的抽象的 elements,它只是在某个element的前面或者后面硬插入一个不在DOM tree中的 element。
Although pseudo-elements can appear in selector notation alongside simple selectors, pseudo-elements are completely separate from simple selectors as they represent abstractions of the DOM that are separate from actual elements, and therefore both represent different things. You cannot match a pseudo-element using a simple selector, nor can you apply styles to an actual element in a CSS rule with a pseudo-element in its selector.

Universal selector * and pseudo elements
https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements

Why use * selector in combination with *::before and *::after
https://stackoverflow.com/questions/31317238/why-use-selector-in-combination-with-before-and-after

CSS Pseudo-elements
https://www.w3schools.com/css/css_pseudo_elements.asp

 

关于box-sizing border-box

其实这个概念蛮好理解的,就是把content, padding, border塞到一个box里,这样在指定width时直接指定的是这个box的width,而不像以前要把content width + padding width * 2 + border width * 2,这样设置起来更方便,也容易理解。

要注意的是不包括margin width。

The CSS Box Model
https://www.w3schools.com/Css/css_boxmodel.asp

CSS Box Sizing
https://www.w3schools.com/Css/css3_box-sizing.asp

学会使用box-sizing布局
https://www.jianshu.com/p/e2eb0d8c9de6

box-sizing
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

box-sizing使用场景
https://www.jianshu.com/p/2f2cf326795d