- 手写数据双向绑定,vue实现双向绑定的原理就是Object.defineProperty,重写其中的get,set方法
<input id=txt />
<p id="show-txt"></p>
var obj={};
Object.defineProperty(obj,'txt',function(){
get:function(){
return obj;
}
set:function(newValue){
document.getElementById("#txt").value=newValue;
document.getElementById("#show-txt").innerHTML=newValue;
}
});
document.addEventListener("keyup",function(e){
obj.txt=e.target.value;
});
- 手写一个原生ajax
首先分析一下创建ajax的过程
1.创建一个XMLHttpRequest对象
2.创建一个http请求,并指定请求的方法,URL
3.构造响应请求状态的函数
4.发送这个请求
5.获取异步调用回来的数据
6.通过js等将数据展现出来
var xhr=null;
if(window.XMLHttpRequest){
xhr=new xmlHttpRequest();
}
else if(window.ActiveXObject){
xhr=new ActiveXObject("Micosoft.XMLHTTP");
}
else{
xhr=null:
}
if(xhr){
xhr.open("GET",url);
xhr.onreadyStatechange=function(){
if(xhr.readystate==4&&xhr.status==200){
console.log(xhr.data):
}
xhr=null;
};
xhr.send();
}
- 手写一个深拷贝,深拷贝存在的原因:使用浅拷贝,若有引用类型的值,就容易导致错误
function deepClone(obj){
var newobj=obj.instanceof Array?[]:{};
if(typeof obj!=="object"){
return obj;
}
else{
for(var i in obj){
newobj[i]=obj[i].typeof obj[i]=="object"?deepClone(obj[i]):obj[i];
}
}
return newobj;
}
类似的还有手写bind、promise。