深入探讨jQuery方法封装与应用-优快云博客

本文详细介绍了如何在jQuery中实现方法封装，包括类级扩展、对象方法扩展及页面调用实例，并解决多级代码整合时可能产生的冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当重复使用某个方法时，你就会想要封装这些代码，即使在客户端编写js或者jquery脚本也不另外。恰巧在项目中使用到了jquery对于方法封装的好处，非常灵活。

1.类级扩展-全局方法

//自定义全局函数1 未用命名空間
 jQuery.extend({
   sum:function(a,b){return a+b;}
 });
 // 自定义全局函数2
 jQuery.foo=function(j){
 	alert(j);
 }
 //自定义全局函数1 用命名空間
 jQuery.myPlugin={
 	foo:function(j){
 		alert(j);
 	}	
 }

2.对象方法的扩展

(function($){
 	//形式1
 	$.fn.extend({
 		add:function(j){
 			alert(j);
 		}
 	});
 	//形式2
 	$.fn.foo=function(j){
 		alert(j);
 	}
 })(jQuery);

ps：上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

3.页面调用

<body>
 	<a href="#" id="a">click</a>
 </body>
 <script type="text/javascript">
 	$("#a").click(function(){
 		$("#a").add(2);
 		$("#a").foo(3);
 		$.foo("foo1");
 		$.myPlugin.foo("foo2");
 		return false;
 	});
 </script>

ps：这里也遇到一个不解，当类级别的代码和对象级别的代码放在同一个js文件中时，会产生错误，分开则表示正常。