Skip to content

Latest commit

 

History

History
85 lines (72 loc) · 5.63 KB

前端知识杂项(一).md

File metadata and controls

85 lines (72 loc) · 5.63 KB
Raw
title date tags
前端知识杂项（一）
2018-02-28 09:11:00 -0800
JavaScript
CSS
前端

react生命周期深入

实例化：

  • getDefaultProps(es5)
  • getInitialState(es5)
  • componentWillMount
  • render
  • componentDidMount

存在期：

  • componentWillReceiveProps（后期将废弃）
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁：

  • componentWillUnmount

bind函数

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。绑定上下文到第一个参数，第一个参数以后的参数为预设参数。如下

function bindTest(arg, e) {
  return {arg, e}
}
var t = bindTest.bind(null, 1);
t('test e') // {arg: 1, e: 'test e'}

装饰器decorator

js语法糖，使用@符号进行修饰，只能修饰类或者类的方法，返回一个新的类或者新的方法，不能修饰函数，因为存在变量提升。

xss和csrf

  • xss：跨站脚本攻击，通过注入恶意脚本，达到攻击站点的目的，如SQL注入、JavaScript脚本注入，防范：过滤脚本。
  • csrf：跨站请求伪造，一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法，相当于冒充用户。防范：令牌、使用正确的请求方式。

ajax原理

浏览器提供了XMLHttpRequest对象，在XMLHttpRequest对象被实例化并连接后，浏览器会新启动一个线程来监听实例状态变化，当XMLHttpRequest实例状态有变化（未初始化、初始化完成、发送数据、数据传输中、完成）且设置后回调函数，线程会将回调函数添加到事件队列当中，等待JS引擎空闲了执行。

box-sizing

  • 盒子模型：CSS将每个元素当做一个盒子，每个盒子包括内容、内边距padding、边框border、外边距margin。
  • content-box：width和height只包括内容宽高。
  • border-box：width和height包括内容宽高、内边距、边框，增加内边距、边框不会影响总体尺寸。
  • padding-box：width和height包括内容宽高、内边距，增加内边距不会影响总体尺寸。

rem与em区别

都为相对单位，最终都将转化为px单位，rem转化的大小相对于全局的字体大小，em是根据父元素的字体大小进行转化。

函数式编程部分概念

  • 纯函数：对于相同的输入，永远都有相同的输出，没有特殊情况，没有任何可观察的副作用，完全不依赖于外部变量。如slice为纯函数、splice为非春函数。
  • 函数的柯里化：传递给函数一部分参数来调用他，让它返回一个新的函数来处理剩下的参数。从某种意义上讲，柯里化是一种“预加载”函数的方法，通过传递较少的参数，得到一个已经记住这些参数的新函数，可以算是一种参数的缓存，是一种非常高效的函数编写方法。

header http-only

如果设置了http-only，那么cookie将不能被js所操作，那么从某种意义上讲可以防止xss攻击。

http缓存机制

  • 强制缓存：第一次请求缓存，重复请求之后如果缓存未过期，直接使用缓存。
  • 对比缓存：第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存。
  • Exprires：服务器返回的到期时间（基本不使用了）。
  • Cache-control：缓存模式，private为客户端可缓存、public为服务端和客户端都可以缓存、max-age:xxx缓存内容在XXX面后失效、no-cache为使用对比缓存、no-store不适用缓存。
  • Etag：缓存标识，对比缓存时使用它来标识一个缓存。
  • Last-Modified：最后修改时间，即上次缓存时间。
  • 对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
  • 对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

JavaScript垃圾回收机制

  • 标记清理：JavaScript中最常用的垃圾回收机制，当变量进入执行环境时候，比如一个变量被声明，垃圾回收器会将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，然后在去掉环境中的变量以及被环境中变量引用的变量的标记（闭包）,最后还留有标记的变量，就是要被回收的变量，
  • 引用计数：跟踪记录每一个变量被使用的次数，当声明一个变量并将一个引用类型赋值给该变量的时候，引用次数加1，如果该变量变成另外一个，引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。该方式经常会出现内容泄露问题。如：
function test(){
  var a = {};
  var b = {};
  a.prop = b;
  b.prop = a;
}

a、b最后的引用次数都为2，test()执行完毕后，a和b占用的空间不会被清理。