您的位置：首页 > Web前端 > JQuery

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

2014-06-22 22:16 309 查看

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

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" onclick="" 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、我们能做出带分页的表格，树状控件，甚至我们可以把资源管理看成是一个大构件了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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