Polymer元素和AngularJS指令之间有什么区别?

2020/09/25 02:41 · javascript ·  · 0评论

在“聚合物入门”页面上,我们看到了一个正在使用的聚合物示例:

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare the component by its tag. -->
    <x-foo></x-foo>
  </body>
</html>

您会注意到<x-foo></x-foo>,由platform.js定义x-foo.html

看起来这等效于AngularJS中的指令模块:

angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
    $scope.text = 'hey hey!';
})
.directive('x-foo', function() {
    return {
        restrict: 'EA',
        replace: true,
        controller: 'X-Foo',
        templateUrl: '/views/x-foo.html',
        link: function(scope, controller) {
        }
    };
});
  • 两者有什么区别?

  • Polymer解决了AngularJS没有或没有的哪些问题?

  • 将来是否有计划将Polymer与AngularJS联系在一起?

您不是第一个提出这个问题的人:)在提出您的问题之前,让我先澄清两件事。

  1. Polymer webcomponents.js是一个库,其中包含适用于Web组件的各种W3C API的多个polyfill。这些是:

    • 自定义元素
    • HTML导入
    • <template>
    • 影子DOM
    • 指针事件
    • 其他

    文档(polymer-project.org的左侧导航页面包含所有这些“平台技术”的页面。这些页面的每一个都有指向各个polyfill的指针。

  2. <link rel="import" href="x-foo.html">是HTML导入。导入是将HTML包含在其他HTML中的有用工具。您可以在导入中包含<script>,,<link>标记或其他任何内容。

  3. 没有“链接” <x-foo>到x-foo.html。在您的示例中,假设<x-foo>(例如<element name="x-foo">的Custom Element定义是在x-foo.html中定义的。当浏览器看到该定义时,它将被注册为新元素。

关于问题!

Angular和Polymer有什么区别?

我们在问答视频中介绍了其中的一些内容通常,Polymer是一个旨在使用(并显示如何使用)Web组件的库。它的基础是自定义元素(例如,您构建的所有内容都是一个Web组件),并且随着Web的发展而发展。为此,我们仅支持最新版本的现代浏览器。

我将使用此图像描述Polymer的整个体系结构堆栈:

在此处输入图片说明

RED层:我们通过一组polyfill获得明天的网络。请记住,随着浏览器采用新的API,这些库会随着时间的流逝而消失。

黄色层:在聚合物中撒一些糖。这是我们对如何一起使用规范API的意见。它还添加了诸如数据绑定,语法糖,更改观察者,已发布的属性之类的东西...我们认为这些东西对于构建基于Web组件的应用程序很有帮助。

绿色:全面的UI组件集(绿色层)仍在进行中。这些将是使用所有红色+黄色层的Web组件。

角指令与自定义元素?

参见Alex Russell的答案基本上,Shadow DOM可以组成HTML的一部分,但它也是封装HTML的工具。从根本上讲,这是Web上的一个新概念,其他框架也可以利用。

Polymer解决了AngularJS没有或没有的哪些问题?

相似之处:声明性模板,数据绑定。

区别:Angular具有用于服务,过滤器,动画等的高级API,支持IE8,目前,它是用于构建生产应用程序的更强大的框架。Polymer刚开始使用Alpha。

将来是否有计划将Polymer与AngularJS联系在一起?

他们是独立的项目也就是说,Angular和Ember团队都宣布他们最终将转向在自己的框架中使用底层平台API。

^这是IMO的一次巨大胜利。在Web开发人员拥有强大工具(影子DOM,自定义元素)的世界中,框架作者还可以利用这些原语来创建更好的框架。他们中的大多数人目前都经历了巨大的挑战,以“完成工作”。

更新:

关于这个主题,有一篇非常不错的文章:“ 这是Polymer和Angular之间的区别

对于您的问题:

将来是否有计划将Polymer与AngularJS联系在一起?

来自AngularJS的官方推特帐户:“ angularjs将使用聚合物作为其小部件。这是双赢的”

来源:https : //twitter.com/angularjs/status/335417160438542337

在此视频中,来自AngularJS的2个人讨论了这两个框架(AngularJS 1.2和Beyond)的异同。

这些链接将带您进入正确的问答页面:

1&2)由于聚合物组件在阴影域中是隐藏的树,因此对其作用域进行了范围划分。这意味着他们的风格和行为无法流血。Angular的范围不限于您创建的特定指令(如聚合物网组件)。角度指令可能会与全局范围内的某些内容冲突。IMO将从聚合物中获得的好处是我所解释的..模块化组件已经将css和JavaScript的范围扩大到了无法触摸的特定组件。不可触碰的DOM!

可以创建Angular指令,以便您可以使用多个功能对元素进行注释。在聚合物网组件中并非如此。如果要组合组件的功能,则可以将两个组件包含在另一个组件中(或将它们包装在另一个组件中),也可以扩展现有组件。请记住,主要区别仍然是每个组件都属于聚合物纤网组件。您可以跨多个组件共享css和js文件,也可以内联它们。

3)是的,据Rob Dodson和Eric Bidelman所述,Angular计划将聚合物添加到版本2+中

有趣的是,这里没有人提到作用域一词。我认为这是主要差异之一。

有很多差异,但是在创建类似于应用程序功能的模块化乐高玩具时,它们也有很多共同点。我认为可以肯定地说,Angular是应用程序框架,有一天聚合物可能会与附带指令一起生活在同一个应用程序中,主要区别是范围,但聚合物可能会替代您当前的许多指令。但是我认为Angular不能按原样工作并且也不能包含聚合物组件。

在写这篇文章时,再次通读了答案,我注意到Eric Bidelman(ebidel)在他的答案中做了某种掩饰

“ Shadow DOM可以组成HTML的一部分,但它也是封装HTML的工具。”

为了在应有的信誉上获得荣誉,我听了Rob DodsonEric Bidelman的多次采访后得到了答案但是我觉得没有用答案来表达这个人的问题,这是他想要的理解。话虽如此,我想我已经触及了他正在寻找的答案,但与Rob Dodson和Eric Bidelman相比,我绝对没有关于该主题的更多信息。

这是我收集的信息的主要来源。

JavaScript Jabber-Rob Dodson和Eric Bidelman撰写的Polymer

商店脱口秀-Rob Dodson的Web组件

聚合物是Web组件的垫片

  • Web组件 ”是HTML 5封装的一组新标准,旨在为Web应用程序提供可重用的构建块。

  • 浏览器处于实现“ Web组件”规范的各种状态,因此使用Web组件编写HTML还为时过早。

  • 可惜!高分子救援! Polymer是一个库,为您的HTML代码提供了一个抽象层,从而使其可以使用Web组件API,就好像它已在所有浏览器中完全实现一样。 这就是所谓的poly-filling,Polymer小组将此库作为webcomponents.js分发这曾经被称为platform.js btw。

但是Polymer不仅仅是Web组件的polyfill库...

Polymer还通过Elements提供了开放且可重复使用的Web组件构建块

在此处输入图片说明

所有元素都可以自定义和扩展。这些用作从社交小部件到动画到Web API客户端的所有内容的构造块。

Polymer不是Web应用程序框架

  • 聚合物更多的是库而不是框架。

  • Polymer不支持路由,应用范围,控制器等。

    • 但是它确实具有双向绑定,并且使用组件“感觉”就像使用Angular指令一样。
  • 尽管Polymer和AngularJS之间存在一些重叠,但是它们并不相同。实际上,AngularJS团队已经提到在即将发布的版本中使用Polymer库。

  • 还要注意,当AngularJS稳定时,Polymer仍被视为“出血边缘”。

  • 观看这两个Google项目的发展将非常有趣!

我认为从实际角度看,最终角度指令的模板功能以及聚合物利用的Web组件方法都可以完成相同的任务。我看到的主要区别是,聚合物利用了Web API来包含HTML的一部分,这是一种语法更正确,更简单的方法,可以实现Angular在呈现模板时以编程方式实现的功能。然而,正如已经指出的,Polymer是一个使用组件构建声明性和交互式模板的小型框架。它仅可用于UI设计,并且仅在最现代的浏览器中受支持。AngularJS是一个完整的MVC框架,旨在通过使用数据绑定,依赖项和指令使Web应用程序具有声明性。他们是两只完全不同的动物。对你的问题 在我看来,到目前为止,使用聚合物比使用angular并不会带来太大的好处,除了拥有数十个预先构建的组件外,但是仍然需要您将这些组件移植到angular指令上。但是,在将来,随着Web API变得更加先进,Web组件将完全不需要以编程方式定义和构建模板,因为浏览器将能够以类似于处理javascript或CSS文件的方式简单地包含它们。

Angular提供的MVVM(模型视图,视图模型)并不是Polymer旨在解决的问题。当您考虑比较Angular和Polymer时,Angular指令提供给您的可组合和可重用性质(自定义标签+关联的逻辑组合)是更合理的比较。Angular现在并将继续是一个更广泛的目标服务框架。

两者有什么区别?

给用户:不多。您可以同时构建出色的应用程序。

对开发人员:他们使用不同的语法,因此两种解决方案都具有相当陡峭的学习曲线。Angular已经存在了很长时间,并且拥有庞大的社区,因此很难发现尚未解决的问题。

对于建筑师:完全不同。Angular是负责您生活各个方面的应用程序框架。如果您想要类似组件的功能,它甚至还具有垂直集成的指令。另一方面,聚合物更像是按需付费。您需要一个模态的,确定的东西,您需要一个交互式小部件,没问题,您想要进行路线处理,我们可以做到这一点。Polymer还具有更高的可移植性,因为Angular需要Angular应用程序才能重用指令。Polymer的想法是成为更多模块,并且可以在其他应用程序(甚至Angular应用程序)中使用。

Polymer解决了AngularJS没有或没有的哪些问题?

聚合物是一种利用新的Web组件标准的方法。如果本地支持自定义元素,Shadow DOM和HTML导入之类的功能,则不利用它们是愚蠢的。当前,大多数Web组件功能均未得到广泛支持(当前状态),因此Polymer充当垫片或桥梁。有点像polyfill(实际上它确实使用了polyfill)。

将来是否有计划将Polymer与AngularJS联系在一起?

我们已经将Angular和Polymer一起使用了一年多。这样做的部分决定是基于Polymer团队直接向我们作出的互操作性承诺。我们已经放弃了这个想法。我们现在正朝着仅使用聚合物的方向发展。

要再次进行此操作,我们可能根本不会使用聚合物,而要等它成熟。话虽这么说,Polymer具有优点(有些很好)和缺点(有些令人沮丧),但是我认为这是另一个话题的讨论。

AngularJS 指令是一种用于制作自定义元素的方法。您可以使用自定义属性定义新的自定义标签。Polymer也可以做到这一点,但它会以一种有趣且更简单的方式进行工作.Polymer实际上并不是一个框架,它只是一个库,而是一个强大而令人惊叹的库,您可以爱上它(像我一样)。Polymer让您学习由w3c开发的本机Web组件技术,该Web浏览器最终会实现它。Web组件是未来的技术,但是Polymer让您现在就使用该技术。GooglePolymer是一个提供语法糖和polyfill用于构建的库元素和带有Web组件的应用程序。请记住,我说的Polymer不是框架,而是一个库。但是当您使用Polymer时,实际上您的框架是DOM。这篇文章是关于angular js ver 1和polymer的,我一直与他们一起工作是我的项目,我个人更喜欢Polymer而不是angularjs。但是Angular版本2与angularjs ver 1的比较完全不同。angular2中的指令具有不同的含义。

Angular指令在概念上与“自定义元素”相似,但是它们是在不使用Web组件API的情况下实现的。Angular指令是一种构建自定义元素的方法,但是Polymer和Web Components规范是基于标准的方法。

聚合物元素:

<polymer-element name="user-preferences" attributes="email">
  <template>
    <img src="https://secure.user-preferences.com/path/{{userID}}" />
  </template>
  <script>
    Polymer('user-preferences', {
      ready: function() {
        this.userID= md5(this.email);
      }
    });
  </script>
</polymer>

Angular指令:

app.directive('user-preferences', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.userID= md5(attrs.email);
    },
    template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
  };
}]);
本文地址:http://javascript.askforanswer.com/polymeryuansuheangularjszhilingzhijianyoushenmequbie.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!