Javascript 优化jQuery代码的编写方式

我目前刚刚开始学习jQuery，我似乎能够让它按照我想要的方式工作，但我觉得我编写它的方式不是很有效。在下面这个例子中，谁能帮助我

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });

---

这里我在屏幕中央放置了一个div。然后它还会在窗口调整大小时再次执行此操作，因为其内容宽度属性是百分比值。它工作得很完美，但我忍不住觉得一定有更好的方法来写这篇文章。任何帮助都将不胜感激。谢谢

您可以缓存对象并触发调整大小事件，这样就可以在DOM就绪时执行调整大小处理程序

$(window).resize(function() {
    var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });
}).resize()

---

你应该用你的第一行做一个动作：

function center(){
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
}

然后，您第一次调用它，并在调整窗口大小时调用它：

center();
$(window).resize(center);

---

您真的需要jquery吗？ 您可以直接使用css

.tiles-wrapper{
top:50% ;
left:50% ;
width: //what u given
height: //what u given
margin-left: //tiles width/2
margin-right: //tiles height/2
position: //absolute or float
}

如果要动态计算高度和宽度 把这个写在文件上就行了

var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });

---

在重新调整尺寸时，它将自动位于中心位置

为

$（'.tiles wrapper'）

使用变量？我不知道怎么做，我主要使用CSS。只是想学习一些jQuery/js技能。发现很难知道从哪里开始。谢谢，尽管下面用户给出的答案“未定义”是正确的。一个微观优化（如此之多以至于我不会费心把它作为一个答案）是使用

.on（'resize'，function…

而不是

.resize（function…

），当触发时，使用

.trigger（'resize'）

而不是

.resize（）

。如果类

tiles wrapper

的元素数量是静态的，则添加的优化将是将

$elem

的定义移出resize函数并移到上面的行上。这将节省每次调整大小时的重新查询。这尤其正确，因为代码保证至少运行一次（如果未立即触发

resize

，则需要权衡您是否在此之前查询）。非常感谢，我只有一个定义了tiles wrapper的类，因此我将元素的定义移到了resize函数之外。似乎工作正常。我不知道容器有多大，因为它包含8个框，任何用户都可以添加或删除。这会改变容器的宽度和高度。我通常只尝试使用css。我有一个css回退，它将在初始状态下工作。谢谢你的回答

var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });