javascript编程回调---jquery和YUI的简洁之道

最新推荐文章于 2020-06-02 16:31:01 发布

sijidou112

最新推荐文章于 2020-06-02 16:31:01 发布

阅读量469

点赞数

分类专栏： javascript专题

本文链接：https://blog.csdn.net/sijidou112/article/details/33395945

版权

javascript专题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

函数回调的技巧一般用在观察者模式，事件模式中，借助于回调函数，对事件源对象和响应事件对象进行了解耦合。

1、对象和对象之间的交付如果借助于事件模型，会让程序变得很简洁，特别是组件这种粗粒度的对象，

2、在javascript环境中，主要是DOM对象，都是些个粗粒度的组件对象，如按钮，输入框，

3、如果组件之间的交互有简洁的事件模型，那么组件和组件的组合就有了现成的模式，最终我们能形成组件模型

我在前面一个阶段的学习中，主要学习了javascript的基础，了解了他的过去及发展，javascript是面向对象的，他能写出和java一样的事件模型，语法稍微有点差异，他更加的简洁，

下面是例子，模拟了一个对象的鼠标点击事件

<script type="text/javascript">
		function c_test(){
			this.a=null;
			this.b=null;
			this.fa=null;
			this.fb=null;
			this.on = function(eventName,allbackfun){
				this[eventName+"callback"] = allbackfun;
			}; 
			this.click = function(){
				this.clickcallback(this);
			};
			//var clickcallback = null;
		}
		
		var test = new c_test();
		var test2 = new c_test();
		
		test.a="name1";
		test.b=1;
		
		test2.a="name2";
		test2.b=2;
		
		test.fa=function(){
			alert(this.a);
		};
		test.fb=function(){
			alert(this.b);
		};
		
		//test.fb();
		test.on("click",function(e){
			alert(e.a+","+test2.a);  //alert(name1,name2)
		});
		test.click();  //模拟鼠标点击
	
	</script>

好了，这个回调不错，现在我们来一个真的按钮，让按钮单击事件回调函数又来回调我们自己编写的函数，以此来封装按钮，

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>11.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script>
	function Button(buttonId){
			this.DomNode = null;
			this.onxclick = null;
			this.getId = function(){
				return this.DomNode.id;
			};
			this.getName=function(){
				return this.DomNode.name;
			};
			this.init = function(){
				this.DomNode = document.getElementById(buttonId);
				this.DomNode.onclick = this.click;
				this.DomNode.Button = this;
			};
			this.on = function(eventName,callbackfun){
				this["onx"+eventName] = callbackfun;
			}; 
			this.click = function(){
				//注意，这里面的this是document.getElementById(buttonId)
				//alert(this.Button.getId());
				this.Button.onxclick(this.Button);
			};
			
			this.init(buttonId);
		}
	</script>
  </head>
  <body>
   <input type="button" id="testbutton" name="testbutton_name" οnclick="" value="按钮"/>
  </body>
  <script>
		var bt = new Button("testbutton");
		bt.on("click",function(e){
			alert(this.getId());
			alert(e.getId()+","+e.getName());  //alert(testbutton，testbutton_name)
		});
		//点击按钮，会弹出alert(testbutton,testbutton_name);

	</script>
</html>

有了这个回调，我们想法多了去了

1、我们可以把jquery看成是DOM原生节点模型

2、我们进一步提出我们自己的组件模型

3、继承组件模型，依赖于DOM原生模型可以做自定义组件，

4、组件模型和jquery原生模型在结构上一致，也就是使用习惯上保持一致，

5、我们能做出带分页的表格，树状控件，甚至我们可以把资源管理看成是一个大构件了