我试图概括的匿名函数的一个实例的示例
$('.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 的改进。但是可以分离出一些共同的功能。
示例我总是将 moviedetailsmaininfo
、BoxOfficeMovie
、MovieItemsRotator
等部分分开,因为我想让它更具可读性/可维护性,并且因为它们听起来像是提供自己的一组功能(但你会知道得更多),根据我的说法,将它们分开本身是有意义的。
类似的东西?
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/