javascript 链式写法,如何实现js方法的链式调用

时间: 2017-11-10阅读: 5391标签: 链式

熟悉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
})

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

 

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/84

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全