BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Mozilla Brick:一个Web组件Polyfill库

| 作者 Dio Synodinos 关注 3 他的粉丝 ,译者 马德奎 关注 0 他的粉丝 发布于 2013年8月31日. 估计阅读时间: 3 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Web组件是一个W3C规范,它旨在使Web开发人员能够定义具有非常丰富的视觉效果和高可交互性且易于组合的小组件。Brick库提供了新的自定义HTML标签,从而抽象了用户常用接口模式。在浏览器本身支持类似标签之前,开发人员可以使用Brick。

Brick基于Mozilla的X-Tag polyfill库,因此,要运行依赖任何Brick标签的代码,开发人员需要先将window.onload替换为x-tags库的“DOMComponentsLoaded”事件:

document.addEventListener('DOMComponentsLoaded', function(){   
// 在这里添加可运行代码... 
});

在写作本文的时候,Brick包含13个不同的标签(“bricks”),它们中的大部分都完全相互独立,甚至可以分别下载,而不是一起打包下载:

  1. “导航栏(Appbar)”
  2. “日历(Calendar)”
  3. “日期选择器(Datepicker)”
  4. “面板(Deck)”
  5. “翻转框(Flipbox)”
  6. “图标按钮(Iconbutton)”
  7. “布局(Layout)”
  8. “滚动框(Slidebox)”
  9. “滚动条(Slider)”
  10. “选项卡(Tabbar)”
  11. “开关(Toggle)”
  12. “开关组(Togglegroup)”
  13. “提示框(Tooltip)”

下面是日历标签的样子:

<x-calendar></x-calendar> 

Google非常信任Web组件,它也正在开发一个名为Polymer的Web组件polyfill库,该库试图在现有的浏览器基本结构上充分利用“影子DOM(Shadow DOM)”、“自定义元素(Custom Elements)”和“模型驱动视图(Model Driven Vies)”等未来技术。

值得一提的是,虽然在过去的一年里Web组件的发展势头看上去很好,但是Web组件规范变化很快,还有许多方面不确定。几周前,来自Google的Dimitri Glazkov在W3C邮件列表中提议,从规范中删除<element>元素。关于这一点,他们一致认为, 已拟定的<element>元素语法不够好,在实现标准化之前,应该把这个问题留给各实现库来探索,正如来自Apollo Group的Brian Kardell所说:

像x-tags和polymer这样的项目,甚至是像Ember和Angular这样的项目,要给他们机会,让他们带头提出那些问题并帮忙给出具有潜在竞争力的答案——在我看来,没有必要急于在这一点上进行高层次的标准化。

查看英文原文:Mozilla Brick: A Polyfill Library for Web Components

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT