Расширение области функций

Question

Я написал несколько функций jQuery для изменения размеров изображений, сохраняя их соотношение сторон на pageload и изменяя размер окна. Эти функции отлично работают, но я построил их специально для одного сценария. Теперь возник еще один подобный сценарий, в котором я должен выполнять почти ту же функциональность, только с iFrames. В интересах стать лучшим кодером и не добавлять дополнительный код, как я могу кратко и эффективно повторно использовать эти функции для iFrames по всему сайту, а также сценарий $('.com-background > img')?

Вот JQuery:

function imageCalc() { 
    $imgWidth = $('.com-background > img').width(); 
    $imgHeight = $('.com-background > img').height(); 
    $imgAspectRatio = $imgHeight/$imgWidth; 
    $('.com-background > img').css('margin-left', '-10px'); 

} 
function setImageDims() { 
    $('.com-background > img').css('height', function(calcHeight) { return $imgAspectRatio * $('#main-content').width(); }); 
    $('.com-background > img').css('width', function(calcWidth) { return $('#main-content').width() + 20; }); 
} 

function imageResize() { 
    $('.com-background > img').css('width', function(resizeWidth) { return $("body").width() }); 
    $('.com-background > img').css('height', function(resizeHeight) { return $imgAspectRatio * $('.com-background > img').width(); }); 
} 

Answer 1

Что @nnnnnn от комментариев средств является:

Обновление функции взять селектор в качестве аргумента вместо жесткого кодирования его?

Включите это:

function imageCalc() { 
    $imgWidth = $('.com-background > img').width(); 
    $imgHeight = $('.com-background > img').height(); 
    $imgAspectRatio = $imgHeight/$imgWidth; 
    $('.com-background > img').css('margin-left', '-10px'); 

} 

Для этого:

//where selector is your string query 
function imageCalc(selector) { 
    $imgWidth = $(selector).width(); 
    $imgHeight = $(selector).height(); 
    $imgAspectRatio = $imgHeight/$imgWidth; 
    $(selector).css('margin-left', '-10px'); 

} 

Вышеуказанные изменения сделали бы ваши функции родовое, в том смысле, что вы можете сделать то же самое с другими объектами DOM до тех пор, пока вы укажете, что нужно изменить с помощью аргумента . Чтобы сделать то же самое, что вы делаете прямо сейчас, вам нужно позвонить imageCalc('.com-background > img'); и так далее.

И это,

Кроме того, никакого отношения к вашему вопросу, кэшировать объекты JQuery, не держать повторный выбор одни и те же элементы в пределах одной и той же функции

он означает:

//where selector is your string query 
function imageCalc(selector) { 
    var obj=$(selector); 
    $imgWidth = obj.width(); 
    $imgHeight = obj.height(); 
    $imgAspectRatio = $imgHeight/$imgWidth; 
    obj.css('margin-left', '-10px'); 

} 

Что это делает кэш ваш объект, который означает, что вы просто лока т. е. один раз, и повторно использовать тот же объект. Это влияет на производительность, потому что каждый раз, когда вы используете $(selector), вы повторно просматриваете дерево DOM, чтобы найти один элемент, что требует времени.