javascript - 我如何抽象/概括执行类似但略有不同任务的功能? (大部分不同且稍微复杂的选择器)

标签 javascript jquery

我试图概括的匿名函数的一个实例的示例

$('.FFEC-Display').each(function(i, el){
    var title = $(el).find('h3').text().replace(blacklistRegexp, '').trim();
    /* you can ignore the code in here
    var tomato = findTomato(title, tomatoes);
    var classes = ["poster-width", "overlay"];
    var templateData = tomato ? prepareData(tomato, classes) : { query: title, classes: namespaceClasses(classes) };
    */
    $(el).find('.movie-link').prepend(Handlebars.templates.ratings(templateData));
});

还有一个例子:

$('.MovieItemsRotator .item').each(function(i, el){
    var title = $(el).find('.Title').text().replace(blacklistRegexp, '').trim();
    /* you can ignore the code in here
    var tomato = findTomato(title, tomatoes);
    var classes = ["overlay", "overlay-poster"];
    var templateData = tomato ? prepareData(tomato, classes) : { query: title, classes: namespaceClasses(classes) };
    */
    $(el).prepend(Handlebars.templates.ratings(templateData));
});

我还有三个这样的实例(计划添加更多),它们都非常相似,但不同之处足以让我在尝试创建 DRY-er 函数时非常头疼。

Git Repo 上的完整代码

编辑添加:
主要困难之一是最后一部分,有时我想做 $(el).prepend,有时想做 $(el).append,或 $( el).after,或 $(el).find('something').prepend,或 $(el).closest('something').prepend/append/之后

最佳答案

如果它们属于具有不同功能的不同部分,为了可维护性可读性以及任何 future 的改进。但是可以分离出一些共同的功能。

示例我总是将 moviedetailsmaininfoBoxOfficeMovieMovieItemsRotator 等部分分开,因为我想让它更具可读性/可维护性,并且因为它们听起来像是提供自己的一组功能(但你会知道得更多),根据我的说法,将它们分开本身是有意义的。

类似的东西?

function getTemplateData(title, classes) {
    var tomato = findTomato(title, tomatoes);
    return tomato ? prepareData(tomato, classes) : {
        query: title,
        classes: namespaceClasses(classes)
    };
}

function getTitle(elem) {
    return elem.text().replace(blacklistRegexp, '').trim();
}


$('.FFEC-Display').each(function (i, el) {
    $(el).find('.movie-link').prepend(Handlebars.templates.ratings(getTemplateData(getTitle($(el).find('h3')), ["poster-width", "overlay"])));
});
//http://cineplex.com/Theatres/TheatreDetails/Cineplex-Cinemas-Mississauga-formerly-Coliseum-Mississauga-.aspx

$('.Listing .moviedetailsmaininfo').each(function (i, el) {

    $(el).find('.Poster').after(Handlebars.templates.ratings(getTemplateData(getTitle($(el).find('h3')), ["inline", "poster-width", "text-center", "below-poster"])));
});
//homepage
$('.BoxOfficeMovie').each(function (i, el) {
    $(el).append(Handlebars.templates.ratings(getTemplateData(getTitle($(el).find('a')), ["inline", "float-right"])));
});
//homepage
$('.MovieItemsRotator .item').each(function (i, el) {

    $(el).find('div').first().css('position', 'relative').prepend(Handlebars.templates.ratings(getTemplateData(getTitle($(el).find('.Title')), ["overlay"])));
});
//http://cineplex.com/Movies.aspx
$('.Movies .Movie').each(function (i, el) {
    $(el).find('.MoviePoster').append(Handlebars.templates.ratings(getTemplateData(getTitle($(el).find('h3')), ["inline", "full-center"])));
});

关于javascript - 我如何抽象/概括执行类似但略有不同任务的功能? (大部分不同且稍微复杂的选择器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17334688/

相关文章:

javascript - 使用选择框和 url 哈希过滤时 jQuery 同位素问题

JavaScript/jQuery : How to properly use setTimeout before redirect

javascript - 在一页上连续播放 YouTube 嵌入式视频

jquery - jQuery 的 live() 函数是否有不绑定(bind)事件的变体?

javascript - Jquery 简单 ajax - 插入 html

javascript - 一个元素上的多次点击事件

javascript - 带有关键帧和 css 变量的 stroke-dashoffset 动画

javascript - YQL 返回重复条目

javascript - 为 Owl Carousel 添加动画字幕

javascript - 检查是否点击了自动创建的 div