Agora que vimos como usar os plug-ins jQuery, vale a pena entender como criá-los também. Já mencionamos brevemente o fato de que você pode estender o objeto jQuery nativo se quiser. Assim como:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Mas isso não é particularmente útil por si só. Para criar um novo método para jQuery que você possa chamar em um conjunto de elementos, você precisará fazer assim:
$.fn.myMethod = function() ( // I'm a new method ));Isso é exatamente a mesma coisa que usar .prototype no jQuery e, para os curiosos, você pode ler mais sobre isso aqui. Fazer dessa forma significa que seremos capazes de usar esse novo método em um conjunto de elementos. Gostar:
$("li").myMethod();Você pode fazer o que quiser ao lado desse método, mas para ser um bom cidadão na construção de plug-ins jQuery, você deve retornar o mesmo conjunto de elementos do plug-in.
$.fn.myMethod = function() ( // Do some stuff return this; ));Assim funcionará com encadeamento. Se você não fizer isso, e alguém tentar algo como:
$ (“Li”). MyMethod (). Show ();
Isso iria falhar, porque .show()não seria chamado essencialmente de nada. Freqüentemente, os plug-ins jQuery são projetados para fazer um loop sobre cada elemento, de modo que você tenha acesso direto a cada elemento individual no conjunto para fazer o que for necessário.
Outra coisa de bom cidadão a fazer é envolver um plugin em uma expressão de função invocada imediatamente e passar jQuery como um parâmetro para ele. Dessa forma, você pode usar o $ dentro do código do plugin com mais segurança. Isso ocorre porque em algumas situações a abreviação $ para jQuery não está disponível (por exemplo, um usuário usou jQuery em “modo de compatibilidade”).
Com essas duas últimas coisas no lugar, uma estrutura de plug-in torna-se:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)No screencast acabamos construindo um plugin simples para adicionar uma seta ao final de qualquer elemento.
Veja a Pen rwasH de Chris Coyier (@chriscoyier) no CodePen
Claro, isso pode ficar mais complexo à medida que sua ambição de fazer mais aumenta.