ES6 template literals模板字符串

var parkName = 'Disneyland'
过去:'I love ' + parkName
现在I love ${parkName}

template literals不能在name value pair里使用
那怎么把variable pass进name-value pair？
pair的name左右加[]
const characterName = 'Mickey Mouse'
const mood = 'Happy'
const disneyCharacter = {
[characterName]: mood, // correct
${characterName}: mood, //wrong
[${characterName}]: mood, //also correct but unnecessary
}
​

Inline/block/inline-block

inline(当作font) Displays an element as an inline element (like ). 没有高度，宽度和vertical paddings/margins
block(div,带line break) Displays an element as a block element (like

). It starts on a new line, and takes up the whole width
inline-block Displays an element as an inline-level block container(like img). The element itself is formatted as an inline element. 不像block带line break,但是可以设置高度，宽度，可以设置vertical的margin padding.margin: auto不行
​区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin,padding可以生效。但是竖直方向的margin/padding却不能生效。
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素

overflow

overflow/-x/-y: hidden
隐藏超出部分，不会有scrollbar了
​
clearfix放在float外面第一个父元素里的

如果父元素设置了宽度，子元素总宽度超过了父元素的宽度,那么其中一个元素会drop,谁顺序在后面就会drop谁 float只会影响内联元素的布局,不会影响块级元素的布局.如果包含框的高度比浮动框低的时候,就会高度塌陷(float元素吐出来了) ​ # 异步函数,callback 如果有两个异步的函数,第一个函数执行了(还不知道有没有完成),然后开始执行第二个函数(如果依赖第一个函数)就有可能报错 解决方法就是在callback(回调的地方,即已经执行完并且返回了状态)的地方再执行第二个函数

位置

left top等是针对view的position 需要position: absolute
margin-left, margin-top这些 是针对上一个元素的position
​

如何居中

block element 可以margin: auto实现水平方向的居中
文字可以text-align: center
图片可以display: block; margin设为auto
图片在图片元素中居中 vertical-align: middle;
​

如何做出透明边框的效果

可以用box-shadow来加透明border
20px的shadow, 0.3的透明度 来点小radius
border-radius: 1px; box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.3);
​

js加载顺序

head的js在页面加载完之前被载入
body的js在页面载入的时候执行
html之后的js在页面载入完成后执行
​

webpack的作用 （有很多js要加载，并且互相依赖，很容易出错）

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构。
找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）
并将其打包为合适的格式以供浏览器使用。
webpack两个文件夹,一个app,一个public,app是放主入口文件和其他js的(main.js和greeter.js)
public是放html和打包后的bundle.js的
greeter.js
module.exports = function(){
//blah
}

main.js
const greeter = require("./greeter.js")
document.queryselector("#root".appendchild(greeter()));
然后通过webpack app/main.js public/bundle.js,将主入口文件打包成bundle.js

cors

no-cors mode下, post的req.body是空的,需要cors middleware https://expressjs.com/en/resources/middleware/cors.html

实现滚动加载

scrolltop:已混动看过并隐藏在上面的部分
scrollheight:所有内容的高度
clientheight或window.height:视窗的高度
(window).scroll(function() { if((window).scrollTop() == $(document).height() - $(window).height()) {
alert("bottom") }
});

TCP transmission control protocol:

流传输,可靠,4次握手(连接后除非某端断开,不然会一直连着).
1客户端向服务端传包,并且进入send状态
2服务端收到包,进行确认并且向客户端发包,进入recv状态
3客户端收到包,进行确认并且向服务端发包,双端进入established状态
4哪端先断开链接,哪端发送FIN分节,进行终止
UDP user datagram protocol
不连接就直接发包过去,比如常见的ping指令
缺乏可靠性,允许一定的丢包
HTTP:
客户端请求一次,服务器回应一次,请求结束后就关闭链接
用户登录验证
cookie & session:
用户输入用户名、密码或者用短信验证码方式登录系统；
服务端验证后，创建一个 Session，并且将 SessionID 存到 cookie，将set cookie请求发送回浏览器；
客户端根据set cookie请求设置好带seesion信息的cookie
下次客户端再发起请求，自动带上 cookie 信息，服务端通过 cookie 获取 Session 信息进行校验；

Cookie的问题:app不能用,cookie不能跨域
存进内存数据库的解决方法
用户输入用户名、密码或者用短信验证码方式登录系统；
服务端经过验证，将认证信息构造好的数据结构存储到 Redis 中，并将 key 值返回给客户端；
客户端拿到返回的 key，存储到 local storage 或本地数据库；
下次客户端再次请求，把 key 值附加到 header 或者 请求体中；
服务端根据获取的 key，到 Redis 中获取认证信息；

没有赋值过或initialize过的变量都是typeof undefined
array.split
array.sort
array.reverse
array.join("") "43142143"
array.toString(); "4,3,1,4,2,1,4,3"
array.includes
array.splice (startIndex, length, somethingtoAdd1, somethingtoAdd2,...) //modify original array
array.slice(startIndex,endIndex) //doesn't modify original array

parseFloat()
parseInt(string, radix) ->将某进制的数字string parse成十进制整数 Error: parseInt(5, 2)
数字转进制string
numberObject.toString(radix); //233.toString(16) = "e9"
数字string转数字
parseInt(string, radix)