寻找智能的方法来使这个Bootstrap/jQuery代码“DRY”

Question

我期待着稍微减少一些代码。像往常一样使用jQuery和Bootstrap，它相当冗长。我想学习如何让它变得更加干爽，并且通过使用我认为是可重用代码艺术的参数和变量的一些组合。

NOTE：这些实际上是相同的唯一真正的区别是“内容”。我将需要使内容和“展示位置”在每个实例中都是唯一的。

---

实例A

$('#popover-2').popover({ 
     html: true, 
     trigger: 'manual', 
     placement:'right', 
     container:'body', 
     content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>' 
    }).click(function(e) { 
     $(this).popover('show'); 
     $('.popover-content').prepend('<a class="close">&times;</a>'); 
     $('.close').click(function(e){ 
      $('[data-toggle=popover]').popover('hide'); 
     }); 
    e.preventDefault(); 
}); 

---

实例B

$('#popover-3').popover({ 
     html: true, 
     trigger: 'manual', 
     placement:'right', 
     container:'body', 
     content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>' 
    }).click(function(e) { 
     $(this).popover('show'); 
     $('.popover-content').prepend('<a class="close">&times;</a>'); 
     $('.close').click(function(e){ 
      $('[data-toggle=popover]').popover('hide'); 
     }); 
    e.preventDefault(); 
}); 

由于

Answer 1

您存储所有常用的选项，像这样你就可以使用对象：

var commonOptions = { 
    html: true, 
    trigger: 'manual', 
    placement:'right', 
    container:'body' 
} 

，并在一个名为功能点击回调：

var myClickCallback = function(e) { 
    $(this).popover('show'); 
    $('.popover-content').prepend('<a class="close">&times;</a>'); 
    $('.close').click(function(e){ 
     $('[data-toggle=popover]').popover('hide'); 
    }); 

    e.preventDefault(); 
}; 

因此您的代码将是：

var commonOptions = { 
    html: true, 
    trigger: 'manual', 
    placement:'right', 
    container:'body' 
} 

var myClickCallback = function(e) { 
    $(this).popover('show'); 
    $('.popover-content').prepend('<a class="close">&times;</a>'); 
    $('.close').click(function(e){ 
     $('[data-toggle=popover]').popover('hide'); 
    }); 

    e.preventDefault(); 
} 

$('#popover-2').popover($.extend({}, commonOptions, { 
    content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>' 
})).click(myClickCallback); 


$('#popover-3').popover($.extend({}, commonOptions, { 
    content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>' 
})).click(myClickCallback); 

Answer 2

function popoverHelper(id){ 
    var element = $('#' + id); 

    element.popover({ 
      html: true, 
      trigger: 'manual', 
      placement:'right', 
      container:'body', 
      content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>' 
     }).click(function(e) { 
      $(this).popover('show'); 
      $('.popover-content').prepend('<a class="close">&times;</a>'); 
      $('.close').click(function(e){ 
       $('[data-toggle=popover]').popover('hide'); 
      }); 
     e.preventDefault(); 
    }); 
} 

Answer 3

首先要做的事情是将事件处理包装在一个函数中，传入你想要的元素和选项。由于我们只需要内容和展示位置，因此我们可以单独通过这些内容。如果我们想让调用者定义所有我们想要在对象文字中传递的属性，而不是使用具有5个参数的函数。

var attachHandlers = function(element, content_, placement_) {      
    element.popover({                 
     html: true,                 
     trigger: 'manual',               
     placement: placement_,              
     container: element,               
     content: content_                
    }).click(function(e) {               
     $(this).popover('show');              
     $(this).find('.popover-content').prepend('<a class="close">&times;</a>');  
     $('.close').click((function(elem) {           
      return function() { $(elem).popover('hide'); };       
     })(this));                 
     e.preventDefault();               
    });                    
};                     

var content2 = '<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus ' +   
    'vel augue laoreet rutrum faucibus #2</p>';          
var content3 = '<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus ' +   
    'vel augue laoreet rutrum faucibus #3</p>';          

$(document).ready(function() {              
    attachHandlers($('#popover-2'), content2, 'right');        
    attachHandlers($('#popover-3'), content3, 'bottom');        
});    

有当X前置到与酥料饼，内容类的所有元素，因为你最终会在前面加上一个X所有酥料饼的错误不是简单的新的。