聚合物元素与角度指令

时间:2013-12-18 14:56:55

标签: javascript angularjs polymer

我知道之前已经提到过,最值得注意的是here

然而,答案在我看来相当抽象,我发现自己在实践中很困惑。

.vs答案似乎是:

  

Polymer(更准确地说,Shadow DOM)创建了不能   只编写HTML的一部分,但也要封装它们。这是一个   从根本上说是新功能,可以与任何其他功能一起使用   模板系统或框架,以增强他们的力量。

这并没有真正告诉我那么多,据我所知,角度指令在实践中几乎完全相同,尽管聚合物元素在性能方面可能更有效。我确信“封装”在这种情况下具有某种更深层含义,我不理解。

假设我正在开发一个AngularJS Web应用程序。何时,如何以及为什么我会使用聚合物元素而不是角度指令?

聚合物元素是否会被用于而不是角度指令,如果是的话,何时使用一个而不是另一个?或者,聚合物元素方面实施角度指令?

1 个答案:

答案 0 :(得分:32)

你真的在问两个不同的事情,“实施/构建组件与使用组件有什么不同?”

消耗组件

在可预见的未来,您一起使用。无论构建Web组件的技术/库是什么,或者供应商是由什么构建的。只需bower install(或类似)和使用对您的应用有意义的组件。

重要的是成为DOM,这意味着元素将无缝地协同工作。互操作故事很棒。这是一个绑定到Polymer元素的Angular指令的POC:http://ebidel.github.io/polymer-experiments/polymer-and-angular/together/


构建组件

目前,构建元素是另一回事。 Polymer的方法是围绕Web组件的所有内容。 Angular是在Web组件开发之前构建的,所以事情有点不同。

  • Angular指令是一种构建自定义标记/组件的方法。 Polymer和Custom elements规范是基于标准的方法。

  • 如何构建Polymer-element是声明性的。 Angular指令主要在JS中定义(能够引用模板文件)。

  • 因为Polymer元素使用Custom元素,所以继承很简单。我不确定Angular指令/

  • 中的继承故事
  • 聚合物元素使用Shadow DOM。这给了他们封装DOM和CSS。您在元素中定义的样式不会流出,页面样式也不会渗入。我可能错了,但Angular指令没有任何样式封装的概念。 Shadow DOM规范免费提供给我们这是一个难题。

  • 数据绑定概念类似

  

将根据聚合物元素实施角度指令

  • 最终,Angular将采用一些不断发展的Web组件标准。对于所有框架都是如此。 Ember刚刚制作了their 2014 plans known,其中包括网页组件。例如,Angular.dart已经使用Shadow DOM作为指令。

  • 默认情况下,聚合物元素(自定义元素)可与其他自定义元素互操作。这是因为它们只是DOM。 DOM元素可以很好地协同工作:)

希望这有帮助!