javascript - 使用 jQuery vs Polymer vs Dust.js 创建和重用自定义元素

Question

我已经编写了一些要在我的 Web 应用程序中使用的小部件，我希望能够在整个应用程序中插入这些小部件，而无需粘贴大块的小部件代码。到目前为止，我一直在编写自定义 HTML 标签并使用 jQuery 选择器和 CSS 来填充和设置我的标签的样式。最终结果允许我写 <myTag></myTag>页面上的任何位置，并显示我的自定义小部件。

最近，我了解了 Dust JS 和 Google 的 Polymer 项目。我的理解是，Dust 可以让我编写一个模板，并用我的内容“交换”模板的一部分，而 Polymer 可以让我创建自定义 HTML 标签，就像我一直在尝试做的那样，并将它们放在任何我想要的地方喜欢。

使用 Dust 或 Polymer 对我有好处吗？这两个选项与仅使用 jQuery 选择我的标签并插入我的小部件/样式之间有什么区别？显然，这是三个截然不同的库/框架，但在我看来，在我的用例方面存在一些重叠。如果我错了，请纠正我。

编辑:假设我有一个普通的旧 HTML 页面。我要解决的问题是什么会阻止我使用 {myCustomWidget}在 Dust 中在整个应用程序中“插入”我的小部件，而不是这可能不是标准用法的事实？同样，为什么我要使用 Polymer 为我的小部件创建“快捷方式”而不是使用 jQuery 选择器？

谢谢!

Answer 1

我对 Dust 知之甚少，但我相当大量地使用了 jQuery 和 Polymer。具有更多 Dust 经验的人应该完全权衡。看起来 Dust 的主要优势之一是它专为高效的服务器端渲染而设计。它也是格式不可知的，而 jQuery 和 Polymer 都是专门用于 HTML。

Polymer 专为创建可轻松重用的封装小部件的用例而设计。与使用 jQuery 滚动您自己的系统相比，它有一些优势:

• 一个Polymer元素可以一行导入，导入会拉入它的html、js和css，并在页面中注册该元素。

• Polymer 支持数据绑定(bind)，这意味着您通常不必编写代码来确保在某些数据更改后更新小部件。当数据发生变化时，所有与之交互的小部件都会立即自动响应。

• Polymer 与 jQuery 的互操作性非常好，因此如果您现在的网站正在执行大量 jQuery 样式的交互，您可以逐渐引入 Polymer 元素，它们将与您页面的其余部分很好地配合。例如

  • $('<my-slider>').appendTo('body') // append the slider widget to the page
  • $('my-slider').attr('value') // get the current value of the slider
  • $('my-slider').attr('value', 100) // set the value of all sliders
  • 等等

• polymer 元素的样式是封装的，这意味着小部件不会用其 CSS 弄乱页面的其余部分，并且封闭页面也不会弄乱小部件的样式(尽管封闭的页面可以设置小部件的样式，它必须是有意为之的，只需设置类似 * { padding: 5px; } 的东西就不会丢掉所有东西)。

http://www.polymer-project.org/ 上有很棒的文档(在开始之后，我强烈推荐 API 文档，它们非常完整且信息丰富:http://www.polymer-project.org/docs/polymer/polymer.html)