用外壳包装法给javascript中的触发器传递参数

用外壳包装法给javascript中的触发器传递参数

引用地址: http://callof.net/Site/pView.Asp?id=1270

在一个结构良好的网页中，不仅要做到结构和表现的分离，而且应该做到结构和逻辑的分离。这里的逻辑通常就是指在页面中使用的js脚本，比如：

function toggleDl(){
 //statement
}
var dl=document.getElementById("commentsList");
dl.onclick=toggleDl; 

这就是一个结构分离的例子，它没有把onclick直接插入到html代码当中，而是通过dom模型取到这个结点然后加入语句来实现触发点击事件的功能。在这段代码中，onclick是一个事件句柄，它的值应该是一个函数体，当点击时会运行这个函数体。所以上面的语句不能够写成:

dl.onclick=toggleDl();

或者：

dl.onclick="toggleDl()";

前者把toggleDl()这个函数的返回值赋给了dl.onclick，后者把一个字符串赋给了dl.onclick，这都不是我们所要的。从这段代码可以看出，要想给一个触发器传递带参数的函数，是做不到的，而且在很多文章中，说到web页面的结构和逻辑页面分离，就会提到只对不需要参数的函数有效。要说参数，实际上还是有一个的，就是this指针，函数体内可以使用this来表示调用它的对象。但在我设计这个blog的过程中，却遇到了不得不传递参数过去的场合，即：右边的blog列表都是通过XmlHttp从服务器取得的，取到的是一个xml文档，然后即时解析成xhtml文档显示出来。这时候，查看评论和发表评论两个按钮必须要绑定点击事件，并且这个事件函数还必须传递日志id为参数。直接写入标记属性是不行的，只能借助触发器来实现。但触发器赋值又不能有参数，这个问题想了很久，终于功夫不负有心人，给我搞定了。解决办法是这样的：
由：dl.onclick=toggleDl(); 这样的语句想到，实际上dl.onclick的值是toggleDl()这个函数的返回值，即toggleDl()已经运行。那么，为什么不返回一个函数给dl.onclick呢？在返回的函数里面使用外壳函数传递进来的参数就好了。想到这里，小兴奋的试了一下，果然可行，代码如下：

function toggleDl(test){
 return function(){
  alert(test);
  //……
 } }
事件操作的逻辑放在被返回的那个函数体中执行，而参数则是在包装它的函数中传递，在这个例子中就是test作为参数。而绑定事件的语句就可以写成如下的样子：
dl.onclick=toggleDl(12);//这样就把alert(test)这个函数作为返回值了 返回的是alert(12);
//dl.onclick=toggleDl();这个函数的返回值赋给了dl.onclick

这样dl被点击时就会正确的传递参数了。
再如:

function beginAdding(a)
{    a *= 5;  
 return function finishAdding(b){ alert(a+b); }
 }
 var add = beginAdding(10);//finishAdding(b){alert(a+b);}
 
 add(20);