Правильный способ добавления плагина jQuery с RequireJS

Question

Я хочу добавить плагин jQuery, который вертикально выравнивает элементы в родительском элементе. В других случаях, когда я не использовал RequireJS, я бы просто написать глобальную функцию, например, так:

(function ($) { 
    $.fn.vAlign = function() { 
     return this.each(function() { 
     var ah = $(this).height(); 
     var ph = $(this).parent().height(); 
     var mh = (ph - ah)/2; 
     $(this).css('margin-top', mh); 
     }); 
    }; 
})(jQuery); 

Затем я могу назвать это так: $('.someclass').vAlign(). Я пытаюсь понять, как это сделать теперь, когда я использую RequireJS. Я пишу модуль?

Я нашел описание написания модуля с использованием RequireJS here, но он описывает сценарий, в котором вы вызываете функцию не на элемент в DOM, как и в jQuery, но ссылаясь на имя библиотеки, в котором вы определил модуль.

Есть ли способ написать модуль в RequireJS, чтобы функция могла вызываться на элементе в DOM так, как вы бы в jQuery?

Answer 1

Определенно вы можете написать отдельный модуль и загрузить его при необходимости.

valign.js - это модуль, который содержит логику для элементов вертикального выравнивания.

//valign.js 
define(['jquery'], function($) { 
    $.fn.vAlign = function() { 
     return this.each(function() { 
      var ah = $(this).height(); 
      var ph = $(this).parent().height(); 
      var mh = (ph - ah)/2; 
      $(this).css('margin-top', mh); 
     }); 
    }; 
}); 

добавить valign.js модуль как зависимости в вашем main.js, которые называют Вертикальный код Align

//main.js 
define(['jquery','valign'], function($, v) { 
    $('.someclass').vAlign(); 
});