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:一个Web组件Polyfill库的更多相关文章

  1. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  2. Web组件的三种关联关系

    Web应用程序如此强大的原因之一是它们能彼此链接和聚合信息资源.Web组件之间存在三种关联关系: ●  请求转发 ●  URL重定向 ●  包含 存在以上关联关系的Web组件可以是JSP或Servle ...

  3. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  4. 【万字长文】从零配置一个vue组件库

    简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...

  5. [翻译]怎么写一个React组件库(一)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

  6. 【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

    简言 总是喜欢简单又精致的东西,美的不繁复也不张扬.这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧? 1 表单(form)相关 1.1 输入框(i ...

  7. 一文读懂tomcat组件--一个web服务器的架构演化史

    1. tomcat是谁?     2. tomcat可以做什么? tomcat是一个web容器,可以将web应用部署到tomcat,由它提供web服务,一个web容器中可以部署多个web应用,这些we ...

  8. Nginx可以说是标配组件,但是主要场景还是负载均衡、反向代理、代理缓存、限流等场景;而把Nginx作为一个Web容器使用的还不是那么广泛。

    Nginx可以说是标配组件,但是主要场景还是负载均衡.反向代理.代理缓存.限流等场景:而把Nginx作为一个Web容器使用的还不是那么广泛. 用Nginx+Lua(OpenResty)开发高性能Web ...

  9. 如何从0开发一个Vue组件库并发布到npm

    1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...

随机推荐

  1. HDOJ-三部曲一(搜索、数学)-1012-Shredding Company

    Shredding Company Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) T ...

  2. hdoj 2059 :龟兔赛跑 (DP)[转]

      转的别人的找了很多就这个比较好理解.   Problem Description 据说在很久很久以前,可怜的兔子经历了人生中最大的打击——赛跑输给乌龟后,心中郁闷,发誓要报仇雪恨,于是躲进了杭州下 ...

  3. 作业2-浅谈数组求和java实验

              这次作业呢,我是用java来写的,虽然java只是自己假期里看的一点点,但是人总是要接触新事物的,应该不断向前.          说明:这次作业有一个遗憾,就是我花了一个下午真真 ...

  4. Unity3D ShaderLab压缩混合纹理贴图

    Unity3D ShaderLab压缩混合纹理贴图 纹理可以用于存储大量的数据,我们可以把多个图像打包存储在单一的RGBA纹理上,然后通过着色器代码提取这些元素, 我们就可以使用每个图片的RGBA通道 ...

  5. 第三周总结PSP日志文件

    项目计划 时间记录 缺陷记录 结对编程伙伴:李妍 20133099 博客地址:http://www.cnblogs.com/liyan-luckygirl/

  6. mysql锁表机制及相关优化

    (该文章为方便自己查阅,也希望对大家有所帮助,转载于互联网) 1. 锁机制 当前MySQL支持 ISAM, MyISAM, MEMORY (HEAP) 类型表的表级锁,BDB 表支持页级锁,InnoD ...

  7. Nullsoft教程 NSIS初学者图文教程一

    Nullsoft教程 NSIS初学者图文教程一 来源:互联网 作者:佚名 时间:03-29 00:34:33 [大 中 小] Nullsoft Installation System(nsis) 是一 ...

  8. document操作

    1.windows对象操作 事件两个参数sender:代表事件源,即谁触发的事件e:代表事件数据load(sender,e)事件是一个特殊的委托(代理)2.document对象操作找元素:1.根据id ...

  9. 2016年11月3日JS脚本简介数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6.布尔型数据:bool 7.对象类型:object 8.二进制:binary 语言类型: 1.强类型语言:c++ c c# java 2.弱类型语

    数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6 ...

  10. UVa 10120 - Gift?!

    题目大意 美丽的村庄里有一条河,N个石头被放置在一条直线上,从左岸到右岸编号依次为1,2,...N.两个相邻的石头之间恰好是一米,左岸到第一个石头的距离也是一米,第N个石头到右岸同样是一米.礼物被放置 ...