前端知识点六51、盒子模型和怪异盒子 box-sizing:border-box; 怪异盒模型 box-sizing:c

51、盒子模型和怪异盒子

box-sizing:border-box; 怪异盒模型 box-sizing:content-box; 标准盒模型

52、清除浮动

父级元素设置overflow:hidden; 元素溢出无法显示
在最后一个浮动标签后，新加一个标签，给其设置clear：both；添加无意义标签，语意化差
使用after伪元素清除浮动（推荐使用）

.clearfix:after{
  /* 设置添加子元素的内容是空 */ 
  content: '';
  /* 设置添加子元素为块级元素 */ 
  display: block;
  /* 设置添加的子元素的高度0 */ 
  height: 0;
  /* 设置添加子元素看不见 */ 
  visibility: hidden;
  /* 设置clear:both */ 
  clear: both;
}

53、es6

promise
acync、await
箭头函数没有this指向，没有arguments参数，可以使用rest(...)剩余运算符，不能作为构造函数，没有原型属性，不能作为Generator函数，不能使用yield关键字
解构赋值

let [a, b, c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3];
let { type, name, value = true } = node;

var、let、const
map和set map和set是es6新定义的一种数据结构,都可以用forEach和for...of遍历 map类似于字典的一种数据结构，任何类型的数据都可以为键

var map = new Map([['XiaoMing', 99], ['XiaoHong', 66]]);
map.set("XiaoHong",66);
map.get("XiaoHong");
map.has("XiaoHong");
map.delete("XiaoHong")

set集合无重复

let set = new Set([1,2,3,4,5,4,3,2,1])
console.lg(set)  //  Set(5) {1, 2, 3, 4, 5}
set.add(6)  
set.clear()  
set.delete(2)  
set.has(2)

symbol

54、移动端适配方案

viewport（scale=1/dpr）
rem
flex
vm/vh 1、vw：1vw等于视口宽度的1%。 2、vh：1vh等于视口高度的1%。

55、history和hash实现原理

hash路由在地址栏URL上有#
hash路由支持低版本的浏览器，而history路由是HTML5新增的API
hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能
history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404
解决报错需要nginx配置

location / { 
  try_files $uri $uri/ /index.html; 
}

56、new一个函数，都会发生什么？

创建一个新对象；
将构造函数的作用域赋给新对象；
执行构造函数中的代码
返回新对象

57、实现new方法

function _new(fn, ...arg) { 
  const obj = Object.create(fn.prototype); 
  const result = fn.apply(obj, arg); 
  return result instanceof Object ? result : obj;
}
function Student(name){
  this.name = name
}
let obj = new Student('sgr')
console.log(obj)
let student = _new(Student, 'sgr')
console.log(student)

58、vue双向绑定

let obj = {}
let val = ''
Object.defineProperty(obj, 'name', {
  get(){
    console.log('get')
    return val
  },
  set(newValue){
    console.log('set')
    val = newValue
    document.getElementById('input').value=val
    return val
  }
})
obj.name
obj.name = 22 
function change(){
  val = document.getElementById('input').value
  console.log(val)
}

59、同源

相同协议、域名、端口

60、跨域

JSONP跨域客户端和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入

function dosomething(response){
    console.log('The responsed data is: '+response.data);
    //处理获得的Json数据
}
<script src="http://www.example.com/data/?callback=dosomething"></script>

window.name+iframe来进行跨域 window的name属性特征：name 值在不同的页面（甚至不同域名）加载后依旧存在，所以可以通过iframe标签将数据页面加载到当前页面获取，数据页面的window.name

<script>
  function getData(){
    //iframe载入data.html页面会执行此函数
    var ifr = document.getElementById("iframe");
    ifr.onload = function(){
      //这个时候iframe和a.html已经处于同一源，可以互相访问
      var data = ifr.contentWindow.name;
      //获取iframe中的window.name，也就是data.html中给它设置的数据
      alert(data);
    }
      ifr.src = 'b.html';//这里的b.html为随便一个页面，只要与a.html同源就行，目的是让a.html能够访问到iframe中的东西，否则访问不到
  }
</script>
<iframe id = "iframe" src = "cnblogs.com/data.html" style = "display:none" onload = "getData()"></iframe>

通过document.domain+iframe来跨子域不设置主域是访问不到的

// a.html
<iframe src = "http://script.a.com/dir/b.html" id="iframe" onload = "loLoad()"></iframe>
<script>
  document.domain = "a.com";//设置成主域
  function loLoad(){
    var iframe = document.getElementById("iframe"); 
    var win = iframe.contentWindow;
    //在这里就可以操作b.html
    var doc = win.document;//这里获取iframe中的document对象
    var name = win.name;//这里获取window对象的name属性
  }
</script>
// b.html
<script>
  document.domain = "a.com";
</script>

cors跨域服务器在响应的header中设置Access-Control-Allow-origin为*，即可允许所有域名的跨域访问。