写点什么

Mozilla Brick:一个 Web 组件 Polyfill 库

  • 2013-08-30
  • 本文字数:875 字

    阅读完需:约 3 分钟

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 邮件列表中提议,从规范中删除元素。关于这一点,他们一致认为, 已拟定的元素语法不够好,在实现标准化之前,应该把这个问题留给各实现库来探索,正如来自 Apollo Group 的 Brian Kardell 所说:

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

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

2013-08-30 03:071908
用户头像

发布了 256 篇内容, 共 85.2 次阅读, 收获喜欢 12 次。

关注

评论

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

前端培训机构应该怎么选

小谷哥

React源码分析3-render阶段(穿插scheduler和reconciler)

goClient1992

React

每日一题之请描述Vue组件渲染流程

bb_xiaxia1998

Vue

RecSysOps: 大规模推荐系统运维最佳实践

俞凡

架构 最佳实践 netflix 大厂实践

clickhouse准实时数仓能力探索

水滴

实时数仓 OLAP 数仓 10月月更 clickhosue

每日一题之Vue的异步更新实现原理是怎样的?

bb_xiaxia1998

Vue

手写JavaScript常见5种设计模式

helloworld1024fd

JavaScript

如何在 Goerli 网络中获取测试 ETH

devpoint

以太坊 Goerli 测试网络

吃透这份Java面试精选题解,我轻松拿到了字节跳动offer

Geek_0c76c3

Java 数据库 程序员 架构 开发

验证二叉搜索树

掘金安东尼

算法 10月月更

极客时间架构训练营模块二作业

李晨

架构

通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式

汪子熙

typescript 前端开发 angular web开发 10月月更

面试官:请实现Javascript发布-订阅模式

helloworld1024fd

JavaScript

java工程师培训机构哪里好

小谷哥

web前端开发培训机构哪个好

小谷哥

React源码分析1-jsx转换及React.createElement

goClient1992

React

Vue项目处理错误上报如此简单

茶无味的一天

Vue 异常捕获

你的方案逻辑自洽吗?

老张

测试方案 思维逻辑

Collections之Arraylist源码解读(六)

知识浅谈

ArrayList 10月月更

js函数柯里化-面试手写版

helloworld1024fd

JavaScript

React源码分析2-深入理解fiber

goClient1992

React

Python 3.12 目标:还可以更快!

Python猫

Python

每日一题之Vue数据劫持原理是什么?

bb_xiaxia1998

Vue

ESP32-C3 应用 篇(实例二、通过蓝牙将传感器数据发送给手机,手机端控制 SK6812 LED)

矜辰所致

蓝牙 ESP32-C3 10月月更

React源码分析4-深度理解diff算法

goClient1992

React

Redis--Redis持久化方式

Java学术趴

10月月更

什么是核心交换机、汇聚交换机、接入交换机,它们之间有啥区别?

wljslmz

交换机 网络设备 通信技术 10月月更

高频js手写题之实现数组扁平化、深拷贝、总线模式

helloworld1024fd

JavaScript

web前端开发培训机构比较好的是哪家

小谷哥

线下培训机构哪个比较靠谱?

小谷哥

Redis--Redis事务及错误处理方式

Java学术趴

10月月更

Mozilla Brick:一个Web组件Polyfill库_JavaScript_Dio Synodinos_InfoQ精选文章