[HTML|JS|CSS] jQuery: Pluginy i rozszerzanie

Na githubie aż roi się od przeróżnych pluginów do jQuery pisanych przez mniej lub bardziej sprawnych programistów. Jak napisać własny plugin ? Przykład poniżej.

(function($){

 $.fn.print = function(props) {
  var functions = $.fn.print.functions;
  if ($.isArray(props)) {
   functions = $.merge(functions, props);
  }
  return this.each(function() {
   var element = $(this);
   functions.forEach(function(fn){
    console.log(fn, ': ', $(element)[fn]());
   });
  });
 };

 $.fn.print.functions= ['height', 'width'];

})(jQuery);

Trick z immediate function to zabezpieczenie na wypadek, gdyby aplikacja używała $ (który jest aliasem dla obiektu jQuery) do innych celów. Pisząc plugin rozszerza się obiekt fn, który jest referencją na prototype obiektu jQuery. Korzystając z faktu, że każda funkcja jest obiektem, możemy załączyć do niej obiekt, który może zostać wykorzystany, jako domyślne ustawienia pluginu.

Plugin wywołujemy na dowolnym selektorze, na przykład:

$(function(){
 $('div').print();
 $('a').print(['size']);
 $('button').print(['html']);
});

Drugi sposób na uzyskanie podobnego efektu, to funkcja extend z jQuery, którą wykorzysujemy do łączenia dwóch obiektów JavaScript w jeden. Wywołanie tej funkcji na $.fn spowoduje rozszerzenie jQuery o naszą funkcję.

(function($){

 $.fn.extend({
  count: function(){
   console.log(this.length);
  }
 });

})(jQuery);

$(function(){
 $('div').count();
});

[HTML|JS|CSS] Sass : Dziedziczenie selektorów

Podczas stylowania kontrolek w CSS, często dodajemy nowe style tylko po to, aby rozszerzyć istniejący styl o jakąś cechę. Twórcy Sass wprowadzili mechanizm dziedziczenia styli, dzięki któremu pisanie hierarchii styli staje się przyjemne i znacznie zmniejsza ilość kodu. Aby dziedziczyć z jednego selektora, w drugim, wystarczy dodać instrukcję @extends i podać nazwę stylu. W przypadku definiowania dwóch tych samych właściwości istnieje zasada podobna jak w przypadku mixinów : zastosowana zostanie ostatnia zdefiniowana wartość.

Czytelny kod Sass:

.btn-base
{
 padding: 10px 10px 10px 10px;
 &:hover{
  background-color : #FFFFFF;
 };
}

.yellow-btn
{
 @extend .btn-base;
 padding-top: 20px;
 background-color : #FFFF00;
}

...zostanie przetłumaczona do CSS w następujący sposób:

.btn-base, .yellow-btn {
  padding: 10px 10px 10px 10px; }
  .btn-base:hover, .yellow-btn:hover {
    background-color: #FFFFFF; }

.yellow-btn {
  padding-top: 20px;
  background-color: #FFFF00; }

Zwiększenie czytelności i utrzymymwalności kodu nie podlega wątpliwości.