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”),它们中的大部分都完全相互独立,甚至可以分别下载,而不是一起打包下载:

  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这样的项目,要给他们机会,让他们带头提出那些问题并帮忙给出具有潜在竞争力的答案——在我看来,没有必要急于在这一点上进行高层次的标准化。

时间: 2024-08-23 19:13:59

Mozilla Brick:一个Web组件Polyfill库的相关文章

Web组件 – 构建商业化应用的基石

概述 Web Components(Web 组件)规范是一个新兴的技术集合,允许您在前端Web应用程序中定义已封装的自定义HTML元素. 使用Web Components,您可以创建自己声明的API来定义UI,从而创建您自己的商业化应用程序. 本文介绍了Web组件技术及其在新一代纯前端控件集 WijmoJS 中的应用. Web组件核心技术 Web组件的核心技术由以下四个标准组成: 自定义元素 Shadow DOM HTML模板 HTML导入 自定义元素 自定义元素允许您创建自己的HTML元素,可

【足迹】终于学完了web组件设计的视频课程

说来惭愧,去年,即2014年10月就接触到了这部教程: 阿当大话西游之WEB组件 (学了人家的东西,就给人家打个广告^_^) 当时一口气看了10章,最近才得闲看完了所有18章.真的是一部非常好的视频教程,其中的组件设计思想非常棒.在课程中也接触到了RequireJs,当即大为感动,真的是解决了工作中关于javascript的诸多问题.之后便着手使用requireJs重构公司所有的前端代码.项目庞大,历时漫长,期间team还做了别的项目,所以重构前端代码的工作最近才得以完成,前前后后也有9个月了.

[译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的"每个程序员必知之WEB开发". 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 问:对于一个web开发人员来说,在发布一个站点之前,他需

一个web开发人员在发布站点前你需要考虑哪些技术细节

转自http://www.xker.com/page/e2014/0520/132486.html 一个web开发人员在发布站点前你需要考虑哪些技术细节 文章转自Hedgehog博客 前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-sho

如何自学成为一个WEB前端

WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂亮酷炫,功能越来越多,越来越复杂?各种类似桌面软件的Web应用大量出现,没错,WEB前端在其中有着很大的功劳. 发展方向 WEB前端的发展迅速导致其细分出了很多细分职业,我先来说一下我了解的WEB前端的分支,欢迎各位前辈补充: 1.网页设计方向(移动和PC):主要偏向html.css.js主要是做一

作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的"每个程序员必知之WEB开发". 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 问:对于一个web开发人员来说,在发布一个站点之前,他需

自己一人如何去做一个web项目

三思而后行 当你被自己的想法激起心中豪情的时候,一定要按下心情,冷静的思考一下,思考点包括以下几个部分: 这个Web项目所需要的知识和能力是否在自己所掌握的范围内,这个是技术前提,如果项目本身技术复杂度过高,那么你在开发的时候所面对的压力就非常大,而且挫败感也很高,项目很容易夭折. 项目的需求能否清晰描绘,这一点非常重要,因为只有你能细致的把一个项目拆分成一条条需求,你才能对所有的技术实现点有个预估,也才能对项目所需要的时间做个预判. 项目是否值得做,这个是个预防针,实际上很多时候个人项目都是拍

AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件.比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的.它们到底区别在哪?我们重点来讲这个.我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别. 示例01.Web组件-直接使用 (请下载附件查看示例) 示例中

熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验. 1.说一说Servlet生命周期(非常重要) Servlet生命周期包括三部分: 初始化:Web容器加载servlet,调用init()方法 只执行一次 处理请求:当请求到达时,运行其service()方法.service()自动调用与请求相对应的doXXX