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属于终端块状元素，它下面不能再出现其他块级元素，只能包含内容
不推荐<li>text<p>text</p></li>
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)
