Question

我有一个关于this和jQuery插件

的潜在奇怪问题

据我了解，以下是一个非常基本的jQuery插件：

$.fn.clickclone = function(param){
    return this.click(function(){  
        param.apply(this);  
    });
};

（假装这是一个以某种方式扩展click()的插件。）

因此，如果我将函数作为参数传递，它会执行它需要执行的操作并正确访问this作为DOM节点。容易。

这一点对我来说都很清楚。

目前尚不清楚的是，有什么方法可以将非函数参数传递给插件并让它从参数中正确访问this？即，我可以配置插件做这样的事情：

$("#foo").pluginname(["foo", $(this).text() ]);

这样：

<a href="/bar" id="foo">Bar</a>

它会正确地将数组传递给插件，数组中的第二项返回值Bar？

我这样做，基本上是为我的插件提供语法糖，你可以将数组作为快捷方式传递（除了使用普通的回调函数作为主要功能）。除此之外，我无法使用this。因此我的困境。

编辑：这是邪恶的，但似乎一个解决方法是将参数作为字符串传递，然后eval。 Not 对我来说是一个可行的解决方案，但是，它说明了我希望能够做到的事情：

$.fn.clickclone = function(param){
    return this.click(function(){ 
        if(typeof param === "function"){ 
            param.apply(this);
        }
        else if(typeof param[1] === "string"){
             console.dir("This is evil: " + eval(param[1]));
        }  
    });
};

Answer 1

没有一个函数没有通用的方法，因为在纯粹的数学意义上，你要求输入的函数（即this的函数）：某种依赖于this的东西。

你也许可以用字符串来破解它，但是你失去了函数的灵活性：

$.fn.alertMe = function (methodToAlert) {
    alert(this[methodToAlert]());
};

// usage:
$("#foo").alertMe("text");
$("#foo").alertMe("width");

如果您发现使用可接受的功能但this语法令人困惑，您只需执行以下操作：

$.fn.alertMe = function (alertGetter) {
    alert(alertGetter($(this));
};

// usage:
$("#foo").alertMe(function (x$) { return x$.text(); });
$("#foo").alertMe(function (x$) { return x$.width(); });

_{为了完整起见，我想我应该提到你可能会使用基于eval的解决方案，看起来像$("#foo").alertMe("$(this).text()")，但eval是邪恶的，我会既不写也不宽恕这样的解决方案。编辑：哦，我看到你在原始帖子的编辑中这样做了。好的工作腐蚀了后代;）}

是否可以在jQuery插件的非函数参数参数中访问DOM元素'this'？

1 个答案: