1

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

$('.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/after

4

4 回答 4

3

如果它们属于具有不同功能的不同部分，出于可维护性和可读性以及任何未来增强的目的，我不会完全疯狂地使其干燥。但是可以分离出一些常见的功能。

示例我总是将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"])));
});
于 2013-06-27T04:55:39.580 回答
1

像这样的东西可能会起作用：

function myFunction(selectorA, selectorB, selectorC) {
    $(selectorA).each(function(index, el) {
           var title = $(el).find(selectorB).(blacklistRegexp, '').trim();
           /* ignored code */
           if ( selectorC ) {
               $(el).find(selectorC).prepend(Handlebars.templates.ratings(templateData));
           }
           else {
               $(el).prepend(Handlebars.templates.ratings(templateData));
           }
    });
}

myFunction(".FFEC-Display", "h3", ".movie-link");
myFunction(".MovieItemsRotator .item", ".Title");
于 2013-06-27T04:57:12.010 回答
1

好的，这只是一个起点，但是：

$('.FFEC-Display').each(function(i, el){
    var title = magical_title_function(el,'h3');
    /* 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) };
    */
    magical_prepend_function(el, templateData, selector,'.movie-link')
});


$('.MovieItemsRotator .item').each(function(i, el){
    var title = magical_title_function(el,'.Title');
    /* 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) };
    */
    magical_prepend_function(el, templateData)
});

function magical_title_function(el,selector){
    return $(el).find(selector).text().replace(blacklistRegexp, '').trim();
}
function magical_prepend_function(el, templateData, selector){
    if(selector==undefined){
        $(el).prepend(Handlebars.templates.ratings(templateData));
    } else {
        $(el).find(selector).prepend(Handlebars.templates.ratings(templateData));
    }
}
于 2013-06-27T04:58:19.763 回答
1

所以这是一个疯狂的答案，即使我自己也不会建议。只是为了尝试以另一种方式思考而发布它。

制作一个像这样的json：

json = [
  {target: '.FFEC-Display', title : 'h3', action :"$(el).find('.movie-link').prepend(Handlebars.templates.ratings(templateData));"},
  {target: '.MovieItemsRotator .item', title: '.Title', action: "$(el).prepend(Handlebars.templates.ratings(templateData));"}
  ...
]

然后像这样迭代它：

$.each(json, function(index, j){
  $(j.target).each(function(i, el){
    var title = $(el).find(j.title).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) };
    */
    eval(j.action); //evil eval!!
  });
});

更新：

避免eval定义像这样的json：

json = [
{
  target: '.FFEC-Display',
  title: 'h3',
  actions: 
  [
    { action: 'find', target: '.movie-link' },
    'prepend'
  ]
}, 
{
  target: '.MovieItemsRotator .item',
  title: '.Title',
  actions: ['prepend']
}];

和功能：

$.each(json, function (index, j) {
  $(j.target).each(function (i, el) {
    var title = $(el).find(j.title).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) };
    */
    var abomination = $(el);
    $.each(j.actions, function (k, action) {
      if (typeof action === "string") {
        //last action
        abomination[action](Handlebars.templates.ratings(templateData));
      } else if (action.target === undefined) {
        //action with no target, like siblings or something
        abomination = abomination[action.action]();
      } else {
        //action like find()
        abomination = abomination[action.action](action.target);
      }
    });
  });
});
于 2013-06-27T05:18:45.457 回答