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 

发表评论

Powered by WordPress.com.

Up ↑

%d 博主赞过: