介紹 brick: 用於快速開發 webapp 的自定義標籤組件

https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/

也許你曾據說過這個另人激動的 web 組件。要是沒有的話，也許該看看是什麼讓它如此振奮人心。長話短說，web 組件開啓了一個的新領域，讓開發者自定義可重用的 HTML 標籤。不須要多餘代碼來初始化的 javascript 插件和模板，樣式。

遺憾的是並不是全部瀏覽器都原生支持該規範，不過這並不意味着開發者如今沒法享受組件概念的好處，感謝 google's Polymer和 Mozilla's x-tag （X-Tag 和 Polymer 共享一樣的底層，web 組件）

咱們自豪的宣佈釋出測試版 Brick，一個跨瀏覽器，易用，靈活，語意化的 web 組件庫，提供新的自定義 HTML 標籤抽象成常見的用戶界面模式。基於 Mozilla 的 x-tags，Brick 能讓你作到插入簡單的 HTML 標籤便可調用控件，好比滑動條或日期選擇器。減小你花在思考如何關聯 HTML/CSS/Javscript 上的時間以加速開發過程。

把 Brick 用起來

說你想要在應用裏實現一個跨瀏覽器，移動設備友好的日曆控件。目前的 JavaScript 插件，好比 jQuery UI 須要插入無關語意的標記到你的 HTML 並以 JavaScript 明確的初始化和管理。然而有了 Brick 只須要簡單的添加一些有別於原生標籤的自定義 HTML 標籤便能實現那些組件了。

在咱們的日曆示例中，只須要在應用中引用了庫裏的 CSS 和 Javascript 文件，再添加以下標籤

<x-calendar></x-calendar>

就建立了一個像這樣 DOM 元素

想要修改組件行爲好比添加導航控制或日期預選？就像其餘的原生標籤同樣，只要修改標籤屬性就能改變組件行爲！

<x-calendar controls chosen='2012-05-17'></x-calendar>

可用的 Bricks

在寫這片文章的時候，Brick 由 13 個不一樣標籤構成，大部分都是與其餘標籤徹底獨立的，你能夠單獨下載其中的部分來代替整個包。

一些標籤被抽象成了複合控件，好比：

<x-calendar> (calendars, as seen from the example)

<x-deck> (a cyclable slide gallery)

<x-tooltip> (exactly as it sounds).

其餘依靠修復跨瀏覽器實現的非全局原生支持元素，例如

<x-slider>

<x-datepicker>

都用來支持 <input type="range"> 和 <input type="date">。還有一些結構組件用於簡化樣式和標記，例如 <x-layout> 保證內容和頭尾不須要樣式化的標記也能填充到容器元素。

每一個標籤都有一些擴展屬性/JavaScript 接口，樣式也徹底能夠符合應用的風格

用 Bricks 開始創造

想在你的應用中開始用組件，前去 <mozilla.github.io/brick> 下載發行包，查看示例，閱讀可用標籤的文檔吧。也能夠選擇瀏覽 Brick Github 頁面 來查看源代碼或做出貢獻！

這個庫還處於測試版本， 因此咱們很是重視全部的用戶反饋！Brick 已經有了一些實例 ，而咱們很樂於看到你是如何使用它的！