装箱百万奖金,第六届全国工业互联网数据创新应用大赛火热报名中! 了解详情
写点什么

Google 发布新一代 Web UI 库 Polymer

  • 2013-06-01
  • 本文字数:1244 字

    阅读完需:约 4 分钟

在今年的 Google I/O 大会上,Google 发布了 Polymer ,它是一个使用 Web 组件构建 Web 应用的类库,同时也使用了为 Web 构建可重用组件的新的 HTML 5 标准。Polymer 为大部分 Web 组件技术提供了 polyfills 功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer 提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。
Web 组件让开发者能创建自定义和可重用的 HTML 标记。下面的例子中,是一个标记组件的框架:

复制代码
<element name="my-own-tag">
<template>
HTML elements here
</template>
<script>
// JavaScript implementing logic
</script>
</element>

鉴于许多 Web 框架通过暴露 JavaScript API 来构建用户界面,而构建用户界面实际上就是生成一堆 div 和 spans 标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个 Javscript 框架的 HTML 组件相比,Web 组件希望能减少碎片

尽管Web 组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills(译者注:polyfills 原指一种墙面填料)。 polyfill 指的是一段代码,它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能,则 polyfill 什么都不做。否则,它模拟其实现而不依赖 API。例如, webshims 库实现了 HTML5 中各种功能,包括 canvas、HTML5 表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。

Polymer 中的 polyfills 为需要使用 Web 组件成功构建应用提供了多种 Web 技术,包括:

  • HTML imports :种在其他 HTML document 中引入和重用 HTML document 的方法。
  • 自定义元素:让开发者定义和使用自定义 DOM 元素。
  • Shadow DOM :在 DOM 中提供的封装。
  • 模型驱动视图(Model Driven Views):提供象 AngularJS 的数据绑定。
  • · Web 动画:实现复杂动画的 API。
  • · Pointer 事件:对鼠标触摸和手写笔事件的封装

这些 polyfills 可以分开使用而不需要使用 Polymer 的其他部分。此外,Polymer 提供:

  • polymer.js : Polymer 的核心运行引擎,能轻易创建自定义属性和事件。
  • 一系列可重用的可视和非可视元素。

Polymer 不是第一个尝试实现 Web 组件相关标准的项目。Mozilla 在此之前启动了 X-Tag 项目——针对自定义元素标准的 polyfill。 Web UI package 使用 Google 的 Dart 语言编写了 Model Driven View 技术从而实现了自定义元素。

用户可以在 YouTube 上观看 Google I/O 大会关于Polymer 的演讲。如果用户想了解更多关于Web 组件的信息,可以观看 Google I/O 上 Web 组件的演讲。另外,用户可以在 Polymer 的网站查看导学文章和其他相关文档。

查看英文原文: Use Web Components Today With Google’s Polymer

感谢杨赛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

2013-06-01 09:3914474
用户头像

发布了 81 篇内容, 共 19.1 次阅读, 收获喜欢 2 次。

关注

评论

发布
暂无评论
发现更多内容

关于告警管理的软件,您还只知道Pagerduty吗?

睿象云

运维 告警 运维平台 智能告警 告警管理

👊 【Spring技术原理】异步编程机制以及功能分析讲解

洛神灬殇

spring springboot 异步编程 8月日更

云原生多云容器编排平台karmada上手指南

谐云

云原生 开源技术

用零代码开发应用到底要不要IT管?

明道云

模块一作业

berserker

架构实战营

浅析智慧交通有哪些应用场景?

一只数据鲸鱼

数据可视化 智慧城市 智慧交通 城市交通

CERT和CWE之间有什么联系?

鉴释

安全编码规范 cwe cert

阿里资深架构师终于把微服务架构与实践第2版PDF分享出来了

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

云小课 | 华为云KYON之VPC终端节点

华为云开发者联盟

云小课 KYON企业级云网络 VPC终端节点

使用mock模拟登录接口数据

与风逐梦

大前端 后端 Mock

微信业务架构 | 架构实战营

樊江。

架构实战营

模块一作业

当归

如何对接口参数的描述进行集中管理

CodeNongXiaoW

大前端 测试 后端 接口工具

Go- 切片的使用

HelloBug

Go 语言 切片 追加 拷贝 扩缩容

教你使用ApiPost中的全局参数和目录参数

Proud lion

大前端 测试 后端 Postman 开发工具

仿照Hystrix,手写一个限流组件

码农参上

限流 Hystrix 8月日更

关于C++中“不能返回对象引用”的思考

她的男人是程序员

Go- 切片的定义

HelloBug

slice Go 语言 切片

干货!4大实验项目,深度解析Tag在可观测性领域的最佳实践!

观测云

可观测性 dataflux tag ngix

Go- 数组

HelloBug

数组 Go 语言

打开vscode好像打开了原神?vscode原神背景推荐,比博燃

CodeNongXiaoW

vscode vscode背景 原神

阿里巴巴首发:Java核心框架指导手册1小时点击量破千万!

Java 编程 面试 程序人生 Alibaba

高可用 | Xenon 实现 MySQL 高可用架构 部署篇

RadonDB

MySQL 数据库 Xenon RadonDB

WebRTC中的RefCountedObject解析

她的男人是程序员

华为18级工程师三年心血终成趣谈网络协议文档(附大牛讲解)

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

通过明道云实现培训机构客户管理

明道云

cocoapods 的主模块如何判断子模块有没有被加载?

fuyoufang

ios swift 8月日更

来!看排名一年上升16位的ClickHouse,如何在京东落地实践

京东科技开发者

数据库 Clickhouse

Spring 配置加载

樊江。

Spring Framework

【“互联网+”大赛华为云赛道】GaussDB命题攻略:支持三种开发语言,轻松完成数据库缓冲池

华为云开发者联盟

数据库 华为云 GaussDB 互联网+ 缓冲池

如何用 Nacos 构建服务网格生态

阿里巴巴云原生

Google 发布新一代Web UI库Polymer_语言 & 开发_Zef Hemel_InfoQ精选文章