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

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

，并显示我的自定义小部件

最近，我了解了Dust JS和谷歌的聚合物项目。我的理解是，Dust允许我编写模板，并将模板的一部分与我的内容“交换”，而Polymer允许我创建自定义HTML标记，就像我一直尝试的那样，并将它们放置在我想要的任何地方

使用灰尘或聚合物对我有好处吗？这两个选项与简单地使用jQuery选择我的标记并插入我的小部件/样式有什么区别？显然，这是三个截然不同的库/框架，但在我看来，在我的用例中似乎有一些重叠。如果我错了，请纠正我

编辑：假设我有一个普通的旧HTML页面。我想问的问题是，除了这可能不是标准用法之外，是什么阻止我在Dust中使用

{myCustomWidget}

在整个应用程序中“插入”我的小部件？类似地，为什么我要使用Polymer为我的小部件创建“快捷方式”，而不是使用jQuery选择器

---

谢谢

我对灰尘一无所知，但我已经大量使用了jQuery和Polymer。有更多灰尘经验的人应该完全参与进来。看起来Dust的主要优点之一是它是为高效的服务器端渲染而设计的。它也是格式不可知的，而jQuery和Polymer都专门用于HTML

Polymer是为创建易于重用的封装小部件而设计的。与使用jQuery运行自己的系统相比，它有一些优势：

• 一个聚合元素只需一行就可以导入，导入过程将引入其html、js和css，并在页面中注册该元素

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

• Polymer与jQuery的互操作非常好，因此，如果你有一个网站现在正在进行大量jQuery风格的交互，你可以逐步引入Polymer元素，它们将很好地与你页面的其余部分交互。e、 g

  • $（“”）.appendTo（'body'）//将滑块小部件附加到页面上

  • $（'my-slider'）.attr（'value'）//获取滑块的当前值

  • $（'my-slider'）.attr（'value'，100）//设置所有滑块的值

  • 等
• 聚合元素的样式是封装的，这意味着小部件不会用它的CSS弄乱页面的其余部分，而封闭页面也不会弄乱小部件的样式（虽然封闭页面可以为小部件设置样式，但它必须是相当有意的，只需设置类似于

  *{padding:5px；}

  不会把所有东西都扔掉）

---

在上有很棒的文档（在开始使用之后，我强烈推荐API文档，它们非常完整且信息丰富：）

我以前没有使用过Polymer，但我已经广泛使用了Dust和jQuery

Dust只是一个模板库，就像、和其他无数模板库一样。它是用javascript编写的，可以与NodeJS一起使用，如果您正在构建客户端应用程序，也可以轻松地在浏览器中运行

Dust和jQuery都可以一起使用。Dust将呈现您的HTML模板，一如既往，jQuery将用于操作它们，并执行通常使用jQuery执行的任何其他操作，例如侦听事件并相应地处理它们

---

需要注意的是，这两种方法不是替代方法，而是共同作用的。Dust不能做jQuery做的事情，也不应该做。当您有需要分部和块的大型模板时，Dust工作得非常好。

在其核心，Polymer是一个polyfills平台，用于当前WC3 web组件建议的实现以及ECMA 6的某些方面，如Object.observe（）和WeakMap。该平台包括NodeBind和TemplateBinding库，它们支持可观察（双向）自定义元素数据绑定

Dustjs是用于客户端和服务器端（Nodejs）的异步无逻辑模板引擎 翻译Dustjs中没有可观测的本机概念（大多数模板引擎都是如此），这意味着双向数据绑定不在项目范围之内。然而，Dustjs的PayPal路线图表明，双向数据绑定可能在2014年底获得官方支持

也就是说，NodeBind和observejs是独立的repo，不一定与Polymer自定义元素实现绑定，这意味着您可以在自己的项目中使用它们——这正是我所做的

我对Polymer（在某些方面还有angularjs）等客户端渲染框架的最大批评是它们与SEO不兼容。因此，我实际上将NodeBind与Dustjs结合起来，创建了自己的双向数据绑定自定义元素实现，该实现源自Polymer平台。其思想是Dustjs在服务器端（甚至客户端，如果SPA）呈现模板，然后在呈现时，将Dust上下文绑定到可观察对象，然后解析属性和键的模板片段，将它们绑定到映射到可观察对象的路径观察者。因此，大部分任务是编写自己的解析器。好消息是，您可以使用Dust解析器来帮助编写代码。坏消息是，如果你想支持任意深度，那就远远不够了

{>my-element} 

<my-element>
<ui-template id="my-element-frag">...</ui-template>
</my-element>