jQuery 插件用法：href 或 data-url答案

【问题标题】：jQuery plugin usage: href or data-urljQuery 插件用法：href 或 data-url
【发布时间】：2016-05-12 08:21:22
【问题描述】：

我正在创建一个 jQuery，它将一些 li 转换为文件夹图块。

我无法确定哪个更适合插件使用：

href 中的网址

<ul id="folders">
    <li><a href="http://ggg.net/content/?folder=hospital">Hospital Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=school">School Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=house">House Folder</a></li>
</ul>

或

data-url中的url

<ul id="folders">
    <li data-url="http://ggg.com/content/?folder=hospital">Hospital Folder</li>
    <li data-url="http://ggg.com/content/?folder=school">School Folder</li>
    <li data-url="http://ggg.com/content/?folder=house">House Folder</li>
</ul>

插件启动后的输出HTML：

<div id="folders">
    <div class="row">
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=hospital">
                <i class="fa fa-folder"></i>
                <p>Hospital Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=school">
                <i class="fa fa-folder"></i>
                <p>School Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=house">
                <i class="fa fa-folder"></i>
                <p>House Folder</p>
            </a>
        </div>
    </div>
</div>

【问题讨论】：

这个data-url 的目的是什么以及你将如何使用它？

标签： jquery html jquery-plugins

【解决方案1】：

When the JavaScript doesn't run，哪个更好？作为链接工作的链接或什么都不做的数据属性？

使用带有真实链接的版本。让你的 JavaScript unobtrusive。使用progressive enhacement。

就此而言，似乎根本不需要使用 JavaScript 来转换 DOM。只需按照您希望它结束的方式编写 HTML，就可以避免 Flash，因为 JavaScript 稍后会重写它。

【讨论】：