Javascript 如何抽象/概括执行类似但略有不同任务的函数？（大部分是不同的、稍微复杂的选择器）_Javascript_Jquery

Javascript 如何抽象/概括执行类似但略有不同任务的函数？（大部分是不同的、稍微复杂的选择器）

javascript jquery

Javascript 如何抽象/概括执行类似但略有不同任务的函数？（大部分是不同的、稍微复杂的选择器）,javascript,jquery,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-wi

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

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

我还有三个这样的例子（计划添加更多），它们都非常相似，但不同的程度足以让我在尝试创建一个干er函数时头疼

完整代码

编辑添加：

主要的困难之一是最后一部分，有时我想做

$（el）。prepend

，有时

$（el）。append

，或

$（el）。after

，或

$（el）。find（'something'）。prepend

，或

$（el）。最近（'something'））.prepend/append/after

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

例如，我总是将

moviedetailsmainfo

、

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

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

例如，我总是将

moviedetailsmainfo

、

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

类似的方法可能会奏效：

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

类似的方法可能会奏效：

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

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

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

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

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

所以这里有一个疯狂的答案，即使是我自己也不会提出。试着用另一种方式思考，就把它贴出来吧

制作一个类似于以下内容的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));"}
  ...
]

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) };
    */
    eval(j.action); //evil eval!!
  });
});

更新：

要避免

eval

定义类似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));"}
  ...
]

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

所以这里有一个疯狂的答案，即使是我自己也不会提出。试着用另一种方式思考，就把它贴出来吧

制作一个类似于以下内容的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));"}
  ...
]

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) };
    */
    eval(j.action); //evil eval!!
  });
});

更新：

要避免

eval

定义类似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));"}
  ...
]

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

找出共同点。确定它们之间的相互关系。把他们排除在外。。一种方法是使用闭包来创建返回专用函数的函数。确定它们之间的相互关系。把他们排除在外。。一种方法是使用闭包创建返回专用函数的函数。谢谢，这看起来好多了。太疯狂地把它弄干确实让我头疼。我最终得到的函数调用是不直观的，非常难看的

{$loopThrough:$（'.FFEC Display'），标题：$（el）.find（'h3'）.text（），类：[“poster width”，“overlay”]，outputHandler:function（compiled）{$（el）.find（'.movie link'）。prepend（compiled）;                 }             };@CheapSteaks是的，你是对的，你不想用我提到的一些因素来换取完全干燥，这可能会在以后变得昂贵：）。因为在您的部分中可以看到您附加的某些位置、之后等。。。所以最好把不同的功能分开。谢谢，这看起来好多了。太疯狂地把它弄干确实让我头疼。我最终得到的函数调用是不直观的，非常难看的{$loopThrough:$（'.FFEC Display'），标题：$（el）.find（'h3'）.text（），类：[“poster width”，“overlay”]，outputHandler:function（compiled）{$（el）.find（'.movie link'）。prepend（compiled）;                 }             };@CheapSteaks是的，你是对的，你不想用我提到的一些因素来换取完全干燥，这可能会在以后变得昂贵：）。因为在您的部分中可以看到您附加的某些位置、之后等。。。所以最好把不同的功能分开。哦，有趣。我们甚至可以通过一系列类似于[{action:'find'，target:'.movie link'}，'prepend']
的操作来避免eval；在eval
所在的位置添加另一个循环，在$（el）
上调用actions数组中的第一个项（根据项的类型
是对象还是字符串进行不同的调用），并存储结果，在存储的值上调用第二个项（如果存在），直到数组用尽为止，并使用模板的html调用最终结果。将是罪恶的复杂，肯定不会使用代码，但它肯定是一个有趣的solution@CheapSteaks是的，你说得很对！使用jquery的括号表示法，我认为有可能使代码脱离eval。稍后我会尝试更新答案。我在这里写了一个解决方案，希望与您的方案进行比较。整个过程几乎都是头晕目眩的，lol@CheapSteaks我检查了你的代码，它几乎和我的一样，但是你在abonomation=abonomation[action]中犯了一个小错误，似乎在此之后将失去对象的绑定。看看这个，哦，很有趣。我们甚至可以通过一系列看起来