熟悉jquery的同学都知道，它对dom的操作基本都链式调用的写法，这种给人感觉就是很简洁，易懂，而且最大的好处就是避免多次重复使用一个对象变量。  

链式的实现方式：

链式操作是在对象的方法中通过最后返回自身对象（return this），返回的对象就可以继续调用它里面的方法。那么，简单实现一下：

var Obj={
    num: 1,
    fn_a: function(){
        this.num++;
        return this;
    },
    fn_b:function(pram){
    	this.num=this.num*pram;
    	return this;
    },
}
Obj.fn_a().fn_b(5);
console.log(Obj.num);//输出10

上面代码Obj.fn_a().fn_b(5);可以分解为：

//Obj.fn_a().fn_b(5);
var a=Obj.fn_a();
a=a.fn_b(5);
console.log(a.num);//输出10

由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用了。   那么jq是如何实现链式写法的呢？介绍下jq是如何实现链式写法的，例如：

jQuery = function (selector, context) {
    return new jQuery.fn.init(selector, context, rootjQuery);
 },
jQuery.fn = jQuery.prototype = {}
jQuery.fn.init.prototype = jQuery.fn;

可以看出jquery中return了一个实例，init函数里进行了处理初始化操作，比如选择器，拼接字符串等等，最后再将jq的prototype 赋值给init方法的prototype。

改造为工厂模式

通过一个函数，利用它来创建了一个对象，然后返回这个对象。代码如下：

function Obj() {}
Obj.prototype ={//扩展它的prototype
	setNum:function (num) {
		this.num = num;
		return this;
	},
	fn_a:function(){
        this.num++;
        return this;
    },
    fn_b:function(pram){
    	this.num=this.num*pram;
    	return this;
    },
    getNum:function (){
       return this.num;
    },
};
function I() {//工厂函数
	return new Obj();
}
var num=I().setNum(1).fn_a().fn_b(5).getNum();
console.log(num);

Promise异步链式  

Promise的出现其实是作为异步编程的一种解决方案。比传统的解决方案-回调函数和事件-更加合理、强大。 下面就简单讲解一下它的异步链式的写法，例如：

function fn_a(num) {
    return new Promise(function (resolve, reject) {
        if(num!= undefined){
            num=num+1;
            setTimeout(resolve(num), 500);
        }else{//错误
            reject("num未定义");
        }
    });
}
function fn_b(num,parm) {
    return new Promise(function (resolve, reject) {
            num=num*parm;
            setTimeout(resolve(num), 1000);
        
    });
}
fn_a(1).then(num=>{
    return fn_b(num,5);
},error=>{
    console.log(error);
}).then(num=>{
    console.log(num);//在1.5秒回返回10
})

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。  

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/84