Mozilla Brick:一个Web组件Polyfill库
Web组件是一个W3C规范,它旨在使Web开发人员能够定义具有非常丰富的视觉效果和高可交互性且易于组合的小组件。Brick库提供了新的自定义HTML标签,从而抽象了用户常用接口模式。在浏览器本身支持类似标签之前,开发人员可以使用Brick。
Brick基于Mozilla的X-Tag polyfill库,因此,要运行依赖任何Brick标签的代码,开发人员需要先将window.onload替换为x-tags库的“DOMComponentsLoaded”事件:
document.addEventListener('DOMComponentsLoaded', function(){
// 在这里添加可运行代码...
});
在写作本文的时候,Brick包含13个不同的标签(“bricks”),它们中的大部分都完全相互独立,甚至可以分别下载,而不是一起打包下载:
- “导航栏(Appbar)”
- “日历(Calendar)”
- “日期选择器(Datepicker)”
- “面板(Deck)”
- “翻转框(Flipbox)”
- “图标按钮(Iconbutton)”
- “布局(Layout)”
- “滚动框(Slidebox)”
- “滚动条(Slider)”
- “选项卡(Tabbar)”
- “开关(Toggle)”
- “开关组(Togglegroup)”
- “提示框(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库的更多相关文章
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- Web组件的三种关联关系
Web应用程序如此强大的原因之一是它们能彼此链接和聚合信息资源.Web组件之间存在三种关联关系: ● 请求转发 ● URL重定向 ● 包含 存在以上关联关系的Web组件可以是JSP或Servle ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
- [翻译]怎么写一个React组件库(一)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
- 【收藏】这么多WEB组件(CSS),攒一个网站够了吧?
简言 总是喜欢简单又精致的东西,美的不繁复也不张扬.这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧? 1 表单(form)相关 1.1 输入框(i ...
- 一文读懂tomcat组件--一个web服务器的架构演化史
1. tomcat是谁? 2. tomcat可以做什么? tomcat是一个web容器,可以将web应用部署到tomcat,由它提供web服务,一个web容器中可以部署多个web应用,这些we ...
- Nginx可以说是标配组件,但是主要场景还是负载均衡、反向代理、代理缓存、限流等场景;而把Nginx作为一个Web容器使用的还不是那么广泛。
Nginx可以说是标配组件,但是主要场景还是负载均衡.反向代理.代理缓存.限流等场景:而把Nginx作为一个Web容器使用的还不是那么广泛. 用Nginx+Lua(OpenResty)开发高性能Web ...
- 如何从0开发一个Vue组件库并发布到npm
1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...
随机推荐
- python的变量作用域
import time global mark,sum def gaosi(Q): global sum,mark # 在 使用的时候防止隔离 也要声明一下 这个是全局变量 , 引用外面的值 sum+ ...
- Balance_01背包
Description Gigel has a strange "balance" and he wants to poise it. Actually, the device i ...
- Android沉浸式(侵入式)标题栏(状态栏)Status(二)
Android沉浸式(侵入式)标题栏(状态栏)Status(二) 附录1以xml写style实现了Android沉浸式(侵入式)状态栏(标题栏),同样以上层Java代码实现.在附录文章1的基础上 ...
- 30道四则运算<2>单元测试
该测试未实现除法 该测试中间多了/)两个符号,而且没有等号和回车. 该测试也没有符合除法要求 该测试也没有满足除法要求 该测试满足要求. 总结:程序中涉及到有除法的输出都有问题,多次改正未果:其他条件 ...
- Selenium - IWebDriver 控制scroll bar到底部
有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户是否阅读的标准是:滚动条是否拉 ...
- Ubuntu下安装lamp
在Ubuntu里安装PHP环境时可以用恨简单的方法,直接用tasksel命令安装. 首先要安装这个命令: sudo apt-get install tasksel 然后,sudo tasksel in ...
- 在KCloud上轻松“玩转”Docker
继CoreOS和Atomic镜像上线之后,刻通云紧跟Docker技术发展脚步,近期又推出了Ubuntu Core镜像,成为国内首家支持Ubuntu Core镜像的基础云服务商,同时也是国内唯一一家同时 ...
- 设计模式 : Template method 模板方法模式 -- 行为型
设计模式中,模板模式面向的是方法级别的流程.(不过好像世界上大部分问题,都可以抽象点.抽象点吧,最后抽象到一个方法里面吧.) 1. 一个方法,可以用来描述一个流程,这个流程涉及多个环节,不同环节可 ...
- jsonp跨域请求数据实例——手机号码查询
前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 上篇博客 ...
- 目标跟踪之Lukas-Kanade光流法
转载自:http://blog.csdn.net/u014568921/article/details/46638557 光流是图像亮度的运动信息描述.光流法计算最初是由Horn和Schunck于19 ...