web-dev-qa-db-ja.com

Coffeescriptでjqueryプラグインを書く-「（function（$）」と「（jQuery）」を取得する方法は？

私はcoffeescriptでjqueryプラグインを書いていますが、関数ラッパー部分を正しく取得する方法がわかりません。

私のコーヒースクリプトはこれで始まります：

$.fn.extend({
    myplugin: ->
        @each ->

これは、関数ラッパーを使用してJavaScriptを作成します。

(function() {
  $.fn.extend({
      myplugin: function() {
          return this.each(function() {

しかし、私は次のように「$」を渡してほしい：

(function($) {
  $.fn.extend({

エンディングについても同様です...特にcoffeescriptには何もありません。
これはJavaScriptで取得します。

})();

しかし、これが欲しい：

})(jQuery);

誰かがcoffeescriptコンパイラでこれを達成する方法を知っていますか？または、これをcoffeescript内で実行するための最良の方法は何ですか？

javascriptjquerycoffeescript
36
PandaWood

答えは、CoffeeScriptでそのように呼び出す必要はないということです。スクリプトはすでにクロージャで安全にラップされているため、jQuery-passed-in-as-a-parameter-tricksは必要ありません。書くだけ：

$ = jQuery

...スクリプトの上部にあり、準備は完了です。

54
jashkenas

コンパイラで--bareフラグを使用していない限り、

$ = jQuery

解決策が最適です。 areの場合、新しいdoキーワードを使用すると、次のように記述できます。

do ($ = jQuery) ->
   # plugin code...

したがって、括弧の混乱を避けながら、目的のスコープを作成します。

19
Trevor Burnham

PDATE/EDIT：はい、ジェレミーの説明によると：

_$ = jQuery

$.fn.myPlugin = () ->
  console.log('test fired')
_

コンパイル先：

_(function() {
  var $;
  $ = jQuery;
  $.fn.myPlugin = function() {
    return console.log('test fired');
  };
}).call(this);
_

これはjQueryプラグインとして問題なく機能します：$('body').myPlugin();

オリジナル：

さて、私はこれに近づくかもしれないと思います、それが助けになるかどうか私に知らせてください。

_(($) ->
  $.fn.extend =
    myplugin: ->
    @each: ->
)(jQuery)
_

レンダリング先：

_(function() {
  (function($) {
    return $.fn.extend = {
      myplugin: function() {},
      this.each: function() {}
    };
  })(jQuery);
}).call(this);
_
6
Darren Newton

最も簡単な方法は、拡張することです$ .fnオブジェクト

単純なjQueryプラグインは、CoffeeScriptで次のように記述できます。

$.extend $.fn,

  disable: ->
    @each ->
      e = $(this)
      e.attr("disabled", "disabled") if e.is("button") or e.is("input")

コンパイルされます

(function() {
  $.extend($.fn, {
    disable: function() {
      return this.each(function() {
        var e;
        e = $(this);
        if (e.is("button") || e.is("input")) {
          return e.attr("disabled", "disabled");
        }
      });
    }
  });
}).call(this);
3
Tomasz Mazur

この投稿は古いですが、私はそれが役に立つと思いました。これが私のために働くコーヒースクリプトコードです。

$ -> 
    $('.my-class').hello()

$.fn.hello=-> 
    @each -> 
        $(@).append $ '<div>Hello</div>'

注：$変数を宣言する必要はありません。箱から出してすぐに使用できます。

2
biofractal

JQueryボイラープレートのCoffeeScriptバージョンを確認する必要があります〜 https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

2
Zeno Rocha

クロージャーを自分で追加し、--bareフラグを使用してコンパイルするだけです。

coffee -w -c --bare jquery.plugin.coffee

(($) ->
  # some code here
)(jQuery)
1
neojp

シンプルでわかりやすい

JQueryオブジェクトに独自のメソッドcleanFadeInを追加するために必要なのは、これだけです。チェーン用のオブジェクトも返します。

$.fn.extend
  cleanFadeIn: ->                     # $('.notice').cleanFadeIn
    return $(@).each ->               # returns the objects for easy chaining.
      $(@).slideDown 'slow', ->
        $(@).fadeTo 'slow', 1
0
Joshua Pinter