Question

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

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

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

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

谢谢！

Answer 1

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

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

可以使用一行导入Polymer元素，导入将拉入其html，js和css，并在页面中注册该元素。
Polymer支持数据绑定，这意味着您通常不必编写代码来确保在某些数据更改后更新窗口小部件。当数据发生变化时，与之交互的所有小部件都会立即自动响应。
聚合物与jQuery很好地互操作，所以如果你今天有一个网站进行了很多jQuery风格的交互，你可以逐步引入聚合物元素，它们会很好地发挥作用与你的页面的其余部分。例如
- $('<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
- 等
聚合物元素的样式被封装，这意味着小部件不会弄乱页面的其余部分，而且封闭的页面不会弄乱窗口小部件的样式（尽管封闭页面可以设置它必须非常有意义的小部件的样式，只需设置像* { padding: 5px; }这样的东西就不会抛弃所有东西。

http://www.polymer-project.org/有很棒的文档（在开始之后，我强烈推荐API文档，它们非常完整且内容丰富：http://www.polymer-project.org/docs/polymer/polymer.html）

Answer 2

我之前没有使用过Polymer，但是我广泛使用了Dust和jQuery。

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

Dust和jQuery都可以一起使用。 Dust会渲染你的HTML模板，并且一如既往，jQuery将被用来操纵它们并做你通常用jQuery做的其他事情，比如监听事件并相应地处理它们。

重要的是要注意，这两者不是替代品，而是它们协同工作。灰尘不能做jQuery所做的事情而不是那样做。当你有大型模板需要部分和块时，尘埃效果非常好。

Answer 3

Polymer的核心是Polyfill平台，用于当前实施WC3 Web组件推荐以及ECMA 6的某些方面，如Object.observe（）和WeakMap。 Platform中包含了NodeBind和TemplateBinding库，它们支持可观察（双向）自定义元素数据绑定。

Dustjs是一个用于客户端和服务器端（Nodejs）的无异步逻辑的模板引擎渲染。 Dustjs中没有可观察的本机概念（大多数模板引擎就是这种情况），这意味着双向数据绑定超出了项目的范围。但是，Dustjs的PayPal路线图表明，双向数据绑定可能会在2014年底之前获得官方支持。

话虽这么说，NodeBind和observe-js是单独的repos，不一定与Polymer自定义元素实现绑定，这意味着你可以在你自己的项目中使用它们 - 这正是我所做的。

我对客户端渲染框架（如Polymer（以及某些方面，angularjs））的最大批评是它们不兼容SEO。所以我实际上将NodeBind与Dustjs结合起来，使我自己的双向数据绑定自定义元素实现派生自Polymer平台。想法是Dustjs渲染模板服务器端（甚至是客户端，如果是SPA），然后在渲染时，将Dust上下文绑定到observable，然后解析模板片段的属性和键，将它们绑定到路径映射到observable的观察者。因此，大部分任务是编写自己的解析器。好消息是您可以使用Dust解析器来帮助您的代码。坏消息是，如果你想支持任意深度，那么它远非一项简单的任务（涉及相当多的递归）。另一个非常重要的任务是在模型列表添加和减少的情况下支持路径观察者重新绑定。

最后一点：Dustjs继承提供了一种引用自定义元素的优秀方法，而不依赖于HTML Imports和像Polymer这样的ajax。

您可以这样做：

{>my-element}

仅仅作为一个部分。并在my-element.html

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

这确实需要在构建过程中进行第二步（grunt或gulp），这需要您不仅要编译外部文件，还要为您的“模板标签”解析外部文件，并将它们编译为单独的模板，这可以然后由id属性（作为模板名称）引用。

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

3 个答案: