HTML模板（jquery）

Question

我正在尋找一個可以更好地構造HTML注入內容的小javascript/jquery插件。例如，在我目前的插件，我需要創建模板，就覺得這是「哈克」注射這種方式：

var sticker_src = $('<div class="storefront-sticker" style="max-width:'+feature_width+';"><div class="storefront-feature" data-sticker><div class="inner"><span class="flag-icon" style="background-image: url('+iso_flag+');"></span><div class="logo"></div></div><div class="tint"><img src="'+storefront+'" class="bg"></div></div><div class="row pt-1"><div class="col-xs-12 col-sm-12 col-md-6 pr-0"><button class="btn btn-secondary btn-sm pull-left" type="button">Find Directions</button></div><div class="col-xs-12 col-sm-12 col-md-6"><a class="btn btn-secondary btn-sm pull-right" href="#">View Retailer</button></div></div></div>'); 

我知道把手/小鬍子/下劃線，但有很多膨脹的他們，事情我不需要。我如何更好地結合js應用程序的這些方面？

Answer 1

如果您要創建自己的模板，並且希望清理主腳本，請將代碼移至一個功能，如果您真的不想看到它，請在另一個JS文件中定義該功能。

var createStickerTemplate = function(feature_width, iso_flag, storefront) 
{ 
    return $('<div class="storefront-sticker" style="max-width:'+feature_width+';"><div class="storefront-feature" data-sticker><div class="inner"><span class="flag-icon" style="background-image: url('+iso_flag+');"></span><div class="logo"></div></div><div class="tint"><img src="'+storefront+'" class="bg"></div></div><div class="row pt-1"><div class="col-xs-12 col-sm-12 col-md-6 pr-0"><button class="btn btn-secondary btn-sm pull-left" type="button">Find Directions</button></div><div class="col-xs-12 col-sm-12 col-md-6"><a class="btn btn-secondary btn-sm pull-right" href="#">View Retailer</button></div></div></div>'); 
} 

var sticker_src = createStickerTemplate(feature_width, iso_flag, storefront); 

Answer 2

我假設你只是想找一種方法讓代碼看起來更清晰一些嗎？

var a = 'string from variable ...', 
b = [ 
    '<div>', 
     a, 
    '</div>' 
], 
c = b.join(''); 

console.log(c);