Javascript 编写jquery函数以重用公式

Javascript 编写jquery函数以重用公式,javascript,jquery,formula,reusability,Javascript,Jquery,Formula,Reusability,我有一个函数可以做一些事情,它可以计算高度/宽度,并应用css top/left进行居中。我希望能够重用它并通过它传递参数,而不是多次重写公式 我有: loading.css({ top: (wrapper.height() - loading.outerHeight()) / 2 + 'px', left: (wrapper.width() - loading.outerWidth()) / 2 + 'px' }); 我希望能够重用这两个公式,并用其他注册元素替换load 我

我有一个函数可以做一些事情,它可以计算高度/宽度,并应用css top/left进行居中。我希望能够重用它并通过它传递参数,而不是多次重写公式

我有:

loading.css({
    top: (wrapper.height() - loading.outerHeight()) / 2 + 'px',
    left: (wrapper.width() - loading.outerWidth()) / 2 + 'px'
});
我希望能够重用这两个公式,并用其他注册元素替换
load

我不知道我在做什么,我尝试了几件失败的事情

我希望能够通过
加载之类的方式调用它


当函数运行时,它会附加加载div,并使用上面的代码计算绝对位置top和left。我希望在窗口调整大小时它保持居中,所以我基本上复制了上面的代码,并用
$(window.resize
函数将其包装起来

当显示错误div时,由于高度/宽度尺寸不同,我将使用类似代码再次计算top和left。我不想复制
元素.css({top:[…],left:[…]})
,我只想做一些类似于

_center = function() {
    var context = $(this);
    context.css({
        top: (wrapper.height() - context.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - context.outerWidth()) / 2 + 'px'
    });
};

loading._center();

我很接近。我忘了返回计算结果。。我现在有:

_center = function($this) {
    $this.css({
        top: (wrapper.height() - $this.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - $this.outerWidth()) / 2 + 'px'
    });
};

_center(loading);

您可以将其注册为jQuery插件:

$.fn._center = function(wrapper) {
    return this.each(function() {
        $(this).css({
            top: ($(wrapper).height() - $(this).outerHeight()) / 2 + 'px',
            left: ($(wrapper).width() - $(this).outerWidth()) / 2 + 'px'    
        });
    });
};
这样称呼它:

var wrapper = $("#someDiv");
$(".foo, .bar")._center(wrapper);

请参见

您可以为第二个参数提供一个函数:

loading.css('top', function(index, oldValue) {
  return (wrapper.height() - $(this).outerHeight()) / 2 + 'px';
});

loading.css('left', function(index, oldValue) {
  return (wrapper.width() - $(this).outerWidth()) / 2 + 'px';
});

下面是.css()的示例。

给出更多关于如何重用这些功能的示例。我想我在什么地方读到过关于插件的文章,这些插件将所有东西分开,并将名称空间或其他东西弄得乱七八糟。@gavsiu-您应该阅读上面链接的文档中有关名称空间的部分。