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

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

 

关于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

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.

对于HTML5

HTML5:

The page will validate using the W3 Validator only when using <meta http-equiv="X-UA-Compatible" content="IE=Edge">. For other values it will throw the error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. In other words, if you have IE=edge,chrome=1 it will not validate. I ignore this error completely as modern browsers simply ignore this line of code.

If you must have completely valid code then consider doing this on the server level by setting HTTP header. As a note, Microsoft says, If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). See olibre’s answer or bitinn’s answer for more details on how to set an HTTP header.

参考资料:
What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?
https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

 

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

某个Udacity的作业中,Html文件里引用了几个js文件,但从这几个js文件里,我不知道代码是从哪里开始执行的。它没有C语言里的main函数,没有用到以下两个函数。

也没有用到

后来发现它用的是 自执行函数表达式 immediately-invoked function expression

javascript的语法真的是太奇怪和随意了。

参考链接:深入理解JavaScript系列(4):立即调用的函数表达式

javascript中以大括号当参数

udacity中有一例子,发现其直接把一对空的大括号当作参数传给一个函数,不知道这语法是什么意思。

library.js

run.js

搜了下,其实这大括号(Curly braces)在javascript中表示的是object,空的大括号应该表示的是一个空的object,上面代码中在carlike里传了一个空的object,然后把这个object的loc赋值为1,最后return这个object为amy。

参考链接:https://stackoverflow.com/questions/4146984/curly-braces-inside-javascript-parameters-for-methods

======

Udacity Front End Developer , Lesson 9 , 的最后一节14.Conclusion 也提到了它这只是 passing a empty object to the carlike decorator.

 

前端笔记

HTML:

<hr>
用来在屏幕上画一条线。
Use the <hr> tag to define a thematic change in the content
https://www.w3schools.com/tags/tag_hr.asp

Udacity HTML/CSS Style Guide

HTML Validator

MDN HTML Element Reference page.

<strong>  gives text strong importance, and is typically displayed in bold.

<em>  stress emphasis

CSS

# 后跟的是ID,
. 后跟的是class
[] 里跟的是attribute
css它的代码被浏览器load是有顺序的,代码越后面,越迟被load,后面的代码会overwrite前面的代码,如果只是想稍微修改一下代码,可以在css的最后加一些代码。

<link rel=”stylesheet” type=”text/css” href=”style.css”>

CSS Validator

Google Fonts

Box-Shadow

Web Safe Fonts

Device Independent Pixels VS Hardware Pixels

Device Pixel Ratio = ( Hardware pixels) / ( Device Independent Pixels )

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

=======width + max-width======
CSS中指定了一张图片的width(例如width: 1024px),那再指定max-width: 100%会有什么效果。

上面的代码,如果没加max-width,会使得如果在device-width小于1024px的device上打开时,图片fish-image会overflow。max-width的意思是,如果device-width小于fish-image width,则width等于device-width,进一步限制了fish-image width。

==============end===========

@media screen and (min-width: 401px) and (max-width: 599px) {
body {background-color: green;}
}

<link rel=”stylesheet” media=”screen and (min-width:500px)” href=”over500.css”>

==========

Flexboxsheet
http://jonibologna.com/content/images/flexboxsheet.pdf

How to Build Responsive Images with srcset
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

70 Expert Ideas For Better CSS Coding
https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

========

Html5tags

Document and website structure
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Bootstrap:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

https://getbootstrap.com/docs/3.3/css/

JavaScript

https://daringfireball.net/projects/markdown/