且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

什么是高分子元素和AngularJS指令之间的区别?

更新时间:2022-06-23 20:08:51

你不是第一个问这个问题:)让我得到你的问题之前,澄清一些事情。

You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions.


  1. 聚合物的 webcomponents.js 是包含该Web组件保护伞下落入各种W3C的API几个polyfills库。它们是:

  1. Polymer's webcomponents.js is a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella. These are:


  • 自定义元素

  • HTML进口

  • <模板>

  • 暗影DOM

  • 指针活动

  • 其他

左侧导航的文档( polymer-project.org )中对所有这些平台技术的网页。每个这些页面也具有指针的各个填充工具

The left-nav in the documentation (polymer-project.org) has a page for all of these "Platform technologies". Each of those pages also has a pointer to the individual polyfill.

<链接rel =进口的href =X-foo.html> 是一个HTML导入。进口是包括在其他HTML HTML的有用工具。您可以包括<脚本> <联系方式> ,标记,或任何在导入其他

<link rel="import" href="x-foo.html"> is an HTML Import. Imports are a useful tool for including HTML in other HTML. You can include <script>, <link>, markup, or whatever else in an import.

没有链接&LT; X-富&GT; 来的X foo.html。在你的榜样,它假定&LT的自定义元素定义; X-富&GT; (如&LT;元素名称=X-foo的&GT; )是指X-foo.html定义。当浏览器看到这一定义,它注册为一个新的元素。

Nothing "links" <x-foo> to x-foo.html. In your example, it's assumed the Custom Element definition of <x-foo> (e.g. <element name="x-foo">) is defined in x-foo.html. When the browser sees that definition, it's registered as a new element.

在对问题!

什么是角和聚合物之间的区别?

我们讨论了一些这个在我们的 Q&放;视频。一般情况下,聚合物是一个图书馆,旨在使用(并展示了如何使用)Web组件。它的基础是自定义元素(例如你建立的一切是一个Web组件)和它的发展随着网络的发展。为此,我们只支持最新版本的现代浏览器的。

We covered some of this in our Q&A video. In general, Polymer is a library that aims to use (and show how to use) Web Components. Its foundation is Custom Elements (e.g. everything you build is a web component) and it evolves as the web evolves. To that end, we only support the latest version of the modern browsers.

我就用这个形象地描述聚合物的整个架构堆栈:

I'll use this image to describe Polymer's entire architecture stack:

什么是高分子元素和AngularJS指令之间的区别?

红层:我们通过一组polyfills获取明天的网页。请记住,这些库消失随着时间的推移浏览器采用了新的API。

RED layer: We get tomorrow's web through a set of polyfills. Keep in mind, those libraries go away over time as browsers adopt the new APIs.

黄色层:撒上一些糖与polymer.js。这一层是我们对如何使用只具备API的意见,共同提高。它也增加了类似的事情的数据绑定,语法糖,变化观察家,出版性质......我们认为这些东西是构建Web基于组件的应用程序很有帮助。

YELLOW layer: Sprinkle in some sugar with polymer.js. This layer is our opinion on how to use the spec'd APIs, together. It also adds things like data-binding, syntatic sugar, change watchers, published properties...We think these things are helpful for building web component-based apps.

绿色:COM prehensive的UI组件(绿色层)仍在进行中。这些都将使用所有的红色+黄色层的Web组件。

GREEN: The comprehensive set of UI components (green layer) is still in progress. These will be web components that use all of the red + yellow layers.

角指令与自定义元素?

请参阅亚历克斯·罗素的answer.基本上,暗影DOM允许构成的HTML位,但也为封装该HTML的工具。这是从根本上对网络和一些其他框架的新概念将利用。

See Alex Russell's answer. Basically, Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML. This is fundamentally a new concept on the web and something other frameworks will leverage.

并聚合物解决什么问题,AngularJS并没有或不会呢?

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

Similarities: declarative templates, data binding.

差异:角有服务,过滤器,动画等高级API,支持IE8,在这一点上,是构建生产应用程序更加健壮的框架。聚合物刚刚开始在阿尔法。

Differences: Angular has high level APIs for services, filters, animations, etc., supports IE8, and at this point, is a much more robust framework for building production apps. Polymer is just starting out in alpha.

是否有计划配合聚合物与AngularJS的未来?

他们单独的项目的。这就是说,无论是角度和灰烬队宣布他们最终会转移到使用在自己的框架底层平台API

They're separate projects. That said, both the Angular and Ember teams announced they'll eventually move to using the underlying platform APIs in their own frameworks.

^这是一个巨大的胜利海事组织。在当今世界,Web开发人员强大的工具(暗影DOM,自定义元素),构架作者也可以利用这些原语创造更好的框架。他们中的大多数目前经过大铁圈把工作做好。

^ This is a huge win IMO. In a world where web developers have powerful tools (Shadow DOM, Custom Elements), framework authors also can utilize these primitives to create better frameworks. Most of them currently go through great hoops to "get the job done".

更新:

有关于这个主题的真正伟大的文章:这里的聚合物和角度区别

There's a really great article on this topic: "Here’s the difference between Polymer and Angular"