更新：myprogress到目前为止

Question

我有这个小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>

现在我想改进它，以便您可以通过提供回调函数来控制文本的插入位置：

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

（请记住这只是示例代码。我想学习一种技巧而不是解决问题。）

我可以将jQuery方法作为参数传递，并在链中间的插件中使用它吗？如果是这样，语法是什么？如果没有，推荐的替代方案是什么？

更新：myprogress到目前为止

<!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!",
            insertionCallback: $.append
            }, options
        );

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

        return this;
    };
})(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>
</head>
<body>

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

</body>
</html>

Answer 1

当然可以，JavaScript非常有活力：

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

您可以将您在options对象中传递的jQuery函数替换为this.prepend()的本机调用作为参数。

由于大多数jQuery方法都在当前的元素集（插件中的this对象）上运行，因此您需要使用apply或call来使其正常工作。这样，您可以使用当前options.insertionCallback对象作为其上下文调用this函数。

类似的东西：

    options.insertionCallback.call(this, // pass the current context to the jQuery function
        $("<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

Answer 2

像这样扩展它：

(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);

我真的不明白你的意思

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

为什么要传递jQuery method？它已经在那里，所以你可以在任何jQuery object上调用它。

Answer 3

你也可以做这个字符串，以保持简单，如下所示：

(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"});
});

You can test it here，这样您就可以使用append，prepend，html和text，为您提供一些设置内容的选项。在这种情况下，我们只是利用JavaScript作为动态语言，其中this.prepend(something)等于this["prepend"](something)。

Answer 4

不是您问题的答案，但推荐的风格是：

<script type="text/javascript">

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

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

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

</script>

使用jQuery方法作为回调参数

更新：myprogress到目前为止

4 个答案: