怎样用jQuery自定义函数方法，用$可调用

• 2021-01-14
  楼上在装修，电钻交响乐，可真是吵死我了…

一、jQuery自定义函数的几种方法

1. 方法一：$.fn.functionName

最先登场的是百度经验提供的方法，需要绑定某个DOM元素使用

<button id="btn">test</button>
<script>
	//定义方法
	$.fn.myFunc1 = function(param){
		$(this).on('click',function(){
			console.log(param);
		})
	}
	//调用方法
	$("#btn").myFunc1('自定义方法1');
</script>

（1）调用函数
这个方法调用时必须绑定某个DOM元素才能使用，以下调用方法都不能正常使用：

myFunc1('自定义方法1');		//摆错，myFunc1不是一个函数
$.myFunc1('自定义方法1');		//报错，$.myFunc1不是一个函数
$("#btn").myFunc1('自定义方法1');		//不报错，但是也没办法使用，因为他没有激活按钮

如果不想在点击时触发函数，也可以这样写：

$.fn.myFunc1 = function(param){
	console.log(param);
}

$("#btn").myFunc1('自定义方法1');		//在运行到这里就会调用
$("#btn").on('click',function(){		//点击时调用
	$("#btn").myFunc1('自定义方法1');		//注意，哪怕是在调用的内部，前面也要写上绑定的元素
})

（2）绑定多个方法
举一反三，我们可以在鼠标经过和点击时绑定不同的事件：

$.fn.myFunc1 = function(param){
	$(this).on('click',function(){
		console.log('click');
	}),
	$(this).on('mousemove',function(){
		console.log('move');
	})
}
//只需要绑定到 DOM元素上，他会自动调用点击和鼠标经过的方法
$("#btn").myFunc1('自定义方法1');

2. 方法二：$.fn.extend

这个方法与方法一作用相同，只是写法有一点区别：

$.fn.extend({
	'myFunc2':function(param){
		$(this).on('click',function(){
			console.log(param);
		})
	}
})
$("#btn").myFunc2('自定义方法2');

（1）调用函数
调用函数也和方法一一样，可以改成在后面绑定点击事件。

$.fn.extend({
	'myFunc2':function(param){
		console.log(param);
	}
})

$("#btn").on('click',function(){
	$("#btn").myFunc2('自定义方法2');
})

（2）绑定多个事件
这里就是和方法一不同的地方了，我们可以同时定义多个方法：

$.fn.extend({
    'myFunc2':function(param){
    	console.log(param);
    },
    'myFunc3':function(param){
    	console.log(param);
    }
})


$("#btn").on('click',function(){
	$("#btn").myFunc2('自定义方法2');
	$("#btn").myFunc3('自定义方法3');
})

这里也可以结合方法一绑定多个事件，myFunc2 和 myFunc3 内部都还可以绑定 click、mousemove 事件。

主要还是根据不同需求采用。

3. 方法三：$.extend

这个方法和前面两种方法语法上有一些不同：

<button id="btn">test</button>
	
<script>
	$.extend({
	    'myFunc3':function(){
	        console.log("自定义方法3");
	    }
	})
	//直接使用$.functionName就可以调用
	$("#btn").click(function(){
	    $.myFunc3();
	})
</script>

其他的调用方法和定义方法与前两种相同，不重复了。

4. 小结

• 使用 $.fn 定义的函数，在调用时需要绑定 DOM 元素使用，如：
  $("#btn").myFunc(‘自定义方法’);
• 使用 $.extend 定义的函数，调用时直接使用就可以，如：
  $.myFunc();

二、扩展应用

我们可以给自定义方法添加一些参数来快速处理一些事情，比如用来请求 ajax：

<button id="btn">test</button>
<script>
	$.myFunc4 = function(url, data, callback){
		$.post(url, data, callback());
	}
	
	function callbackFunc(){
		console.log("回调函数");
	}
	         
	$("#btn").click(function(){
		$.myFunc4("/ajax/getPostJson",'hello',callbackFunc);
	})
</script>