Написание плагина jquery в coffeescript - как получить "(function($)" и "(jQuery)"?

#javascript #jquery #coffeescript

Вопрос:

Я пишу плагин jquery в coffeescript, но не уверен, как правильно настроить часть оболочки функции.

Мой coffeescript начинается с этого:

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

Который создает javascript с оболочкой функции:

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

но я хочу, чтобы ‘$’ передавался следующим образом:

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

Аналогичного окончания у меня нет … ничего конкретного в coffeescript.
Я получаю это в javascript:

 })();

Но хотелось бы этого:

 })(jQuery);

Кто-нибудь знает, как добиться этого с помощью компилятора coffeescript?
Или каков наилучший способ сделать это в coffeescript?

Ответ №1:

Ответ заключается в том, что вам не нужно вызывать его подобным образом в CoffeeScript — ваш скрипт уже надежно обернут в замыкание, поэтому нет необходимости в хитростях jQuery, передаваемых в качестве параметра. Просто напишите:

 $ = jQuery

… в верхней части вашего скрипта, и все готово.

Ответ №2:

Если вы не используете --bare флаг в компиляторе,

 $ = jQuery

решение является наилучшим. Если вы готовы, то с помощью нового do ключевого слова вы можете написать

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

таким образом, создавая желаемую область видимости, избегая путаницы в круглых скобках.

Ответ №3:

ОБНОВИТЬ / ОТРЕДАКТИРОВАТЬ: Да, согласно объяснению Джереми:

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

1. Второй имеющийся у вас блок кода немного избыточен. jQuery доступ к нему в любом случае осуществляется из глобальной области видимости, поэтому внутреннее закрытие просто добавляет больше кода (и более длинные цепочки областей видимости) без какой-либо пользы.

Ответ №4:

Самый простой способ — расширить объект $.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);

Ответ №5:

Вам следует взглянуть на шаблонную версию jQuery для CoffeeScript ~ https://github.com/zenorocha/jquery-boilerplate/blob/master/jquery.boilerplate.coffee

Ответ №6:

Хотя этот пост старый, я нашел его полезным. Вот код coffee-script, который работает для меня.

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

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

Примечание: вам не нужно объявлять $ переменную, вы можете просто использовать ее прямо из коробки.

Ответ №7:

Вы могли бы просто добавить замыкание самостоятельно и скомпилировать его с --bare флагом.

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

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

Ответ №8:

Просто и понятный

Это все, что мне нужно было сделать, чтобы добавить свой собственный метод cleanFadeIn к объектам jQuery. Он также возвращает объекты для объединения в цепочку:

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