前端海底捞不定期跟新

2017年8月

1，ES6 Map和Set

Map

ES6中新增的数据类型，类似PHP中的键值对形式结构

var m = new Map([['a',1],['b',2],['c',3]]);

m.get('a'); //1

m.set('d',4); //新增

Set

ES6中新增了Set数据结构，类似于数组，但是它的成员都是唯一的，其构造函数可以接受一个数组作为参数

let array = Array.from(newSet([1,1,1,2,3,2,4]));
//Array.from函数可以实现set-->Array的转化
console.log(array);// => [1, 2, 3, 4]

2，MVVM

angular,js
脏检查模式:在angular中当触发某些执行条件时(如change，input等)，执行一个检测轮询，来遍历所有数据，对比更改的地方，然后执行变化，响应到DOM
因为此方法不科学，有很多多余的遍历，故称为脏检查
vue.js
数据劫持:在ES5中定义了一个名为"属性描述符的对象"，可以通过Object.getPropertyDescriptor()来查询，getPropertyDescriptor接收一个对象，和对象上的某个属性两个参数，查询该属性的四个描述符状态，如:

Object.getPropertyDescriptor({x:1},x);
//返回该属性的值，可写性，可枚举性和可配置性
{
          value:1,
          writable:true,
          enumeable:true,
          configurable:true
}

而需要设置，修改这些特性时，使用Object.defineProperty。在vue vm中通过Object.defineProperty()对需要监听的每个对象属性设置getter和setter，每当对象属性的数据发生变更时，触发setter的函数(劫持)，在setter中通知所有的订阅者，watcher监听到变化之后更新视图

函数节流

「函数节流让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视你。」
为了节制某些函数的执行频率，在触发时设置setTimeout，如果短时间内再次触发，清除上一个定时器，设置新的定时器。

function throttle(method, context) {
     clearTimeout(methor.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     }， 100);
 }
//接收一个函数和一个上下文(函数执行上下文为非必选参数)，将定时器设为该函数的一个属性，100ms内再次调用这个函数将清除并重新设置定时器
//调用
window.onresize = function(){
    throttle(myFunc);
}
//摘自js高程

2017年9月

1，获取浏览器窗口大小

//PC
var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//移动设备中，除了以上方法window.innerWidth || window.innerHeight都保存着可见视口信息

2，常见的POST数据提交方式

application/x-www-form-urlencoded：浏览器的原生表单提交，若不设置参数格式，默认就为application/x-www-form-urlencoded，后端可以方便读取
multipart/form-data：常用于文件上传，于表单和请求头中设置
application/json：这种方案，可以方便的提交复杂的结构化数据，特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler，都会以树形结构展示 JSON 数据，非常友好。

3，前端安全XSS和CRSF

XSS，跨站脚本攻击，全称cross-site scripting，使用js脚本注入的方式攻击网站。

防范:
1，过滤转义输入输出，若输入输出中带有