Статьи

5 различных способов объявить функции в jQuery

Январь 9, 2019

Вступление

Выбор способа объявления функции JavaScript может сбивать с толку новичков, поскольку существует несколько различных способов объявления функций с использованием 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! Rememeber jQuery.fn — это просто псевдоним для jQuery.prototype (который просто экономит наше время при кодировании такого jQuery.fn.init.prototype = jQuery.fn = $ .fn как таковой). 

 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 дополнительными функциями или создают собственные функции, которые можно вызывать с использованием пространства имен 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 = 'Danger high voltage!';
		$(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. Функции в пользовательских пространствах имен

Если ваша запись работает в пользовательском пространстве имен, вы должны объявить их таким образом. Дополнительные функции могут быть добавлены в пространство имен, вам просто нужно добавить запятую после каждой (кроме последней!). Если вы не знаете, что такое пространство имен, посмотрите Пространство имен функции jQuery на простом английском 

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

Вывод

Знание того, когда и как объявлять различные типы функций JavaScript / jQuery — это то, что любой хороший разработчик js должен знать наизнанку.

119
Share: