尋找智能的方法來使這個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所有酥料餅的錯誤不是簡單的新的。