gpt4 book ai didi

javascript - Polymer 元素和 AngularJS 指令有什么区别?

转载 作者:IT老高 更新时间:2023-10-28 11:14:54 25 4
gpt4 key购买 nike

关于 polymer Getting Started页面,我们看到了一个 Polymer 的例子:

<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 没有或不会解决的问题?

  • future 是否有计划将 Polymer 与 AngularJS 结合起来?

最佳答案

你不是第一个问这个问题的人 :) 在回答你的问题之前,让我先澄清几件事。

  1. polymer webcomponents.js是一个库,其中包含多个适用于 Web Components 旗下的各种 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"> )在 x-foo.html 中定义。当浏览器看到该定义时,它被注册为一个新元素。

关于问题!

Angular 和 Polymer 有什么区别?

我们在 Q&A video 中介绍了其中的一些内容。 .一般来说,Polymer 是一个旨在使用(并展示如何使用)Web 组件的库。它的基础是自定义元素(例如,您构建的一切都是 Web 组件),并且随着 Web 的发展而发展。为此,我们仅支持最新版本的现代浏览器。

我将使用这张图片来描述 Polymer 的整个架构堆栈:

enter image description here

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

黄色层:用polymer.js 撒上一些糖。这一层是我们对如何一起使用规范的 API 的看法。它还添加了诸如数据绑定(bind)、语法糖、更改观察者、发布的属性之类的东西……我们认为这些东西有助于构建基于 Web 组件的应用程序。

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

Angular 指令与自定义元素?

参见 Alex Russell 的 answer .基本上,Shadow DOM 允许编写 HTML 片段,但它也是封装 HTML 的工具。这基本上是网络上的一个新概念,其他框架将利用这一点。

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

相似之处:声明性模板、数据绑定(bind)。

区别:Angular 具有用于服务、过滤器、动画等的高级 API,支持 IE8,在这一点上,它是构建生产应用程序的更强大的框架。 Polymer 刚刚开始处于 alpha 阶段。

future 是否有计划将 Polymer 与 AngularJS 结合起来?

他们是 separate projects .也就是说,Angular 和 Ember 团队 announced他们最终会转向在自己的框架中使用底层平台 API。

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

更新:

关于这个主题有一篇非常棒的文章:“Here’s the difference between Polymer and Angular

关于javascript - Polymer 元素和 AngularJS 指令有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18089075/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com