Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery方法作为回调参数

Javascript 使用jQuery方法作为回调参数

javascript jquery jquery-plugins

Javascript 使用jQuery方法作为回调参数,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我有一个小小的jQuery插件： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/

我有一个小小的jQuery插件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
(function($){
    $.fn.foo = function(options){
        var options = $.extend({
            text: "Foo!",
            }, options
        );

        this.prepend(
            $("<span></span>").text(options.text)
        ).css({color: "white", backgroundColor: "black"});

        return this;
    };
})(jQuery);


$(function(){
    $("div").foo().foo({text: "Bar!"}).css({border: "1px solid red"});
});
//--></script>
</head>
<body>

<div>One</div>
<div>Two</div>
<div>Three</div>

</body>
</html>
（请记住，这只是示例代码。我想学习一种技术，而不是解决问题。）

我可以传递一个jQuery方法作为一个参数，并把它放在一个链中间的插件里面吗？如果是，语法是什么？如果没有，建议的替代方案是什么

更新：我目前的进展 

一个
两个
三
当然可以，JavaScript确实是动态的：

    this.prepend(
        $("<span></span>").text(options.text)
    ).css({color: "white", backgroundColor: "black"});
编辑

然而，您不能直接从
$
名称空间访问jQuery方法，您需要一个构造的jQuery对象来访问其方法，或者像Nick Craver指出的那样，只使用
$.fn.functionName

alert($.prepend); // won't alert the function

alert($.fn.prepend); // will alert the function
这样延伸：

(function($){
    $.fn.foo = function(options){
        var options = $.extend({
            text: "Foo!",
            cb: null
            }, options
        );

        if($.isFunction(options.cb)){
           // optimal also pass parameters for that callback
           options.cb.apply(this, []);
        }

        this.prepend(
            $("<span></span>").text(options.text)
        ).css({color: "white", backgroundColor: "black"});

        return this;
    };
})(jQuery);

（函数（$）{
$.fn.foo=函数（选项）{
变量选项=$.extend({
文字：“Foo！”，
cb:null
}，选项
);
if（$.isFunction（options.cb））{
//还可以为该回调传递参数
期权.cb.apply（本，[]）；
}
这是预告(
$（“”）.text（options.text）
).css（{颜色：“白色”，背景颜色：“黑色”}）；
归还这个；
};
})（jQuery）；
我真的不明白你对我的意思

我可以传递一个jQuery方法作为参数，并在链中间的插件中使用它吗？

为什么要传递
jQuery方法
？它已经在那里了，所以您可以在任何
jQuery对象上调用它

您也可以基于字符串执行此操作以保持简单，如下所示：

(function($){
  $.fn.foo = function(options){
    var options = $.extend({
        text: "Foo!",
        insertionCallback: "append"
        }, options
    );
    return this[options.insertionCallback]($("<span></span>").text(options.text))
               .css({color: "white", backgroundColor: "black"});
  };
})(jQuery);

$(function(){
  var optionsFoo = {
    text: "Foo!",
    insertionCallback: "append"
  }
  var optionsBar = {
    text: "Bar!",
    insertionCallback: "prepend"
  }
  $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"});
});​
，这将允许您使用和，并为您提供一些设置内容的选项。在本例中，我们只是利用JavaScript作为一种动态语言，其中
this.prepend（something）
等于
this[“prepend”]（something）
不是对您问题的回答，但推荐的样式是：

<script type="text/javascript">

  //this
  jQuery(function($) {
    //... stuff using the jQuery lib, using the $
  });

  //not this
  $(function() {
    //...
  });

  //or this
  (function($) {
    //...
  })(jQuery);

</script>


//这个
jQuery（函数（$）{
//…使用jQuery库，使用$
});
//不是这个
$（函数（）{
//...
});
//还是这个
（函数（$）{
//...
})（jQuery）；
我的意思是能够在插件内部执行此操作：
this.insertionCallback（$（“”）.text（options.text））.css（{color:“white”，backgroundColor:“black”}）$.fn.prepend
；）在我的示例代码中就是这样：使用
$.fn.prepend
设置选项，使用
insertionCallback.call（this，…）
调用。我理解如果以前的方法更改元素选择，回调执行通常必须启动方法链，但这是一个合理的缺点。Nick的字符串技巧也很巧妙。最后一个是在中描述的“插件代码中的自定义别名”，但我注意到页面代码中的别名，这是我不知道的。对，这是针对页面代码的。插件代码应始终使用最后一个样式示例，而不是第一个样式示例。 
(function($){
  $.fn.foo = function(options){
    var options = $.extend({
        text: "Foo!",
        insertionCallback: "append"
        }, options
    );
    return this[options.insertionCallback]($("<span></span>").text(options.text))
               .css({color: "white", backgroundColor: "black"});
  };
})(jQuery);

$(function(){
  var optionsFoo = {
    text: "Foo!",
    insertionCallback: "append"
  }
  var optionsBar = {
    text: "Bar!",
    insertionCallback: "prepend"
  }
  $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"});
});​

<script type="text/javascript">

  //this
  jQuery(function($) {
    //... stuff using the jQuery lib, using the $
  });

  //not this
  $(function() {
    //...
  });

  //or this
  (function($) {
    //...
  })(jQuery);

</script>