JavaScript & jQuery: kaskadowe łączenie wywołań (ang. method chaining)

PBS — Thu, 13 Mar 2014 12:52:17 +0000

Aby moc kaskadowo łączyć wykonywanie funkcji (ang. method chaining), musisz się upewnić ze Twoje metody zwracają obiekt/instancje.

Dla przykładu w vanilla JavaScript może to wyglądać następująco:

js.js

var value = 0;
var obj = {
    increase: function(val) {
        value = value + val;
        return obj;
    },
    decrease: function(val) {
        value = value - val;
        return obj;
    }
}
obj.increase(5).increase(2).decrease(1);
console.log(value); // 6

W jQuery chcemy zwrócić "this" - jsFiddle demo:

jquery.js

$.fn.redBorder = function () {
    $(this).css("border", "1px solid red");
    return this;
    
    //  or shorter "return $(this).css("border", "1px solid red");"
    
};

$.fn.greyBackground = function () {
    return $(this).css("background-color", "grey");
};

$.fn.innTxt = function (txt) {
    return $(this).html(txt);

};


$('#main').redBorder().greyBackground().innTxt("testing chaining");

The post JavaScript & jQuery: kaskadowe łączenie wywołań (ang. method chaining) appeared first on JavaScript, NodeJS, AngularJS & WordPress.

jquery chaining Archives - JavaScript, NodeJS, AngularJS & WordPress

JavaScript & jQuery: kaskadowe łączenie wywołań (ang. method chaining)