1

How to Create a Basic Pluginには、 $Alias の保護とスコープの追加というタイトルのセクションがあります。

$ 変数は JavaScript ライブラリの中で非常に人気があり、jQuery で別のライブラリを使用している場合は、jQuery.noConflict() で $ を使用しないようにする必要があります。ただし、$ が jQuery 関数のエイリアスであるという前提で書かれているため、プラグインが壊れます。他のプラグインとうまく連携し、jQuery $ エイリアスを引き続き使用するには、すべてのコードをすぐに呼び出される関数式内に配置し、関数 jQuery を渡し、パラメーターに $ という名前を付ける必要があります。

JavaScript では、このラッパーは次のようになります。

(function ( $ ) {
  // do stuff
  return this;
})(jQuery)

これを CoffeeScript にどのように変換できますか?

4

2 に答える 2

1

最初はそれは明らかではありません。これがスケルトンです。

$.fn.ourFunction = do ($=jQuery) -> (opts) ->
  # do stuff
  @

これは次のようにコンパイルされます。

$.fn.ourFunction = (function($) {
  return function(opts) {
    return this;
  };
})(jQuery);

わかりやすくするために、これを複数の行に分割することもできます。

$.fn.ourFunction = do ($=jQuery) ->
  (opts) ->
    # do stuff
    @

最初の行では、do最初に関数を実行する構文を使用しています。パラメータ (例: $) とその値 (例: ) を指定することもできますjQuery。

$.fn.ourFunction = do ($=jQuery) ->

2 行目は、返される関数を作成します。CoffeeScript ではすべてが式であるため、言う必要はありませんreturn (opts) ->(ただし、言うことはできます)。

(opts) ->

次に、もちろん、実際の作業が行われるコードの本体があります。最初のコードで省略したトリックの 1 つは、=>演算子を使用してスコープを維持することです。スクロール ハンドラー内で、thisターゲット オブジェクトのままにすることができます。呼び出すことができ$('#something').ourFunction()、効果的$('#something').something()にスクロール ハンドラを呼び出します。 

$.fn.ourFunction = do ($=jQuery) ->
  (opts) ->
    $(window).scroll =>
      this.something()
      @something()
    @

最後の行は単なる@文字です。を返すため、これにより連鎖が可能になりますthis。あるいは、最後の行で別の連鎖可能なメソッドを onthisで呼び出す場合は、明示的にする必要はありません。

$.fn.flash = do ($=jQuery) -> (opts) ->
  @animate(opacity: 0).delay()
   .animate({opacity: 1})
于 2013-08-06T06:33:43.550 に答える