用虚假但美观的数据填充 HTML/CSS 设计的 JavaScript 库？ [关闭]答案

【问题标题】：JavaScript library to fill HTML/CSS design with dummy but nice-looking data? [closed]用虚假但美观的数据填充 HTML/CSS 设计的 JavaScript 库？ [关闭]
【发布时间】：2015-05-26 04:34:51
【问题描述】：

假设我有一个 CSS/HTML 设计，我想将它展示给客户。我不想用 lorem ipsum 和 placehold.it 填充它，而是用更真实（或更好）的数据填充它。

我还想避免重复内容块。例如，而不是编写下面的代码：

<section>
  <article>
    <h2>Lorem ipsum title...<h2>
    <img src="http://placehold.it/200x100" align="left" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...<p>
  </article>

  <article>
    <h2>Donec a sodales urna...<h2>
    <img src="http://placehold.it/200x100" align="left" />
    <p>Nunc luctus viverra risus in molestie. Maecenas eros nisl,...<p>
  </article>

  <article>
    <h2>Phasellus nunc dolor...<h2>
    <img src="http://placehold.it/200x100" align="left" />
    <p>Pellentesque habitant morbi tristique senectus et netus...<p>
  </article>
</section>

我想这样写：

<section>
  <article repeat="3">
    <h2 title words="5"><h2>
    <img image width="200" height="200" align="left" />
    <p text words="20"><p>
  </article>
</section>

我确信我已经看到一个 JavaScript 库可以做到这一点，但我找不到它。

【问题讨论】：

想想你可以在一小时内写出这样的库。顺便说一句，这不是一个 SO 问题。
试试http://softwarerecs.stackexchange.com/。不过请务必先阅读他们的常见问题解答，您可能需要在问题中添加一些详细信息。
抱歉，我好像不知道 SO 上不允许推荐。
请注意图书馆推荐are on topic for softwarerecs.se，如果足够具体并符合他们的常见问题解答。因此，如果您愿意并稍微改写您的问题，您可以在那里提出。

标签： html css dummy-data lorem-ipsum

【解决方案1】：

如果找不到，不如创建一个。

我使用了两个在线资源来创建一个简单的内容生成器（助手）：

FillText.com API 和
PlaceHold.it 虚拟图像生成器。

/* Helpers */
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

/* Repeating stuff */
function copyFromChildren( elem ) {
    var thisBlock = $(this);
    var hasChildren = thisBlock.find('[data-dummy-repeat]');
    if ( hasChildren.length ) {
        hasChildren.each(copyFromChildren);   
    };
    var copies = parseInt( thisBlock.data('dummyRepeat') );
    if ( !isNaN(copies) && copies>0 ) {
        while(copies>0) {
            thisBlock
                .clone(true, true)
                .removeAttr('data-dummy-repeat')
                .insertAfter(thisBlock);
            copies--;
        };
    };
    thisBlock.remove();
};
$('[data-dummy-repeat]').each(copyFromChildren);

/* Dummy content from: http://www.filltext.com/ */
$('[data-dummy-content]').each(function(i) {
    var thisElem = $(this);
    var contentType = $(thisElem).data('dummyContent').split(':');
    var url = "http://www.filltext.com/?callback=?";
    switch( contentType[0] ) {
        case 'text':
            var wordsCount = contentType[1];
            $.getJSON( url, {
                'rows': 1,
                'words': '{lorem|' + wordsCount + '}'
            }).done(function( data ) {
                thisElem.html( data[0].words.capitalizeFirstLetter() );
            });
            break;
        case 'image':
            var newSrc = '//placehold.it/' + contentType[1] + 'x' + contentType[2];
            thisElem.attr('src', newSrc);
            break;
    };
    thisElem.removeAttr('data-dummy-content');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
    <article data-dummy-repeat="3">
         <h2 data-dummy-content="text:5"></h2>
        <img data-dummy-content="image:300:200" width="150" height="100" align="left" />
        <p data-dummy-repeat="2" data-dummy-content="text:20"></p>
    </article>
</section>

欢迎任何人改进代码（更多内容类型、jQuery 插件...）。 Fiddle 上也有相同的代码。

【讨论】：