5 способов определить функцию в JQuery

Введение

Выбор того, как определить JavaScript функцию может быть немножко сложновато для тех, кто только начал изучать jQuery,
так как сувществует несколько разных путей определения функий в JavaScript/jQuery. Я попробую обьяснить
плюсы каждого способа, а так же как и почему вы можете использовать этот способ при написании jQuery кода.

1. Как функция JavaScript

Это самый простой способ определения функции в JavaScript. К примеру, мы хотим написать простую функцию умножения, назовем ее multiply(x,y), которая
будет принимать два параметра x и y. Эта функция функция будет умножать x на y и возвращать значение. Вот пример реализации этой функции.


function multiply(x,y) {
     return (x * y);
}

console.log(multiply(2,2));
//output: 4

Если вы хотите просто протестировать что-то, тогда этот способ может подойти вам. Это не особо хороший способ написания кода
и не всегда хорош для написания кода для повторного использования.

2. JavaScript функции для установки или получения

Если вам нужна утилита для установки, получения, удаления значений модели, тогда вы можете определить функцию как переменную
как в нашем следующем примере. Этот способ буде полезен для присвоения значения при обявлении, которое общитывается определенной функцией.


var multiply = function(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4
 
//The same function but with a self execution to set the value of the variable:
var multiply = function(x,y) {
     return (x * y);
}(2,2);
console.log(multiply);
//output: 4

3. Написание собственной jQuery функции

Это крутой способ для определения функций, которые могут быть использованы как обыкновенные jQuery функции,
на ваших элементах DOM! Помните jQuery.fn - это только псевдоним для jQuery.prototype (которая только сохраняет нам время
когда мы пишем код такой как jQuery.fn.init.prototype = jQuery.fn = $.fn as such).


jQuery.fn.extend({
    zigzag: function () {
        var text = $(this).text();
        var zigzagText = '';
        var toggle = true; //lower/uppper toggle
            $.each(text, function(i, nome) {
                zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
                toggle = (toggle) ? false : true;
            });
    return zigzagText;
    }
});
 
console.log($('#tagline').zigzag());
//output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs & cOdE SnIpPeTs.
 
//chained example
console.log($('#tagline').zigzag().toLowerCase());
//output: #1 jquery blog for your daily news, plugins, tuts/tips & code snippets.

Не забывайте возвращать элементы, чтобы не утерять цепочку jQuery функций.

4. Расширить существующие jQuery функции

(или же дополнить существующие jQuery функции какими-то фичами). В этом примере функция $.fn.each будет модефицирована.


(function($){
 
// maintain a to the existing function
var oldEachFn = $.fn.each;
 
$.fn.each = function() {
 
    // original behavior - use function.apply to preserve context
    var ret = oldEachFn.apply(this, arguments);
     
    // add custom behaviour
    try {
        // change background colour
        $(this).css({'background-color':'orange'});
         
        // add a message
        var msg = '<span style="float:left;font-size:24px;font-weight:bold">Danger high voltage!</span>';
        $(this).prepend(msg);
    }
    catch(e) 
    {
        console.log(e);
    }
     
    // preserve return value (probably the jQuery object...)
    return ret;
}
 
// run the $.fn.each function as normal
$('p').each(function(i,v)
{
    console.log(i,v);
});
//output: all paragrahs on page now appear with orange background and high voltage!
 
})(jQuery);

5. Функции с собственным пространством имен

Вы можете добавить функции с собственным пространством имен следующим образом.


CUSTOM = {
    multiply: function(x,y) {
        return (x * y);
    }
}
//function call
CUSTOM.multiply(2,2);

Заключение

Знать как и каким образом определать JavaScript/jQuery функции это, несомненно, то, что нужно знать любому хорошому js программисту.

Тема: 
LikeMe: