web网页制作模板 web制作网站 收藏 0

手把手教你用Web Components开发一个跨框架的模态框

有些知识点，比如说Web Components, 自己平时根本用不到，如果不刻意学习和了解，自己的知识体系就会产生盲区，可是每个人的知识盲区那么多，扫的过来嘛。对于这一点，我们要抱有积极的心态，少除一个就少一个。可是要扫除的技术盲区那么多，为什么要优先选择扫除它？这一点看个人偏好，没有标准答案。但有一个大方向是确定的，如果想在技术的道路上走得更远，就得不断清除阻碍自己前行的障碍拓宽自己的技术视野。废话不多说了，现在我们进入今天的主题。

Web Components 是一组标准，用于创建可重用的、封装良好的自定义元素，能够与标准的 HTML 元素无缝集成。Web Components 使开发者能够定义自己的 HTML 标签，这些标签具有独立的样式和行为，从而增强了组件的可复用性和模块化程度。Web Components 由以下三项技术组成：

Custom Elements（自定义元素） ：

• 允许开发者定义自己的 HTML 元素，并赋予这些元素自定义的行为。
• 通过 customElements.define 方法注册自定义元素。
• 自定义元素具有生命周期回调方法，例如 connectedCallback（挂载）、disconnectedCallback（卸载）、attributeChangedCallback(属性改变) 等。

Shadow DOM（影子 DOM） ：

• 提供了一种封装组件内部 DOM 和样式的方法，使其与外部 DOM 和样式隔离。
• 使用 attachShadow 方法创建一个影子 DOM 根节点。
• 影子 DOM 内部的样式和结构不会影响外部的 DOM，反之亦然。

HTML Templates（HTML 模板） ：

• 提供了一种定义可重用 HTML 结构的方法，这些结构在页面加载时不会立即呈现。
• 使用 <template> 标签定义模板内容。
• 模板内容在通过 JavaScript 克隆并插入到 DOM 中。

Web Components技术是一组让开发者能够创建可重用的、封装良好的自定义HTML元素的标准。使开发者能够创建高度复用、独立、封装良好的组件，从而提高开发效率和代码质量。下面是一些典型的场景：

1. 设计系统和组件库

许多公司和团队使用Web Components来构建设计系统和组件库。这些系统和库允许在不同项目中复用一致的UI组件，从而保持设计的一致性和开发的高效性。如Salesforce的Lightning Web Components、Ionic Framework中的Stencil。

1. 跨框架组件共享

Web Components可以在不同的前端框架（如React、Angular、Vue）中无缝使用。这使得开发者能够创建独立于框架的组件，从而提高组件的复用性。在一个项目中使用React构建大部分页面，同时使用Web Components构建特定的独立组件，比如日期选择器或地图。

1. 微前端架构

在微前端架构中，不同团队可以独立开发、部署和维护前端应用的不同部分。Web Components使得这些独立的部分可以以组件的形式集成到一个整体的应用中，而不会互相干扰。如一个电商网站的不同模块（如购物车、支付、用户评论）由不同团队开发，并以Web Components的形式集成。

1. Web Widgets和插件

Web Components非常适合构建可以嵌入到任意网页中的小部件和插件，比如聊天窗口、表单验证、广告模块等。这些小部件通常需要高度的封装性和独立性，以避免与宿主页面的冲突。如第三方客服聊天窗口、嵌入式视频播放器。

1. 数据可视化

创建数据可视化组件，如图表、地图、数据表等，这些组件可以独立于具体的应用环境，在不同的项目中重用。如使用D3.js或其他图表库创建的自定义元素，用于显示动态数据图表。

1. 定制表单控件

构建复杂且可复用的表单控件，如日期选择器、颜色选择器、富文本编辑器等。这些控件可以被封装为自定义元素，便于在不同表单中复用。如一个自定义的富文本编辑器，可以用于博客系统、内容管理系统等多个场景。

1. Web应用的组件化开发

在开发大型Web应用时，使用Web Components可以实现组件化开发，使得应用结构更清晰，组件更易于测试和维护。如在线文档编辑器中的各种工具栏和编辑器组件，每个都封装为独立的Web Component。

模态对话框是Web应用中常见的UI组件，可以用于显示重要的消息、表单或确认对话框。我们通过用web components技术创建一个自定义的模态对话框组件，演示一下web components的使用方法。

将模板和自定义元素的定义放在一个JavaScript文件 my-modal.js中。

• 创建了一个模板 template，其中包含了模态对话框的结构和样式。 注意模板有三个插槽，可以让我们自定义模态框的标题，内容和底部区域。
• 定义了一个 MyModal 类，继承自 HTMLElement。
• 在 constructor 中使用 Shadow DOM 绑定模板内容。
• 实现了打开和关闭模态对话框的方法，以及处理相关的事件。

在HTML文件中通过 <script> 标签引入上述JavaScript文件，并使用自定义的模态对话框组件的插槽功能定制内容。

• 使用 <script src=\”my-modal.js\” defer></script> 引入自定义元素的定义文件。
• 使用 <my-modal> 自定义元素，并通过 slot 插槽填充自定义的内容。
• 使用JavaScript控制按钮的点击事件，调用自定义元素的方法来打开和关闭模态对话框。

至此，我们实现了一个功能完整的模态对话框组件，并且能够在不同的页面中复用。

使用web components开发了一个模态框之后，我们发现Web Components的一些不方便之处，比如说template的定义无法单独写在一个html文件中，必须用模版字符串包裹起来，不优雅。另外，我们习惯使用框架组件之后，发现Web Component和原生dom开发一样，不支持响应式数据，api相对繁琐等。这可能是web components不是特别热门的原因。可是有一种场景，特别适合用web components。就是一些很复杂的跨开发框架的组件，比如说日历组件，富文本编辑器，复杂的图标和表单等。总体说来，web components还是有用武之地的。有没有感觉，多了解一项技术，开发的时候就多了一分灵活性，所以说技多不压身。

手把手教你用Web Components开发一个跨框架的模态框原文链接：https://juejin.cn/post/7371319684842340363

还在从头开发Web项目？这些模板请收下！

在过去的日子里，从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员，可以用很少的精力创建一个不错的网页，然后把它放在网络服务器上，就搞定了。比如：

当然，你可以选择这种创建方式，但有一些不错的改变，你可以试试。随着互联网的速度要求越来越快，浏览器变得越来越标准化和强大，网站的规模和复杂性也越来越多，即便是有经验的设计师都会使用具有高级功能的设计工具和代码编辑器来使开发过程更顺利。

如今，很少有程序员从头开始设计web网页了。大多数程序员都使用预制模板设计，自定义适合其内容管理系统的选择。即使是构建复杂Web应用程序的程序员也依赖于模板库。

但是，如果要为内容管理系统或静态站点生成器构建新模板，该怎么办？如果想使用单个目标网页或少量不太可能经常更改的静态网页构建简单网站，该怎么办？如果要编写JavaScript应用程序但不想使用复杂的框架或库来构建最终输出怎么办？

对我来说，最重要的是控制。随着时间的推移，网页越来越肥胖。程序员进行web开发时，应该以内容为重。问问自己，真的需要加载这个页面时显示这样的网络字体吗？必须用jQuery，还是可以用几行Vanilla JS完成同样的事情？

使用HTML模板和框架可以帮助程序员实现标准化，易于使用的布局网格，以及现代化的功能。与此同时，它们还很简单。这里有三个开源的HTML5模板以供参考。

1、Bootstrap

Twitter的Bootstrap也许是创建新网页最著名的模板框架之一。它的无所不在已经导致了网页设计界的反弹，Bootstrap很简单，几乎完全没有定制的实现。

Bootstrap可以轻松创建响应式设计，并具有许多开箱即用的功能：从图标到样式输入，并将标准化带到许多常见的页面元素，从breadcrumbs到警报到分页，同时还有大量现成的主题。

2、HTML5 Boilerplate

HTML5 Boilerplate包括大部分程序员会用到的元素，对很多项目开箱即用：分析片段以及一些默认的CSS和JavaScript模板。

HTML5 Boilerplate相当轻便，如果你不需要某个特定组件，很容易就可以剪掉。如果你在追求极简主义和功能全面之间的平衡，HTML5 Boilerplate可能是最佳选择。

3、Skeleton

Skeleton是一堆框架中最轻的。如果曾经使用过Web框架，并且发现它们太笨重，或者只是为了满足需要，可以考虑使用Skeleton来处理：一个简单的网格，格式很好的表单，列表，排版等基本要素，跨浏览器支持。

使用一些不错的模板和编辑器，程序员不需要复杂的JavaScript框架来构建一个简单的前端，无论是传统的页面还是轻量级Web应用程序。如果这三个都不满意，还可以考虑Initializr，一个可以预配置HTML5 Boilerplate的开源Web应用程序。

你最喜欢的web设计模板或框架是什么呢？你有哪些很棒的web设计方法呢？欢迎评论区交流

第四节：SpringBoot中web模版数据渲染展示

在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 。在这里我们演示一下从后台返回数据渲染到前端页面的项目案例.

SpringBoot是通过模版引擎进行页面结果渲染的，官方提供预设配置的模版引擎主要有

• Thymeleaf
• FreeMarker
• Velocity
• Groovy
• Mustache

我们在这里演示使用Thymeleaf和FreeMarker模板引擎。

Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。

Thymeleaf 的主要目标是为你的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而加强开发团队的协作。

凭借 Spring Framework 的模块、与你最喜欢的工具的大量集成以及插入你自己的功能的能力，Thymeleaf 是现代 HTML5 JVM Web 开发的理想选择——尽管它还有更多功能。

• Developer Tools中的Spring Boot DevTools
• Web中的Spring Web
• Template Engines 中的Thymeleaf

也可以直接在pom.xml中引入thymeleaf依赖

src/main/resources/templates/index.html

com.rumenz.lession4.controller.ThymeleafRumenController

浏览器访问http://127.0.0.1:8080/index

FreeMarker是一款模板引擎，即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。

src/main/resources/templates/freemarker.html

src/main/resources/application.properties,指定模板文件的后缀。

com.rumenz.lession4.controller.FreeMarkerRumenController

浏览器访问http://127.0.0.1:8080/index2

本小结源码地址:

• GitHub:https://github.com/mifunc/springboot/tree/main/lession4
• Gitee:https://gitee.com/rumenz/springboot/tree/master/lession4
• https://rumenz.com/rumenbiji/springboot-tpl.html

介绍

• 我的博客 https://rumenz.com/
• 我的工具箱 https://tooltt.com/
• 微信公众号:【入门小站】

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com