fbpx

Web 元件與 Stencil.js – 建立自訂的 HTML 元素

包含使用與不使用 StencilJS 如何建構自訂 HTML 元素 / Web 元件的完整介紹

简体中文课程介绍

從這 8.5 小時的課程,你會學到

  • 建構可重用的 HTML 元素,運用到自己的專案,或者共享這些元素給其他開發人員
  • 克服內建 HTML 元素的侷限 – 只使用 HTML、 CSSJavaScript 賦予的元素

要求

  • 需要具備基本的 JavaScript 知識( 基本語法、 DOM 基礎、物件基礎)
  • Es6 + JavaScript 知識( classes 等)將有幫助,但不是必備的

課程說明

讓我們面對現實: 你有成千上萬的 HTML 標籤( tags )可以選擇,但是一些真正有用的 (<tabs>, <side-drawer>, <modal>, …) 卻不見了。

如果你可以建構自己的 HTML 標籤( tags )?

如果不用像 Angular 這樣的框架、如 React 這樣的程式庫或者通用的 JavaScript 專家知識, 只需要一個神奇的原生 javascript 功能,稱為 “Web 元件” (或”自訂 HTML 元素”)。

Web 元件是嵌入到瀏覽器中的各種規格的組合。 開始使用這些功能是一件輕而易舉的事情,你將很快就能夠建構自己的強大和可重用的功能 (甚至在整個專案中) 自訂 HTML 元素。

這樣的自訂元素不會取代 Angular、 React 或 Vue – 相反地,你可以在任何 Web 專案中輕鬆地使用它們,包括使用這些框架或程式庫的專案。

在本課程中,你將從頭學習這個技術

但我們不會在此止步。 雖然起步相當容易,但是建立更復雜的元件將更加困難。Stencil.js 是一個工具,它通過使用諸如 TypeScriptJSX (不知道嗎? 別擔心,你會在課程中學到的!) 這樣的現代功能,使得建立這樣的原生 Web 元件變得更加容易。

具體來說,在本課程中,你將學到:

  • 如何建構具有原生瀏覽器功能的可重用、輕量級自訂的 HTML 元素
  • 如何建立所有複雜的網頁元件 – 從一個簡單的工具提示( tooltip )到模型或側抽( side drawers )
  • 如何傳遞資料到你自己的網路元件,並於其使用
  • 如何發出你自己的定製的多個事件,可以在 JavaScript 中監聽
  • 如何使用 Shadow DOM 將 CSS 樣式作用於自訂元素
  • 如何使用 Stencil.js 使開發工作流更加容易
  • 如何使用 Stencil.js 提供的許多功能來更有效地建構原生 Web 元件
  • 如何在任何專案中佈署 / 重用你自己的 Web 元件,即使這些專案有使用任何 JavaScript 框架或程式庫,如 Angular、 React 或 Vue (或者根本都沒有用到 !)

先決條件:

  • 基本的 JavaScript 知識是必備的
  • Javascript 知識( const、let、classes、…)是強烈推薦的,但不是嚴格要求的 – 課程中提供了這部分簡介以供複習
  • 不需要 JavaScript 框架知識(例如,Angular,React,Vue)
  • 不需要 TypeScript 或 JSX 知識

讓我們一起探索這項令人興奮的技術吧!

目標受眾

  • 每個有興趣建構自訂 HTML 標籤的人!
  • 希望深入瞭解可用於任何 Web 應用程式的未來性 Web 技術的學生

講師簡介

Maximilian Schwarzmüller 專業的 Web 開發者與講師 ( 更多講師主講課程介紹 )

作為 Web 開發人員的經驗

從13歲起,我不間斷地學習新的程式設計技巧和語言。 早期我只是因為好玩開始為朋友做網站。 這種熱情一直持續下去,並導致我成為一個自由的 Web 開發人員和顧問的決定。 我在這份工作上獲得的成功和樂趣很豐盛,也引燃並持續這份熱情。

我從後端的 Web 開發 ( PHP 的 Laravel、NodeJS ) 開始,漸漸也做越來越多的前端開發,在很多專案中使用 Angular 或 VueJS 2 等現代框架。 我現在兩個世界都愛!

作為一名自學的開發人員,我有機會通過攻讀工商管理碩士拓寬視野,也取得學位。 這使我能夠在一家重要的戰略諮詢公司和一家銀行工作。 這段時間大大提升了我的整體經驗和技能。

身為教練的經驗

由於自我學習成為專業人士的經驗,我真正了解在學習新知識或改進已知語言時的困難部分和難題。 這種背景和經驗使我能夠專注於最相關的關鍵概念和主題。 我有很多五星級的課程記錄,在 Udemy 有超過10萬名學生以及成功的 YouTube 頻道,是最好的證明。

無論是作為開發的指導員,還是工商管理教學,我都收到很好的反饋。 最有意義的經驗是看到人們因此找到新的、更好的工作、建立很棒的網路應用程式、獲取令人驚奇的專案,或只是在我的教學幫助下把開發網頁當成嗜好享受其中的樂趣。

課程討論專區

  • 對於這個課程有任何問題,或是想要呼朋引伴一起學習,分享學習心得,歡迎到課程討論專區留言

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

參加課程 ♥找優惠折扣碼?

Sponsored by Udemy

也許你會有興趣

 歡迎使用 e-mail 訂閱 Soft & Share 

Spread the love

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: