4

How do I create a prefix like the one jQuery uses? For example, in jQuery I can use:

$(".footer").css('display', 'none');

and I'd like to enable a similar syntax, like this:

google('.footer').chrome('display', 'none');

I have searched Google for an answer, but couldn't find it.

Claudio Santos
  • 1,307
  • 13
  • 22
Iago Bruno
  • 702
  • 1
  • 7
  • 15
  • Maybe you can open the Source Code of jQuery and see how they made it. (Talvez olhando o Código fonte do jQuery você consiga ver como eles fizeram.) – Tony Sep 18 '13 at 01:58
  • You want to rename the JQuery? Or do you want to chain function calls like jQuery? (Voce quer renomear o jquery pra outra coisa, eh isso? Ou vc quer fazer uma funcao que funcione de forma encadeada como o jquery?) – acdcjunior Sep 18 '13 at 02:01
  • Iago, welcome to stack overflow! In this site, you have to ask in English. Hopefully the possible duplicate I linked will help (bem-vindo ao Stack Overflow; aqui você tem de perguntar em inglês. Espero que o link que postei acima te ajude). – bfavaretto Sep 18 '13 at 02:03
  • Also, this will probably interest you (will probably become a real site in the future; for now, it's just a proposal) - http://area51.stackexchange.com/proposals/23539/stack-overflow-in-portuguese – bfavaretto Sep 18 '13 at 02:11
  • so, I wanted to do kind of a api for a website that Foce equal to the prefix of Jquery to avoid complications. but I can not find how to do this. – Iago Bruno Sep 18 '13 at 02:12
  • @bfavaretto yes, I'm new here and did not know that detail, I thought it had more people here in Brazil. – Iago Bruno Sep 18 '13 at 02:14
  • But I do not want to make a plugin for jQuery, but do a prefix like him: `a('#ooo').b('ffff');` – Iago Bruno Sep 18 '13 at 02:17
  • 1
    Sorry, I linked to the wrong post. See http://blog.buymeasoda.com/creating-a-jquery-like-chaining-api/, http://stackoverflow.com/questions/4556110/creating-a-jquery-like-object – bfavaretto Sep 18 '13 at 02:20
  • @bfavaretto Your link is dead. – hsym Feb 21 '23 at 07:46
  • @hsym That comment is too old to be edited. But you can always find dead stuff like that [in the Wayback Machine](https://web.archive.org/web/20130213184346/http://blog.buymeasoda.com/creating-a-jquery-like-chaining-api/). – bfavaretto Feb 27 '23 at 20:30

1 Answers1

7

You have a detailed explanation here

But the right way to implement is show bellow:

var google = function(valor){
    var lalala = '3';

    this.chrome = function(valor){
        console.log(lalala + ' ' + valor);
        return this;
    }

    this.firefox = function(valor){
        console.log(lalala + ' ' + valor);
        return this;
    }

    console.log(valor);

    return this;
};

console.log('first call');
google('testando').chrome('stack');

console.log('second call');
google('testando').chrome('stack').firefox('test');

As you could see the key is to return the object itself on each function.

You could see the live code at jsbin.com

Claudio Santos
  • 1,307
  • 13
  • 22
  • If you make the method return `this`, you can use it like `google('testando').chrome('stack').chrome('overflow');` :-) Note that this is much simpler than what jQuery does, but does enable the syntax the question is asking about. – bfavaretto Sep 18 '13 at 02:26
  • yes, did you remember what's the name of this pattern? – Claudio Santos Sep 18 '13 at 02:28
  • Thanks Claudio Santos, but his example worked, but I guess it did not work for what I wanted to do. Think about this: to change the value of an element:
    Search
    ` var google = function(element){ chrome: function(html){ document.querySelectorAll(element).innerHTML = html; } }`     – Iago Bruno Sep 18 '13 at 02:29
  • @IagoBruno the problem was that chrome() didn't return a string, please see the [upgrade code](http://jsfiddle.net/csantos/Z3kra/1/) – Claudio Santos Sep 18 '13 at 02:37
  • yes, look at my example does not work, so I was doing dear, something that works is the same as jQuery: http://jsfiddle.net/iagob26/DwR2K/1/ – Iago Bruno Sep 18 '13 at 02:48
  • 1
    Look [here](http://jsfiddle.net/csantos/DwR2K/2/) now – Claudio Santos Sep 18 '13 at 03:05
  • 1
    @IagoBruno `querySelectorAll` returns a list of elements, you have to loop: http://jsfiddle.net/TBNQ8/2/ – bfavaretto Sep 18 '13 at 03:10
  • Oh, Thank you bfavaretto and Claudio Santos, that was the result I wanted! ^_^ – Iago Bruno Sep 18 '13 at 17:16
  • one more thing, do you know if this document.querySelectorAll has support for multiple browsers? Or do you think I should use document.getElementsByClassName? – Iago Bruno Sep 18 '13 at 17:24
  • I don't know, but I could bet that you'll have problems, so try to use jquery.(if this answer solve your problem please mark as an answer) – Claudio Santos Sep 18 '13 at 18:15
  • The intention is to not use jQuery, but I will not use querySelector. – Iago Bruno Sep 18 '13 at 23:14
  • 1
    @IagoBruno `querySelectorAll` is supported in IE8+ (partial support reported on IE8). See http://caniuse.com/#search=queryselectorall and https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll. – bfavaretto Sep 19 '13 at 01:21