jq中链式语法实现原理
用过jq的都会对jq的链式语法,都会感觉到一个字爽,其实在jq的链式语法实现原理很简单,就是在jq的原型链中每个方法都使用return this;在返回当前的原型方法,也就是说链式语法使用的是前一个方法的回调对象;原理说完了直接上代码。
var My = function(){ }
My.prototype = {
css:function(){
console.log("设置css样式");
return this;
},
show:function(){
console.log("将元素显示");
return this;
},
hide:function(){
console.log("将元素隐藏");
}
};
//调用构造函数
var my = new My();
//使用简单的链式调用
my.css().css().show().hide();
看完代码是不是有点拨开云雾的感觉呀
现在是es6的显神威的时候,es6提供了一个then语法;在这里先要感谢一下阮一峰老师,让我这样的英语菜鸡也能看懂最新的js技术
promise的回调和then,catch方法
先上代码如何看不懂在解释
//创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
var getUserInfo=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在异步操作成功时调用
}else{
reject(data.ErrMsg);//在异步操作失败时调用
}
}
});
})
//另一个ajax Promise对象,
var getDataList=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在异步操作成功时调用
}else{
reject(data.ErrMsg);//在异步操作失败时调用
}
}
});
})
//Promise的方法then,catch方法
getUserInfo.then(function(ResultJson){
//通过拿到的数据渲染页面
}).catch(function(ErrMsg){
//获取数据失败时的处理逻辑
})
//Promise的all方法,等数组中的所有promise对象都完成执行
Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
//这里写等这两个ajax都成功返回数据才执行的业务逻辑
})
promise方法有两个结果的回调---- resolve是成功时候的回调 — reject是失败时候的回调 当然在使用前也是必须先声明构造函数的—
他提供了一个方法一个是.then作为执行完上一个任务要执行的任务,catch作为上一个任务失败执行的任务