「網頁元件」將會變更您在建構網頁時知道的一切資訊。第一,網路會有低階 API,除了可以建立自己的 HTML 標記,還封裝邏輯和 CSS。再也不需要使用通用樣式表湯或樣板程式碼!這個充滿勇氣的新世界,就是一切元素,
我在 DotJS 的會談中,詳細介紹了網頁元件的功能,以及如何使用現代化工具建立這類元件。我會向各位說明 Yeoman 的工作流程,運用 Polymer 簡化建立網頁應用程式的過程。Polymer 是一組聚合物和糖,可立即在新型瀏覽器中使用 Web 元件開發應用程式。
建立自訂元素和安裝其他人建立的元素
在這場講座中,您將瞭解以下內容:
- 關於撰寫網頁元件的四種規格:自訂元素、範本、Shadow DOM 和 HTML 匯入。
- 如何使用 Bower 定義自己的自訂元素並安裝其他人建立的元素
- 省下編寫 JavaScript 的時間,將更多心力投入建構網頁
- 使用新型前端工具 (Yeoman) 運用 Polymer 搭配產生器聚合物,為應用程式
- Polymer 超級大變如何建立網頁元件。
例如,如要安裝 Polymer 的 Web Component polyfill 和程式庫本身,您可以執行此單線器:
bower install --save Polymer/platform Polymer/polymer
這麼做會新增 bower_components
資料夾並新增上述套件。--save
會將這些內容加入應用程式的 bower.json 檔案。
之後,如果您想要安裝 Polymer 的摺疊元素,您可以執行:
bower install --save Polymer/polymer-ui-accordion
然後匯入到應用程式中:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
為了節省時間,您可以使用下列這一行指令列使用 Yeoman 製作全新的 Polymer 應用程式,並納入所有您需要的依附元件、樣板程式碼和用於應用程式最佳化的工具:
yo polymer
額外逐步操作說明
我也錄下了 30 分鐘的 Polymer Jukebox 應用程式逐步操作說明,
獎勵內容已計入精選內容:
- 「一切為元素」的意思
- 如何使用 Bower 安裝 Polymer 平台的 polyfill 和元素
- 使用 Yeoman 發電機和子產生器製作 Jukebox 應用程式
- 瞭解透過樣板排出的平台功能
- 我如何透過 Angular 應用程式進行功能轉移至 Polymer。
我們也使用 Yeoman 子產生器來製作新的 Polymer 元素,例如為我們執行的元素 foo
建立樣板:
yo polymer:element foo
這些提示會提示我們是否要自動匯入元素,無論是否必須使用建構函式,以及某些其他偏好設定。
兩場演講中的應用程式最新來源現已列在 GitHub 上。我又重構一個,讓它更有條理、更容易閱讀。
應用程式預覽:
其他資訊
簡單來說,Polymer 是 JavaScript 程式庫,可讓網頁元件在我們等待原生實作的同時,在新版網路瀏覽器中運作。現代的工具可改善運用這些機制的工作流程,因此在開發自家代碼時,也許可以試試看 Yeoman 和 Bower。
另有以下幾篇文章值得一探究竟: