在jQuery中声明函数的5种不同方式

介绍

对于初学者来说，选择一种声明JavaScript函数的方法可能会造成混淆，因为有几种使用JavaScript / jQuery声明函数的方法。 我将尝试解释每个代码的好处，以及在编写出色的jQuery代码时如何以及为什么使用它们。

1.基本的JavaScript功能

这是在JavaScript中声明函数的最简单方法。 例如，我们要编写一个简单的函数multipli（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函数

这是在DOM元素上声明可以像常规jQuery函数一样使用的函数的好方法！ 记住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开发人员都应该知道的东西。

From: https://www.sitepoint.com/5-ways-declare-functions-jquery/