Сада када смо погледали употребу јКуери додатака, апсолутно је вредно разумевања како их такође направити. Већ смо се на кратко дотакли чињенице да можете проширити изворни јКуери објекат ако желите. Баш као:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();
Али то само по себи није посебно корисно. Да бисте креирали нову методу за јКуери коју можете позвати на скупу елемената, мораћете то да урадите овако:
$.fn.myMethod = function() ( // I'm a new method ));
Ово је потпуно иста ствар као и коришћење .прототипе на јКуери-у, а за знатижељнике, више о томе можете прочитати овде. Чинећи то на тај начин значи да ћемо моћи да користимо ту нову методу на скупу елемената. Као:
$("li").myMethod();
Можете да радите шта год желите у оквиру те методе, али да бисте били врста доброг грађанина градње додатка за јКуери, требало би да вратите исти скуп елемената назад из додатка.
$.fn.myMethod = function() ( // Do some stuff return this; ));
На тај начин ће функционисати са уланчавањем. Ако то не учините, а неко је покушао нешто попут:
$ („Ли“). МиМетход (). Схов ();
То би пропало, јер .show()
се у основи не би ни на шта позивало. Често су додаци јКуери обликовани да врте петљу преко сваког елемента тако да имате директан приступ сваком појединачном елементу у скупу да бисте урадили како треба.
Још једна добра ствар коју треба да урадите је да омотате додатак у израз који се одмах позива и да му проследите јКуери као параметар. На тај начин можете сигурније да користите $ унутар вашег кода додатка. То је зато што је у неким ситуацијама скраћеница $ за јКуери недоступна (нпр. Корисник је користио јКуери у „режиму компатибилности“).
Са обе последње две ствари на месту, структура додатка постаје:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)
У сцреенцаст-у смо на крају направили једноставан додатак за додавање стрелице на крај било ког елемента.
Погледајте Пен рвасХ Цхрис Цоииер-а (@цхрисцоииер) на ЦодеПен-у
Наравно, може постати сложеније како ваша амбиција да учините више расте.