|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/fundamentals-of-web-components/
课程评论：没有评论
课程名称：网络组件基础 课程概述：随着网络应用的不断发展，诸如 React、Vue、Angular、Svelte 等框架引入了可重用组件的功能，使得创建大型应用程序变得更加容易。本课程将介绍网络组件的概念，使学员能够创建自定义 HTML 元素，类似于其他流行的网络框架。但不同之处在于，网络组件 API 是网络标准，意味着它与现代浏览器兼容。因此，学员无需额外的构建过程或其他工具，即可在浏览器中直接运行代码，只需具备基本的 JavaScript 知识即可。 网络组件主要有三个核心 API：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。在本课程中，我们将学习并实践这三者的应用。 课程内容包括： - 如何构建自定义元素 - 如何扩展内置元素 - 使用模板提升自定义元素的渲染效率 - 理解影子 DOM 在网络组件中的角色 - 如何使用外部提供的标记组合自定义元素 - 探讨元素的样式选择 - 学习影子 DOM 中事件处理的变化，识别问题并提出解决方案 如果您希望构建不依赖第三方库的可重用网络组件，并基于网络标准开发应用程序，那么网络组件是您的最佳选择。
Web applications are evolving and frameworks like react, vue, angular, svelte and others, are bringing functionalities like reusable components to make it easier to create huge applications. With web components we can create our custom html elements, just like we do in the other popular web frameworks. But the difference is, web components api is web standard, which means it's coming with the modern browsers. So without requiring additional build process or any other tooling, we can run our code as it is in the browser. All we need is just vanilla javascript knowledge.Web components has three main APIs. Custom Elements, Shadow DOM and HTML Templates. And in this course we will learn and practice all.We will learn how we can built custom elements, how we can extend built-in elements. Also we will practice the "template" to make the rendering of our custom element more efficiently.We are going to practice the Shadow Dom to see it's role in web components. We will see how we can compose our custom element with the markup provided externally. And also we will see our styling options of our elements.And finally, we will practice, how the events are changed in shadow dom. We will see the issues and we will introduce our solutions.If you want to build re usable web components without relying onto a third party library, if you want to build applications based on the web standards, then web components is the answer.
