LinMinquan's Blog

Experience technology to change life

用js实现一个计数器

用javascript实现一个计数器,使它具有下面的效果: Increment(); // Number of events: 1 Increment(); // Number of events: 2 Increment(); // Number of events: 3 每次执行 Increment() 都会输出 “Number of events: N”, 且N每次都会加上1. function createCounter() { let counter = 0; function incrementFun() { counter++; console.log("Number of events:" + counter); } return incrementFun; } let Increment = createCounter(); Increment(); Increment(); 解密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 Read more →

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

给定一个随机数组,数组可能包含数组(也就是说数组元素可能为数组)。需求用js实现一个函数,返回该数组中所有元素。例如:数组[2,3,[4,6,[1,8]],12,10],返回结果为:[2,3,4,6,1,8,12,10]。 这个用递归来实现比较容易。 let original = [2,3,[4,6,[1,8]],12,10]; function getAllElement(array) { let result = []; for( let i=0; i< array.length; i++ ) { if( Array.isArray( array[i] ) ) { let tempResult = getAllElement( array[i] ); for( let j=0; j< tempResult.length; j++) { result.push( tempResult[j] ); } } else { result.push( array[i] ); } } return result; } let temp = getAllElement( original ); console.log( temp );   Read more →

javascript – don’t make functions within a loop

有一次提交project时,被提示 don’t make functions with a loop ,查了些资料后才明白。 function count(max) { for(var i=0; i< max; i += 1) { console.log(i+1); } } count(10); 上面的代码可以正常输入 1 到 10 。 function count(max) { for(var i=0; i< max; i += 1) { setTimeout(function() { console.log(i+1); }, 1000); } } count(10); 但上面的代码就会输出10个11 。 当看到输出结果时,想想就明白原因了,因为等到 1 秒后再去输出时,i 的值已经变成 10 了。 function count(max) { for(var i=0; i< max; i += 1) { printLater(i+1); } } function printLater(output) { setTimeout(function() { console. Read more →

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加载完了再执行。但如果这两个都放在 前面的地方,那就区别不大了。 另外,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. Read more →

input number maxlength chrome

<input type="number" maxlength=2> 上面这个html代码,其实是想限定number的值为小数点后一位,但其实没有实现。在Chrome中这个maxlength会被忽略掉,在IE 11和Edge中最多只能输到小数点(例如1.2)。 正确的做法是用 step <!DOCTYPE html> <html> <body> <p>Numeric restrictions will apply in the input field:</p> <form action="/action_page.php"> Quantity (between 1 and 5): <input type="number" step=0.1 name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p> </body> </html> 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 Read more →

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

*, *::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: * { box-sizing: content-box; } p { position: relative; width: 200px; border: 10px solid rgba(255, 0, 0, 0.5); } p::after { position: absolute; right: -100px; top: -10px; width: 100px; height: 30px; border: 10px solid rgba(0, 0, 255, 0. Read more →

关于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   Read more →

关于Normalize.css

在看到一些例子在用Normalize.css,在Html中先加载Normalize.css,再加载自己写的css。对Normalize的第一反应是数学中矢量的单位化,规格化。 其实它是为了 that provides better cross-browser consistency in the default styling of HTML elements. 它在默认的HTML元素样式上提供了跨浏览器的高度一致性。 这我才意识到不同浏览器对HTML元素的默认样式上会有一些不同,想想也确实会这样。另外要注意到的是Normalize.css是在一直更新的,在Github上有源码。 官网 https://necolas.github.io/normalize.css/ Normalize.css source on GitHub https://github.com/necolas/normalize.css 浅谈Normalize.css https://www.jianshu.com/p/3d21d1932aa0 矢量运算 https://baike.baidu.com/item/%E7%9F%A2%E9%87%8F%E8%BF%90%E7%AE%97 Read more →

http-equiv=”X-UA-Compatible” content=”ie-edge”

看到一个Demo在Html的Head用到这个,搜了下相关资料。 这个主要是给微软家的浏览器用的,用来告诉Internet Explorer要在哪个版本的IE上Render。对于想支持IE8、IE9这样的旧版本,是需要用到这个标签。但对于IE11或Edge,这个已经不需要了。 Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. If you only support the latest browsers (IE 11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Read more →

自执行函数表达式 immediately-invoked function expression

某个Udacity的作业中,Html文件里引用了几个js文件,但从这几个js文件里,我不知道代码是从哪里开始执行的。它没有C语言里的main函数,没有用到以下两个函数。 $(document).ready(function() { /* code here */ }); $(function() { /* code here */ }); 也没有用到 window.onload = function(e){ /* some code */ } 后来发现它用的是 自执行函数表达式 immediately-invoked function expression (function () { /* code */ } ()); // 推荐使用这个 (function () { /* code */ })(); // 但是这个也是可以用的 javascript的语法真的是太奇怪和随意了。 参考链接:深入理解JavaScript系列(4):立即调用的函数表达式 Read more →