Javascript HTML5将常用属性组合成超级属性？

我有很多按钮，看起来像：

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>

Foo
酒吧
巴兹

我想避免这么多重复；有没有办法定义某种类型的单个属性来扩展到其他几个属性？例如，它可能最终看起来像

super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';

<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>

super x='type=“button”class=“btn btn info”data toggle=“modal”data target=“#qq””；
福
酒吧
巴兹

注意。当然，这可以通过服务器端脚本实现，但我希望避免这种情况。我使用的是Bootstrap 3.3.4，这些按钮会触发Bootstrap模式。

此功能：

<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>

---

这消除了大部分重复，但我仍然想知道是否有更优雅和/或运行时效率更高的方法。

听起来您可能正在寻找客户端视图框架，如Handlebar或React.js。您可以在客户端上发送（并缓存）模板，然后绑定到从服务器检索的JSON

---

您可以使用完整的堆栈框架，如Ember.js或Angular，但这可能超出了您的需要。

谢谢，Handlebar看起来可能非常有用

$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");