jQuery插件用法: href或data-url

Question

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

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

url在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>

或

数据中的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>

Answer 1

当JavaScript不运行时，哪一个更好？作为链接的链接还是什么都不做的数据属性？

使用该版本的真实链接。让你的JavaScript 不显眼。使用渐进增强。

因此，似乎根本不需要使用JavaScript来转换DOM。只需按您希望的方式编写HTML，就可以避免JavaScript稍后重写它时的闪光灯。