js 链式操作函数方法
1614 0 0 0
发布时间:2019年12月05日

概述

对于链式操作常见的有后台thinkphp的数据库查询操作,前台一下插件封装等会时不时用链式来操作,最常见的,是jQuery直接返回this的方式

先理解下最简单的链式调用法

我们可以用简单的构建对象的方法来实现

let Obj = {
    a: 0,
    add: function(){
        this.a += 1;
        return this
    }
}
Obj.add().add();
console.log(Obj.a);    //2

这个只是最简单的实现链式调用的方法

实现Obj.add(1).add(2).add(3) // 6

let Obj = {
    a: 0,
    add: function(b){
        this.a = b+this.a;
        return this
    }
}
Obj.add(1).add(2).add(3);
console.log(Obj.a);    //6
return this 是链式调用的核心

多个方法的链式调用

function Dog(){
    this.run= function(){
        alert("The dog is running….");
        return this;//返回当前对象 Dog
    };
    this.eat= function(){
        alert("After running the dog is eatting….");
        return this;//返回当前对象 Dog
    };
    this.sleep= function(){
        alert("After eatting the dog is running….");
        return this;//返回当前对象 Dog
    };
}

//一般的调用方式;

var dog1 =new Dog();
dog1.run();
dog1.eat();
dog1.sleep();
var dog2 = new Dog();
dog2.run().eat().sleep();

要实现链式访问,关键是对象属性内嵌函数要返回一个对象,比如this当前对象,要链式访问的函数都作为该对象的属性绑定到其上,这样就可以通过点子运算符访问这个函数了。

要实现回调函数,关键是要将回调函数作为参数传进程序,程序内部需要运行该函数,如需传递参数,就在该函数内使用参数,这样回调的时候就可以取回单数。比如此处的回调函数是f,回调函数f内的参数为this,这样回调时function(data)里的data就相当于回调函数内的this。

function test(x,y){
    this.w=x;
    this.v=y;
    c=w+v;
    this.c=c;
    this.done=function(f){
        if(c>0){
            console.log("done c:"+c);
            f(this);
        }
        return this;
    }
    this.fail=function(f){
        if(c<=0){
            console.log("fail c:"+c);
            f(this);
        }
        return this;
    }
    return this;
}
test(3,-100).done(function(data){alert(data.c)}).fail(function(data){alert(data.v)});
评论专区