深入探讨跨端、IoT 动态开发、DevOps等大前端方向热门技术话题,这里直达 了解详情
写点什么

Google 发布新一代 Web UI 库 Polymer

  • 2013 年 6 月 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 年 6 月 01 日 09:3914434
用户头像

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

关注

评论

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

位列第五大生产要素,大数据该如何突破隐私安全魔咒?

CECBC

数据挖掘从入门到放弃(五)seaborn 的数据可视化

数据社

机器学习 5月日更

url踩坑记录

ES_her0

5月日更

❄️【程序员必看系列】开源项目有盈利模式指南

浩宇の天尚

开源 程序员 盈利模式 5月日更

千万级学生管理系统的<考试试卷>存储方案

唐江

架构实战营

怎么学

Nydia

学习

网络攻防学习笔记 Day18

穿过生命散发芬芳

5月日更 网络攻防

霸榜GitHub的阿里内部Spring Boot实战文档到底有多强?

Java 架构 面试 微服务

《冰河的渗透实战笔记》电子书,442页,37万字,正式发布!!

冰河

网络安全 信息安全 渗透测试 网络攻防 互联网技术

明天重新杨帆起航

IT蜗壳-Tango

5月日更

5分钟速读之Rust权威指南(四)

码生笔谈

JavaScript rust

Unix/Linux 编程:网络编程之 线程池

赖猫

Linux Linux服务器开发 Linux网络编程

“读万卷书,行万里路”,让你收获一个不平凡的人生

小天同学

读书 成长 旅行 5月日更

并发王者课-青铜1:兵分三路-从创建线程开始

MetaThoughts

Java 多线程 高并发 Java高并发 每周二四六更新

世界电信日 | 英特尔5G赋能数字化转型的实现之道

新闻科技资讯

Python 协程

若尘

协程 Python编程 5月日更

数字化战争即将开启,区块链将成为有效防护壁垒

CECBC

Flink CEP 监测刷屏用户

五分钟学大数据

flink 5月日更

从非洲血库到热带雨林:为什么普惠联接是社会的数字化支点?

脑极体

阿里工作6年,熬到P7就剩这份学习笔记了,已助朋友拿到7个Offer

Java 程序员 架构 面试

ConcurrentHashMap

ltc

ConcurrentHashMap

架构学习笔记:架构定义

六维

架构 5月日更

浪潮云向前进一步,又向后让一步

浪潮云

云计算

Dubbo 负载均衡

青年IT男

dubbo

docker(centos系统)安装vim工具

liuzhen007

Docker 5月日更

从火星的古海洋,读懂蓝星的数据湖之变

脑极体

成功产品三要素

lenka

5月日更

Android面试题!深入理解JVM的核心知识点,值得一读!

欢喜学安卓

android 程序员 面试 移动开发

2千亿级超大模型的构建,能否突破中文场景的极限

这不科技

人工智能 nlp

JavaScript 类型化数组

空城机

JavaScript 大前端 5月日更 类型化数组

架构实战营 - 模块 4- 作业

carl

金融行业数据库架构实践与运维 | DBTalk 技术公开课第2期

金融行业数据库架构实践与运维 | DBTalk 技术公开课第2期

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