Question

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

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

Answer 1

如果它们具有不同功能的不同部分，为了可维护性和可读性以及任何未来的改进。但是可以分离出一些常见的功能。

示例我会始终将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"])));
});

Answer 2

这样的事情可能有用：

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");

Answer 3

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

$('.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));
    }
}

Answer 4

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

制作一个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);
      }
    });
  });
});

如何抽象/概括执行类似但稍微不同的任务的函数？（主要是不同的和稍微复杂的选择器）

4 个答案:

如何抽象/概括执行类似但稍微不同的任务的函数？ （主要是不同的和稍微复杂的选择器）

4 个答案:

如何抽象/概括执行类似但稍微不同的任务的函数？（主要是不同的和稍微复杂的选择器）