Как создать несколько функций JQuery

Question

Я пишу код, и заметил, что JQuery имеет очень прохладную особенность

Например:

$(selector).addClass('').on('').on ('').remove(); 

Я могу сделать это 2.

func(...).func2(''); 

хотел знать, как это сделать (я думаю, я не объяснил правильно).

У этого парня также есть эталон. http://benchmarkjs.com/

Если бы кто-то мог мне помочь, было бы здорово! Спасибо заранее

Answer 1

Просто возвратите себя в каждой функции:

YourClass.prototype.a = function() { 
    // do a stuff 
    return this; 
}; 
YourClass.prototype.a = function() { 
    // do b stuff 
    return this; 
}; 

new YourClass().a().b(); 

In the comments, вы сказали:

В JQuery, если я прошу HTML (. $() HTML()) это возвращает поток и до сих пор работает

ну, это легко, как хорошо:

YourClass.prototype.html = function(val) { 
    if (val === undefined) { 
     // return the html 
    } else { 
     // set the html to val 
     return this; 
    } 
} 

Answer 2

Ключ всегда возвращает объект (чтение контекста) для каждого метода. Самый простой пример:

var lib = { 
    a: function() { 
    //... 
    return this; 
    }, 
    b: function() { 
    //... 
    return this; 
    } 
}; 

И использовать его как:

lib.a().b(); 

Но так как это такая обычная вещь, чтобы сделать, подход к беглому интерфейсу является fluent декоратором:

// A fluent function decorator: 
// Takes a function and returns a function that returns `this` 
var fluent = function(f) { 
    return function() { 
    f.apply(this, arguments); 
    return this; 
    }; 
}; 

var lib = { 
    a: fluent(function() { 
    //... 
    }), 
    b: fluent(function() { 
    //... 
    }) 
}; 

lib.a().b(); 

Другой подход с prototypes, используя тот же хелпер:

function Lib() {} // constructor 
Lib.prototype.a = fluent(function() { 
    //... 
}); 
Lib.prototype.b = fluent(function() { 
    //... 
}); 

new Lib().a().b(); 

Декоратор fluent дает вам ключ сразу же в начале функции, вместо того, чтобы отслеживать возвращаемое значение функции.