头条面经

1.document.getElementByClassName实现

document.getElementsByClassName=function(className){
    let all=document.all;
    return Array.prototype.filter.call(all,(item)=>{
        return item.classList.contains(className);
    });
}

2.bind函数实现

Function.prototype.bind=function(obj,...arg){
    let self=this;
    let res=function(...newArg){
        var total=arg.concat(newArg);
        self.apply(obj,total);
    };
    res.prototype=Object.create(self.prototype);
    return res;
}

3.双向绑定实现

let data={
    name: 'jc'
};
let nameEle=document.getElementById('name');
nameEle.value=data.name;
nameEle.addEventListener('input',function(){
    data.name=this.value;
    console.log(this.value);
});
Object.defineProperty(data,'name',{
    set: function(newValue){
        nameEle.value=newValue;
        return newValue;
    }
});

4.标签问题

• p里面能放ul吗
  不能，因为li为结构化块状元素，它让文档形成结构，既能包含内容，也能包含其他块级元素，p属于终端块状元素，它下面不能再出现其他块级元素，只能包含内容
  不推荐
• text

  text

5.兼容处理透明度

• 使用autoprefix加上浏览器前缀
• IE下使用filter滤镜

.opacity{
  filter: alpha(opacity=50);   //支持IE
  opacity: 0.5;
}

6.浮点数及其运算

有些小数表示位数是无穷的，无法避免的精度丢失
解决方法是

• 在判断结果前对计算结果进行精度缩小，精度缩小的过程中会自动四舍五入
• 在计算前，计算其小数位数，将其转化为整数后进行计算，再将计算结果还原为小数

7.清除浮动原理

• 设置display: table防止容器和子元素垂直外边距合并，这样和zoom1效果一致
• IE6/7下触发重布局实现清除浮动

8.元素居中的另类方法

.outer{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #000;
    }

    .inner{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #fff;
    }

9.offsetWidth/clientWidth/scrollWidth

• offsetWidth 返回值包含content+padding+border，效果与getBoundingClientRect相同
• clientWidth 只包含content+padding，如果有滚动条，也不包含滚动条
• scrollWidth 只包含content+padding+溢出内容尺寸

10.readyState取值

• 0 对象已创建
• 1 open成功调用，这个状态下，可以设置请求头部，或使用send发送请求
• 2 调用send方法，但尚未接收到响应
• 3 已经接收到部分响应数据
• 4 已接收到全部响应数据

11.不冒泡事件

• focus和blur不冒泡，focusin和focusout冒泡
• load不冒泡
• mouseover和mouseout冒泡，mouseenter和mouseleave不冒泡

12.在CORS中发送cookie

• 在响应报文中的Access-Control-Allow-Credentials头部设置为true，服务器许可在请求中携带cookie
• Access-Control-Expose-Headers 客户端可以访问的响应报文头部
• 另一方面，浏览器需要设置withCredentials属性为true
• 如果要发送cookie，Access-Control-Allow-Origin不能设置星号，必须指定明确的与请求网页一致的域名

13.简单请求和非简单请求

13.1 简单请求

• 请求方法
  • HEAD
  • GET
  • POST
• 头部信息不超出以下字段
  • Accept
  • Accept-Language
• Content-Type 只限于标准三个值
  对于简单请求，浏览器直接发出CORS请求，在请求头部添加一个Origin字段

13.2 非简单请求

请求方法是PUT或DELETE，或者Content-Type字段类型是application/json
对于非简单请求，在正式通信之前，会增加一次HTTP查询OPTIONS请求，表明自己的来源

• HEAD请求可以用于测试超链接的有效性

13.3 void运算符

对任何返回都返回undefined，如void(0)