jquery插件开发

最新推荐文章于 2025-06-14 23:24:10 发布

fangyong2006

最新推荐文章于 2025-06-14 23:24:10 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

分类专栏： FY_jquery_sir 文章标签： jQuery C C++ C# JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/fangyong2006/article/details/83697384

FY_jquery_sir 专栏收录该内容

13 篇文章

订阅专栏

js代码

/*******************************************************************************************************
 * 类级别的插件开发
 * 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
 * 典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。
 * 关于类级别的插件开发可以采用如下几种形式进行扩展：
 *******************************************************************************************************/

//添加一个新的全局函数 
//jQuery.foo = function() { alert('This is a test. This is only a test.');};

//定义多个全局函数
//jQuery.foo = function() { alert('This is a test. This is only a test.');};
//jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".');};  

//使用jQuery.extend(object);
//jQuery.extend({       
//	foo: function() {       
//	alert('This is a test. This is only a test.');       
//	},       
//	bar: function(param) {       
//	alert('This function takes a parameter, which is "' + param +'".');       
//	}      
//	});  

//解决Jquery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
//jQuery.myPlugin = { 
//		foo: function() { alert('This is a test. This is only a test.'); }, 
//		bar: function(param) { alert('This function takes a parameter, which is "' + param + '".'); }
//		};  


/*******************************************************************************************************
 * 对象级别的插件开发
 * jQuery.fn.extend(object)
 *******************************************************************************************************/
//jQuery.fn.extend({
//  check: function() {
//    return this.each(function() { this.checked = true; });
//  },
//  uncheck: function() {
//    return this.each(function() { this.checked = false; });
//  }
//}); 

 (function($) {
 
   $.fn.myPlugin = function() {
	   
   };
 
   $.fn.myPlugin.foo = function(){
	   alert(init('fy'));
	   alert('This is a test. This is only a test.');
   };
   
   $.fn.myPlugin.bar = function(param){
	   alert('This function takes a parameter, which is "' + param + '".');
   };
   
//   $.fn.myPlugin.check = function(){
//	   return $this.each(function() { this.checked = true; });
//   };
   
   // 私有函数
    function init(obj) {
    	return obj;
    }; 
 })(jQuery);

html代码

<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.4.2.js"></script>	
		<script type="text/javascript" src="js/fy.js"></script>
		<script type="text/javascript">
		$(function(){
			//添加一个新的全局函数 
			//jQuery.foo();
			//$.foo();
			
			//定义多个全局函数
			//$.foo();$.bar('baz'); 
			
			//使用jQuery.extend(object);
			//$.foo();$.bar('baz');

			//解决Jquery插件冲突
			//$.myPlugin.foo();
			//$.myPlugin.bar('baz');  

			
			// 对象级别的插件开发
			//$("input[type=checkbox]").check();

			//解决Jquery插件冲突
			//$.fn.myPlugin.foo();
			//$.fn.myPlugin.bar('baz');
		});

		</script>
	</head>
	<body>
	<input type="checkbox">
	</body>
</html>

其他（闭包）

 
 先从闭包特点解释,应该更好理解.

闭包的两个特点：

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.

我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
但是有闭包特性的js函数有点特殊.
就例子来说:
function a(){
 var i=0;
 function b(){
 alert(++i);
 }
 return b;
}
var c = a();
c();

这是个标准的闭包.在函数a中定义了函数b,a又return了b的值.这些可以先不管.
var c = a();
c();
这两句执行很重要.
在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
可是,如果我们再多执行一行.
var c = a();
c();
c();
第一次弹出0，第二次执行却弹出了1.

也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.

a是return过了,但是,a及内部值却依然存在,这就是闭包.

好了,总结下,
1，闭包外层是个函数.
2，闭包内部都有函数.
3，闭包会return内部函数.
4，闭包返回的函数内部不能有return.(因为这样就真的结束了)
5，执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在.

闭包的应用场景(呵呵,复制的参考资料)
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.

另外,还有一种格式颇受争议:
(function(a,b){...})(a,b);
如果你使用过jquery,并且观察过他的代码,你就会很奇怪他的写法,网上有人也把这种格式叫做闭包.

参考资料：http://wenku.baidu.com/view/fd6131d276a20029bd642de5.html