有條件的字符串 - 更好的方法？

-3

我在我的編輯器中有這麼大的代碼塊，看起來好像可以做得更好。有條件的字符串 - 更好的方法？

本質上，根據'divert_poss'的值，我需要渲染一個稍微不同的字符串。 'divert_poss'是1或0，它的值影響如何在'divert_enabled'和'warning_enabled'

附近繪製表格的方式是什麼？下面的代碼確實有效，但是必須有更好的方法？

if (_store.divert_poss == 1) 
{ 
// show divert info for those where divert_poss=1 
return [ 
    '<div class="medium-4', clearClass, ' column">', 
    '<div class="store-locator__infobox" id="store', index, '">', 
    '<div class="infobox__row infobox__row--marker">', 
    '<div class="infobox__marker', (letter.length > 1) ? ' infobox__marker--small' : '', '">',letter,'</div>', 
    '</div>','<div class="infobox__body">', 
     '<div class="infobox__row infobox__title store-image" style="display:none;">',_store.storeimage,'</div>', 
     '<div id="storeid" class="infobox__row infobox__title store-storeid" style="display:none;">',_store.storeid,'</div>', 
     '<div class="infobox__row infobox__title store-divert_poss" style="display:none;">',_store.divert_poss,'</div>', 
     '<div class="infobox__row infobox__title store-location"><center>',_store.location,'</div>', 
     '<div class="infobox__row store-address" style="display:none;">',_store.address, '</div>', 
     '<div class="infobox__row store-website" style="display:none;"><a target="new" href="http://',_store.website.replace(/(http:\/\/)\1/, '$1'),'">',_store.website, '</a></div>', 
    '<div class="infobox__row store-email" style="display:none;"><a href="mailto:',_store.email,'">',_store.email, '</a></div>', 
    '<div class="infobox__row store-tel" style="display:none;">Tel: ',_store.telephone, '</div>', 
    '<div class="infobox__row store-cat_id" style="text-align: center">',_store.cat_id, '</div>', 
    '<div class="infobox__row store-description" style="display:none;">',_store.description, '</div>', 
    '<div class="infobox__row store-specialism" style="display:none;">',_store.specialism, '</div>', 
    '<div class="infobox__row store-divert_enabled" style="display:none;">', 
    '<table width="100%"><tr><td align="center">Divert Status</td><td align="center">Warning Status</td></tr>', 
    '<tr><td align="center" width="50%">',_store.divert_enabled,'</td></div>', 
    '<div class="infobox__row store-warning_enabled" style="display:none;">', 
    '<td align="center" width="50%">',_store.warning_enabled, '</td></tr></table></div>', 
    '<div class="infobox__row store-embedvideo" style="display:none;">',_store.embedvideo, '</div>', 
    '<div class="infobox__row store-defaultmedia" style="display:none;">',_store.defaultmedia, '</div>', 
    '</div>',getDirections, 
    // '<div style="display:none;">', 
    // getStreetView, 
    // '</div>', 
    '</div>','</div>'].join(''); 
}else 
{ 
// hide divert info for those where divert_poss=0 
return [ 
    '<div class="medium-4', clearClass, ' column">', 
    '<div class="store-locator__infobox" id="store', index, '">', 
    '<div class="infobox__row infobox__row--marker">', 
    '<div class="infobox__marker', (letter.length > 1) ? ' infobox__marker--small' : '', '">',letter,'</div>','</div>', 
    '<div class="infobox__body">','<div class="infobox__row infobox__title store-image" style="display:none;">',_store.storeimage,'</div>', 
    '<div id="storeid" class="infobox__row infobox__title store-storeid" style="display:none;">',_store.storeid,'</div>', 
    '<div class="infobox__row infobox__title store-divert_poss" style="display:none;">',_store.divert_poss,'</div>', 
    '<div class="infobox__row infobox__title store-location"><center>',_store.location,'</div>', 
    '<div class="infobox__row store-address" style="display:none;">',_store.address, '</div>', 
    '<div class="infobox__row store-website" style="display:none;"><a target="new" href="http://',_store.website.replace(/(http:\/\/)\1/, '$1'),'">',_store.website, '</a></div>', 
    '<div class="infobox__row store-email" style="display:none;"><a href="mailto:',_store.email,'">',_store.email, '</a></div>', 
    '<div class="infobox__row store-tel" style="display:none;">Tel: ',_store.telephone, '</div>', 
    '<div class="infobox__row store-cat_id" style="text-align: center">',_store.cat_id, '</div>', 
    '<div class="infobox__row store-description" style="display:none;">',_store.description, '</div>', 
    '<div class="infobox__row store-specialism" style="display:none;">',_store.specialism, '</div>',  
    '<div class="infobox__row store-divert_enabled" style="display:none;"></div>', 
    '<div class="infobox__row store-warning_enabled" style="display:none;"><table width="100%"><tr><td align="center" width="100%">Warning Info</td></tr><tr><td align="center">',_store.warning_enabled, '</td></tr></table></div>', 
    '<div class="infobox__row store-embedvideo" style="display:none;">',_store.embedvideo, '</div>', 
    '<div class="infobox__row store-defaultmedia" style="display:none;">',_store.defaultmedia, '</div>', 
    '</div>',getDirections, 
    // '<div style="display:none;">', 
    // getStreetView, 
    // '</div>', 
    '</div>','</div>'].join(''); 
}

}

來源

2015-11-28 Nick Sutton

難道你不能從這兩個字符串中提取交叉點並將其放入變量，並在if/else只是添加部分，這是不同的？ – PatNowak

我會建議創建一個JSON數組並將其傳遞給一個名爲Mustache.js的有用JS插件 - 基本上，您將創建一個HTML模板並在init函數中傳遞數組。同時擺脫你的內聯樣式CSS，這很醜陋 –

字符串連接是計算最昂貴的事情之一，我個人認爲這是一個不好的做法。不過，我認爲這可能有助於[join vs concat]（http://stackoverflow.com/questions/7299010/why-is-string-concatenation-faster-than-array-join#7299040） –

網絡找出常見的東西，並確保你渲染那些只是變化的東西。我只能找到一個正在改變的部分。

貌似這個位在第一轉：

firstBit = ['<div class="medium-4', clearClass, ' column">', 
'<div class="store-locator__infobox" id="store', index, '">', 
'<div class="infobox__row infobox__row--marker">', 
'<div class="infobox__marker', (letter.length > 1) ? ' infobox__marker--small' : '', '">', letter, '</div>', '</div>', 
'<div class="infobox__body">', '<div class="infobox__row infobox__title store-image" style="display:none;">', _store.storeimage, '</div>', 
'<div id="storeid" class="infobox__row infobox__title store-storeid" style="display:none;">', _store.storeid, '</div>', 
'<div class="infobox__row infobox__title store-divert_poss" style="display:none;">', _store.divert_poss, '</div>', 
'<div class="infobox__row infobox__title store-location"><center>', _store.location, '</div>', 
'<div class="infobox__row store-address" style="display:none;">', _store.address, '</div>', 
'<div class="infobox__row store-website" style="display:none;"><a target="new" href="http://', _store.website.replace(/(http:\/\/)\1/, '$1'), '">', _store.website, '</a></div>', 
'<div class="infobox__row store-email" style="display:none;"><a href="mailto:', _store.email, '">', _store.email, '</a></div>', 
'<div class="infobox__row store-tel" style="display:none;">Tel: ', _store.telephone, '</div>', 
'<div class="infobox__row store-cat_id" style="text-align: center">', _store.cat_id, '</div>', 
'<div class="infobox__row store-description" style="display:none;">', _store.description, '</div>', 
'<div class="infobox__row store-specialism" style="display:none;">', _store.specialism, '</div>', 
'<div class="infobox__row store-divert_enabled" style="display:none;">'].join(); 

lastBit = ['<div class="infobox__row store-embedvideo" style="display:none;">', _store.embedvideo, '</div>', 
    '<div class="infobox__row store-defaultmedia" style="display:none;">', _store.defaultmedia, '</div>', 
    '</div>', getDirections, 
    // '<div style="display:none;">', 
    // getStreetView, 
    // '</div>', 
    '</div>', '</div>' 
].join('');

所以把這兩個位在一邊。這裏使用兩個中間位：

middleBit1 = [ 
    '<table width="100%"><tr><td align="center">Divert Status</td><td align="center">Warning Status</td></tr>', 
    '<tr><td align="center" width="50%">', _store.divert_enabled, '</td></div>', 
    '<div class="infobox__row store-warning_enabled" style="display:none;">', 
    '<td align="center" width="50%">', _store.warning_enabled, '</td></tr></table></div>' 
].join(); 

middleBit2 = [ 
    '</div>', 
    '<div class="infobox__row store-warning_enabled" style="display:none;"><table width="100%"><tr><td align="center" width="100%">Warning Info</td></tr><tr><td align="center">', _store.warning_enabled, '</td></tr></table></div>' 
].join();

然後使用條件運算符來合併兩個。

return firstBit + ((_store.divert_poss == 1) ? middleBit1 : middleBit2) + lastBit;

來源

2015-11-28 12:11:21

這樣做更有意義 - 謝謝 –

Lemme知道您在嘗試後會怎麼想。 :) –

更容易遵循和進一步適應 - 感謝您抽出時間 –

使用條件運算符

(_store.divert_poss ? "stringFor1" : "stringFor0")

關於JS多行字符串：Creating multiline strings in JavaScript

所以你的情況：

var HTML = "<div>\ 
<p>bla bla "+ (_store.divert_poss ? "stringFor1" : "stringFor0") +" foo bar!</p>\ 
</div>";

來源

2015-11-28 12:06:05

我想過，但我仍然有兩個巨大的代碼塊。是否有可能以某種方式在字符串中嵌套條件運算符？ –

@nick yes Nick'「bla bla bla」+（cond？「true str」：「false str」）+「bla bla bla」 –

有條件的字符串 - 更好的方法？

回答

相關問題