jQuery缩短代码答案

【问题标题】：jQuery shorten codejQuery缩短代码
【发布时间】：2013-03-19 15:55:34
【问题描述】：

我想缩短这段代码，所以我想做3或4行，

但如果我尝试制作 3 行，那就不行了。

$('#uebersicht').append('<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ui-btn-up-c"><div class="ui-btn-inner ui-li ui-li-has-alt"><div class="ui-btn-text"><a href="#" class="ui-link-inherit"><img class="ui-li-thumb" src='+icerik.Resim+'><h2 class="ui-li-heading">'+moschee+'</h2><p class="ui-li-desc">'+results[0].formatted_address+'</p><p class="ui-li-desc">'+hesapla(meineLongitude,meineLatitude,icerik.Position.Longitude,icerik.Position.Latitude)+'</p></a></div></div><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-up-c ui-btn-icon-notext" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c" aria-haspopup="true" aria-owns="#purchase"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="d" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">&nbsp;</span></span></span></span></a></li></ul>');

【问题讨论】：

你试过什么没用？
相信我，你不应该通过append插入这么长的字符串。
中间我试过
你真的应该把它分开：/首先，它使调试更容易
@Christoph，将大型 html 片段插入 DOM 的首选方法是什么？您是从性能的角度说，还是从可读性/可维护性的角度说？

标签： jquery

【解决方案1】：

用\ 字符转义你的javascript换行符，像这样：

$('#uebersicht').append('<ul data-role="lisview" data-split-icon="gear"\
 data-split-theme="d" data-inset="true" class="ui-listview \
ui-listview-inset ui-corner-all ui-shadow">');

上面是你的长字符串的缩短版本，但你明白了，使用 \ 来打破 javascript 新行。

【讨论】：

这让我想哭……你不能这样缩进代码，这完全是一个可怕的解决方案。
这种分解字符串的方法is supported by current browsers，将在 ECMAScript 标准第 5 版中添加后得到支持。然而，有些人认为它是bad practice。

【解决方案2】：

当您需要附加多个 HTML 元素时，最好的方法是按这种方式拆分 .append()：

$('#myID').append('<p>lorem ipsum</p>')
          .append('<p>dolor sit amet...</p>')
          .append('etc...');

但不是很好追加太多元素...

【讨论】：

【解决方案3】：

在任何你想要的地方分割它。只需在任何地方结束字符串，添加一个加号，换行，然后重新开始字符串。例如

$('#uebersicht').append(
    '<ul data-role="listview" data-split-icon="gear" ' +
        'data-split-theme="d" data-inset="true" ' +
        'class="ui-listview ui-listview-inset ui-corner-all ui-shadow">' +
        '<li data-corners="false" data-shadow="false" data-iconshadow="true"' +
             'data-wrapperels="div" data-icon="false" data-iconpos="right"' +
             'data-theme="c" class="ui-btn ui-btn-icon-right ui-li ' +
             'ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ' +
             'ui-btn-up-c">' +
          '<div class="ui-btn-inner ui-li ui-li-has-alt">' +
          '<div class="ui-btn-text">' +
          '<a href="#" class="ui-link-inherit">' +
          '<img class="ui-li-thumb" src='+icerik.Resim+'>' +
          '<h2 class="ui-li-heading">'+moschee+'</h2>' +
          '<p class="ui-li-desc">' +
              results[0].formatted_address+ 
          '</p> ' +
          '<p class="uii-desc">' +   
            hesapla(meineLongitude, eineLatitude, icerik.Position.Longitude,       
               icerik.Position.Latitude) +
          '</p></a></div></div>' +
          '<a href="#purchase" data-rel="popup" data-position-to="window" ' +
            'data-transition="pop" title="Purchase album" ' +
            'class="ui-li-link-alt ui-btn ui-btn-up-c ui-btn-icon-notext"' +
            'data-corners="false" data-shadow="false" data-iconshadow="true" ' +
            'data-wrapperels="span" data-icon="false" data-iconpos="notext" ' +
            'data-theme="c" aria-haspopup="true" aria-owns="#purchase"> ' +
          '<span class="ui-btn-inner">' +
          '<span class="ui-btn-text"></span>' +
          '<span data-corners="true" data-shadow="true" data-iconshadow="true" ' +
             'data-wrapperels="span" data-icon="gear" data-iconpos="notext" ' +
             'data-theme="d" title="" class="ui-btn ui-btn-up-d ui-shadow ' +
             'ui-btn-corner-all ui-btn-icon-notext">' +
          '<span class="ui-btn-inner">' +
          '<span class="ui-btn-text"></span>' +
          '<span class="ui-icon ui-icon-gear ui-icon-shadow">&nbsp;' +
          '</span></span></span></span></a></li></ul>'
);

我可以做得更干净，缩进更好，但你应该明白了。据我了解，这比在每一行上调用 append 更好 - 每个追加都需要相对大量的时间。

【讨论】：

【解决方案4】：

可能最干净的解决方案是制作一个 jquery 容器，通过 append/appendTo 添加所有元素，最后将整个对象插入 dom 以避免过多的 dom 操作/重绘。

但是对于您的 html 字符串，这可能会导致脚本很长...

var $list = $('<ul>');

$list.data({
    'role': 'listview',
    'split-icon': 'gear',
    // etc...
}).addClass('ui-listview ui-listview-inset ui-corner-all ui-shadow');

$li = $('<li>');
// take the base object and clone it if used multiple times
$li.clone().data({
    // fill up data, add classes etc.
}).addClass('classes').appendTo($list);

// and so on with each element, use all the beautiful jquery functions available
// there's no dom manipulation to this point, performance still fine
// now in the end, insert the object into the dom:
$list.appendTo('#uebersicht');

也许对你来说更好：

var html = '';

html += '<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">';
html += '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ui-btn-up-c">';
html += '<div class="ui-btn-inner ui-li ui-li-has-alt">';

// etc. just make a line for each tag or split it if too long

$('#uebersicht').append(html);

【讨论】：