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

StackOverflow https://stackoverflow.com/questions/4533848

  •  13-10-2019
  •  | 
  •  

質問

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

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

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

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

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

しかし、私はこのように「$」が渡されたいです： 

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

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

})();

しかし、これを望みます：

})(jQuery);

Coffeescriptコンパイラでこれを達成する方法を知っている人はいますか？または、これをCoffeeScriptで成し遂げるための最良の方法は何ですか？

役に立ちましたか？

解決

答えは、coffeescriptでそのように呼び出す必要はないということです。スクリプトはすでに閉鎖に安全に包まれているため、jQuery-as-a-parameter-tricksの必要はありません。書くだけ：

$ = jQuery

...スクリプトの上部で、あなたは行ってもいいです。

他のヒント

あなたが使用していない限り --bare コンパイラのフラグ、

$ = jQuery

解決策が最適です。もし、あんたが それは, 、新しいものと do キーワード、書くことができます

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

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

更新/編集： うん、ジェレミーの説明に従って：

$ = 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);

最も簡単な方法は、拡張することです $ .fn 物体

シンプルなjQueryプラグインは、次のようにコーヒースクリプトで書くことができます。

$.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);

jquery bulerplateのcoffeescriptバージョンを見てください〜 https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

この投稿は古いですが、私はそれが便利だと感じました。これが私に役立つコーヒースクリプトコードです。 

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

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

ノート: ：宣言する必要はありません $ 変数、すぐに使用することができます。

閉鎖を自分で追加して、 --bare 国旗。

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

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

シンプルで簡単です

これは私自身の方法を追加するために私がしなければならなかったすべてです、 cleanFadeIn, 、jQueryオブジェクト。チェーンのためにオブジェクトも返します。

$.fn.extend
  cleanFadeIn: ->                     # $('.notice').cleanFadeIn
    return $(@).each ->               # returns the objects for easy chaining.
      $(@).slideDown 'slow', ->
        $(@).fadeTo 'slow', 1
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top