使用js-apply-and-call创建一个webtrend函数来消除重复

creating a webtrend function to remove duplication using js apply and call

本文关键字：函数 webtrend 一个 创建 js-apply-and-call 使用      更新时间：2023-09-26

我有一堆webtrend标签要使用dcsMultitrack传递到webtrend服务器，这很简单，但有很多重复的代码，比如说：

1. var args = ["DCSext.name","a", "DCSext.title", "random"]; //etc ...

比选择器

2. $("a", "#main").bind("click", function(){
  do some extra stuff.....
  dcsMultitrack.apply(this, args);
})
***

编辑：

<小时>
$("a", "#main").bind("mouseover", function(){
          do some extra stuff.....
          dcsMultitrack.apply(this, args);
        })
         or maybe 
       $("#main").delegate("mouseover", function(){
          do some extra stuff.....
          dcsMultitrack.apply(this, args);
        })
    etc....

从1号开始，假设我有一些公共参数commonlogs=[];，它将适用于每个选择器和公共参数，但会有额外的参数，我不想重复这些公共日志。此外，我传递的参数值是基于一些dom元素的，比如说我从dom中获取一个值，比如选择器的颜色、玩家的名字等等，所以基本上这必须在同一个上下文中。

case:  $("#selector").bind("click", function(){
          var playername = $(this).parent().text(),
              title = $(this).closest('tr').find(".title").text(); etc etc..
         args = ["DCSext.name", palyername, "DCSext.title", title, etc ];
         dcsMultitrack.apply(this, args);
});

第2版：澄清：

 $("#selector1").bind("change", function(){
       var val1 = someval1, val2= someval2, //etc.
            args = ["DCSext.something", val1, "DCSext.title", val2]; //
       dcsMultitrack(this, args);
    });
    $("#selector2").bind("mouseover", function(){
       var val3 = someval1, val4= someval2, //etc.
            args2 = ["DCSext.something", val3, "DCSext.title", val4]; //
       dcsMultitrack(this, args2);
    });

注意：参数有一些常见的参数，比如var commonargs = ["DCSext.common", one, /*etc*/];

1，2在所有代码中重复，因为值不同，但有没有办法消除所有这些代码的重复？我想提取到一个单独的函数中，只传递选择器和附加值。

此外，另一个问题是：

var context = "#main,#main2";
$(context).delegate("a", "click", function(){
  something ....
 dcsMultitrack.apply(this, args);
});

这非常有效，但我可以传递一个数组而不是字符串作为上下文并提取到函数中吗？

类似的东西

var context = ["#main", "#main2"];

如果需要更多澄清，请告诉我。

您的第一个问题（代码重复）可以通过创建一个函数轻松解决：

function bindClick(target, args) {
    target.bind("click", function(){
        // do some extra stuff.....
        dcsMultitrack.apply(this, args);
    });
}
var args = ["DCSext.name","a", "DCSext.title", "random"]; //etc ...
bindClick($("a", "#main"), args);
var otherArgs = ["other", "args"];
bindClick($("a.other"), otherArgs); 
// etc.

编辑：如果绑定事件的方式因args的不同而不同，则可以创建一个返回另一个function:的function

function createCallback(args) {
    return function() {
        // do some extra stuff...
        dcsMultitrack.apply(this, args);
    };
}

并使用它为.bind():创建回调

var args = ["DCSext.name","a", "DCSext.title", "random"]; //etc ...
var callback = createCallback(args);
target.bind("click", callback);

这是因为创建了一个闭包，以便createCallback返回的匿名函数仍然可以访问args参数，即使在createCallback返回并且其作用域关闭之后也是如此。

<小时>

编辑2:以回答您编辑的问题；你为什么不这么做：

function myCallback() {
     var playername = $(this).parent().text(),
         title = $(this).closest('tr').find(".title").text(),
         // etc, etc..
         args = ["DCSext.name", palyername, "DCSext.title", title, /* etc. */ ];
     dcsMultitrack.apply(this, args);
}

并在绑定到事件时使用此回调：

$("#selector").bind("click", myCallback);
$("#otherSelector").delegate('mouseover', myCallback);

这将很好地工作，因为this将始终指向触发事件的DOM元素。如果你的问题中遗漏了任何其他内容，但根据具体情况有所不同，只需使用一个函数-返回函数（如我所描述的），并将任何变量作为参数传递。

希望这能有所帮助。

<小时>

你的第二个问题更简单。只需使用Array.join():

var context = ["#main", "#main2"];
var contextString = context.join(','); // '#main,#main2'
相关文章：