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编写模块的描述，但它描述了一个场景，在该场景中，您不像在jQuery中那样调用函数而不是在DOM中的元素上，而是通过引用库名称您在其中定义了模块。

有没有办法在RequireJS中编写一个模块，这样可以像在jQuery中那样在DOM中的元素上调用该函数？

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模块作为依赖，调用垂直对齐代码

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

使用RequireJS添加jQuery插件的正确方法

1 个答案: