Spring系列-SpringMvc父子容器启动原理解析

1、Spring整合SpringMVC

特性:

说到Spring整合SpringMVC唯一的体现就是父子容器:

  • 通常我们会设置父容器(Spring)管理Service、Dao层的Bean, 子容器(SpringMVC)管理Controller的Bean .
  • 子容器可以访问父容器的Bean, 父容器无法访问子容器的Bean。

实现:

相信大家在SSM框架整合的时候都曾在web.xml配置过这段:

<!--spring 基于web应用的启动-->
<listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--全局参数:spring配置文件-->
<context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring-core.xml</param-value>
</context-param>
<!--前端调度器servlet-->
<servlet><servlet-name>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!--设置配置文件的路径--><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring-mvc.xml</param-value>
</init-param><!--设置启动即加载--><load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>/</url-pattern>

但是它的作用是什么知道吗?

0

有人可能只知道DispatcherServlet叫前端控制器,是SpringMVC处理前端请求的一个核心调度器

那它为什么能处理请求?处理之前做了什么准备工作呢?又是怎么和Spring结合起来的呢?

为什么有了DispatcherServlet还要个ContextLoaderListener, 配一个不行吗?干嘛要配俩啊?

看完本文你就会有答案!

0

还有人可能会觉得, 我现在都用SpringBoot开发, 哪还要配这玩意.......

0

这就是典型的SpringBoot使用后遗症,SpringBoot降低了使用难度,但是从某种程度来说,也让初级的程序员变得更加小白,把实现原理都隐藏起来了而我们只管用,一旦涉及扩展就束手无策。

那当然我们今天不讲SpringBoot,我们今天用贴近SpringBoot的方式来讲SpringMVC。也就是零配置(零xml)的放式来说明SpringMVC的原理!!

此方式作为我们本文重点介绍,也是很多人缺失的一种方式, 其实早在Spring3+就已经提供, 只不过我们直到SpringBoot才使用该方式进行自动配置, 这也是很多人从xml调到SpringBoot不适应的原因, 因为你缺失了这个版本。 所以我们以这种方式作为源码切入点既可以理解到XML的方式又能兼顾到SpringBoot的方式 。

2、零配置SpringMVC实现方式:

那没有配置就需要省略掉web.xml 怎么省略呢?

在Servlet3.0提供的规范文档中可以找到2种方式:

  • 注解的方式
  1. @WebServlet
  2. @WebFilter
  3. @WebListener

但是这种方式不利于扩展, 并且如果编写在jar包中tomcat是无法感知到的。

  • SPI的方式

在Serlvet3-1的规范手册中:就提供了一种更加易于扩展可用于共享库可插拔的一种方式,参见8.2.4:

也就是让你在应用META-INF/services 路径下 放一个 javax.servlet.ServletContainerInitailizer ——即SPI规范

SPI 我们叫他服务接口扩展,(Service Provider Interface) 直译服务提供商接口, 不要被这个名字唬到了, 其实很好理解的一个东西:

其实就是根据Servlet厂商(服务提供商)提供要求的一个接口, 在固定的目录(META-INF/services)放上以接口全类名 为命名的文件, 文件中放入接口的实现的全类名,该类由我们自己实现,按照这种约定的方式(即SPI规范),服务提供商会调用文件中实现类的方法, 从而完成扩展。

ok 那我们知道了SPI是什么,我们是不是可以在Web应用中,在Servlet的SPI放入对应的接口文件:

0

放入实现类:

0

通过ServletContext就可以动态注册三大组件:以Servlet注册为例:

public class TulingSpringServletContainerInitializer extends SpringServletContainerInitializer {@Overridepublic void onStartup(Set<Class<?>> webAppInitializerClasses, ServletContext servletContext) throws ServletException {// 通过servletContext动态添加ServletservletContext.addServlet("spiServlet", new HttpServlet() {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().write("spiServlet--doGet");}}).addMapping("/spiServlet.do");}

 当然在SpringMVC中, 这个接口文件和实现类都把我们实现好了,甚至ContextLoaderListener和DispatcherServlet都帮我们注册好了,我们只要让他生效,来,看看他是怎么做的:

3、实现基于SPI规范的SpringMVC

TulingStarterInitializer

  • 此类继承AbstractAnnotationConfigDispatcherServletInitializer 这是个啥? 待会我们讲原理来介绍
  • getRootConfigClasses 提供父容器的配置类
  • getServletConfigClasses 提供子容器的配置类
  • getServletMappings 设置DispatcherServlet的映射
public  class TulingStarterInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {/*** 方法实现说明:IOC 父容器的启动类* @author:xsls* @date:2019/7/31 22:12*/@Overrideprotected Class<?>[] getRootConfigClasses() {return new Class[]{RootConfig.class};}/*** 方法实现说明 IOC子容器配置 web容器配置* @author:xsls* @date:2019/7/31 22:12*/@Overrideprotected Class<?>[] getServletConfigClasses() {return new Class[]{WebAppConfig.class};}/*** 方法实现说明* @author:xsls* @return: 我们前端控制器DispatcherServlet的拦截路径* @exception:* @date:2019/7/31 22:16*/@Overrideprotected String[] getServletMappings() {return new String[]{"/"};

RootConfig

  • 父容器的配置类 =以前的spring.xml
  • 扫描的包排除掉@Controller
@Configuration
@ComponentScan(basePackages = "com.tuling",excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,value={RestController.class,Controller.class}),@ComponentScan.Filter(type = ASSIGNABLE_TYPE,value =WebAppConfig.class ),
})
public class RootConfig {}

WebAppConfig

  • 子容器的配置类 =以前的spring-mvc.xml
  • 扫描的包:包含掉@Controller
@Configuration
@ComponentScan(basePackages = {"com.tuling"},includeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,value = {RestController.class, Controller.class})
},useDefaultFilters =false)
@EnableWebMvc   // ≈<mvc:annotation-driven/>
public class WebAppConfig implements WebMvcConfigurer{/*** 配置拦截器* @return*/@Beanpublic TulingInterceptor tulingInterceptor() {return new TulingInterceptor();}/*** 文件上传下载的组件* @return*/@Beanpublic MultipartResolver multipartResolver() {CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();multipartResolver.setDefaultEncoding("UTF-8");multipartResolver.setMaxUploadSize(1024*1024*10);return multipartResolver;}/*** 注册处理国际化资源的组件* @return*/
/* @Beanpublic AcceptHeaderLocaleResolver localeResolver() {AcceptHeaderLocaleResolver acceptHeaderLocaleResolver = new AcceptHeaderLocaleResolver();return acceptHeaderLocaleResolver;}*/@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(tulingInterceptor()).addPathPatterns("/*");}/*** 方法实现说明:配置试图解析器* @author:xsls* @exception:* @date:2019/8/6 16:23*/@Beanpublic InternalResourceViewResolver internalResourceViewResolver() {InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();viewResolver.setSuffix(".jsp");viewResolver.setPrefix("/WEB-INF/jsp/");return viewResolver;}@Overridepublic void configureMessageConverters(List<HttpMessageConverter<?>> converters) {converters.add(new MappingJackson2HttpMessageConverter());}

自己去添加个Controller进行测试

OK, 现在可以访问你的SpringMVC了

4、SPI的方式SpringMVC启动原理

接着我们来看看SPI方式的原理是什么:

SpringMVC 大致可以分为 启动 和请求 2大部分, 所以我们本文先研究启动部分

流程图:

源码流程

  1. 外置Tomcat启动的时候通过SPI 找到我们应用中的/META-INF/service/javax.servlet.ServletContainerInitializer

0

  1. 调用SpringServletContainerInitializer.onStartUp()

0

    1. 调用onStartUp()前会先找到@HandlesTypes(WebApplicationInitializer.class) 所有实现了WebApplicationInitializer的类,传入到OnStartup的webAppInitializerClasses参数中,并传入Servlet上下文对象。
    2. 重点关注这组类:他们组成了父子容器

0

  1. 找到所有WebApplicationInitializer的实现类后, 不是接口、不是抽象则通过反射进行实例化(所以,你会发现内部实现类都是抽象的,你想让其起作用我们必须添加一个自定义实现类,在下文提供我的自定义实现类)
  2. 调用所有上一步实例化后的对象的onStartup方法

0

0

1. 首先来到AbstractDispatcherServletInitializer#onStartup再执行super.onStartup(servletContext);

@Override
public void onStartup(ServletContext servletContext) throws ServletException {//实例化我们的spring root上下文super.onStartup(servletContext);//注册我们的DispatcherServlet   创建我们spring web 上下文对象registerDispatcherServlet(servletContext);

 创建父容器——ContextLoaderListener

2.父类AbstractContextLoaderInitializer#onStartup执行registerContextLoaderListener(servletContext);

  1. createRootApplicationContext()该方法中会创建父容器
    1. 该方法是抽象方法,实现类是AbstractAnnotationConfigDispatcherServletInitializer
      1. 调用getRootConfigClasses();方法获取父容器配置类(此抽象方法在我们自定义的子类中实现提供我们自定义的映射路径 )
      2. 创建父容器,注册配置类

0

  1. 会创建ContextLoaderListener并通过ServletContext注册

0

看完大家是不是感觉跟我们XML的配置ContextLoaderListener对上了:

0

创建子容器——DispatcherServlet

3.回到AbstractDispatcherServletInitializer#onStartup再执行registerDispatcherServlet(servletContext);

0

registerDispatcherServlet方法说明:

  1. 调用createServletApplicationContext创建子容器
    1. 该方法是抽象方法,实现类是AbstractAnnotationConfigDispatcherServletInitializer
      1. 创建子容器(下图很明显不多介绍)
      2. 调用抽象方法:getServletConfigClasses();获得配置类(此抽象方法在我们自定义的子类中实现提供我们自定义的配置类 )
      3. 配置类除了可以通过ApplicationContext()构造函数的方式传入 , 也可以通过这种方式动态添加,不知道了吧~

0

  1. 调用createDispatcherServlet(servletAppContext);创建DispatcherServlet
  2. 设置启动时加载:registration.setLoadOnStartup(1);
  3. 调用抽象方法设置映射路径:getServletMappings()(此抽象方法在我们自定义的子类中实现提供我们自定义的映射路径 )

看完大家是不是感觉跟我们XML的配置DispatcherServlet对上了

0

4. 初始化ContextLoaderListener

0

ContextLoaderListener加载过程比较简单:

外置tomcat会帮我们调用ContextLoaderListener#contextInitialized 进行初始化

  1. xml的方式下会判断容器为空时创建父容器
  2. 在里面会调用父容器的refresh方法加载
  3. 将父容器存入到Servlet域中供子容器使用

0

5. 初始化DispatcherServlet

0

可以看到流程比ContextLoaderListener流程更多

外置tomcat会帮我们调用DispatcherServlet#init()   进行初始化--->重点关注:initWebApplicationContext方法

  1. getWebApplicationContext(getServletContext())获得父容器(从之前的Servlet域中拿到)
  2. cwac.setParent(rootContext);给子容器设置父容器
  3. 调用configureAndRefreshWebApplicationContext(cwac);

0

    1. 注册一个监听器(该监听会初始化springmvc所需信息)
      1. ContextRefreshedEvent可以看到该监听器监听的是容器refreshed事件, 会在finishRefresh中发布
    2. 刷新容器

0

当执行refresh 即加载ioc容器 完了会调用finishRefresh():

  1. publishEvent(new ContextRefreshedEvent(this));发布ContextRefreshedEvent事件
  2. 触发上面的ContextRefreshListener监听器:

---->FrameworkServlet.this.onApplicationEvent(event);

-------->onRefresh(event.getApplicationContext());

-------------->initStrategies(context);

protected void initStrategies(ApplicationContext context) {//初始化我们web上下文对象的 用于文件上传下载的解析器对象initMultipartResolver(context);//初始化我们web上下文对象用于处理国际化资源的initLocaleResolver(context);//主题解析器对象初始化initThemeResolver(context);//初始化我们的HandlerMappinginitHandlerMappings(context);//实例化我们的HandlerAdaptersinitHandlerAdapters(context);//实例化我们处理器异常解析器对象initHandlerExceptionResolvers(context);initRequestToViewNameTranslator(context);//给DispatcherSerlvet的ViewResolvers处理器initViewResolvers(context);initFlashMapManager(context);

这里面的每一个方法不用太细看, 就是给SpringMVC准备初始化的数据, 为后续SpringMVC处理请求做准备

基本都是从容器中拿到已经配置的Bean(RequestMappingHandlerMapping、RequestMappingHandlerAdapter、HandlerExceptionResolver )放到dispatcherServlet中做准备:

0

0

0

...

但是这些Bean又是从哪来的呢?? 来来来, 回到我们的WebAppConfig

我们使用的一个@EnableWebMvc

  1. 导入了DelegatingWebMvcConfiguration@Import(DelegatingWebMvcConfiguration.class)
  2. DelegatingWebMvcConfiguration的父类就配置了这些Bean
  3. 而且我告诉你SpringBoot也是用的这种方式,

0

总结

  1. Tomcat在启动时会通过SPI注册 ContextLoaderListener和DispatcherServlet对象
    1. 同时创建父子容器
      1. 分别创建在ContextLoaderListener初始化时创建父容器设置配置类
      2. 在DispatcherServlet初始化时创建子容器 即2个ApplicationContext实例设置配置类
  2. Tomcat在启动时执行ContextLoaderListener和DispatcherServlet对象的初始化方法, 执行容器refresh进行加载
  3. 在子容器加载时 创建SpringMVC所需的Bean和预准备的数据:(通过配置类+@EnableWebMvc配置(DelegatingWebMvcConfiguration)——可实现WebMvcConfigurer进行定制扩展)
    1. RequestMappingHandlerMapping,它会处理@RequestMapping 注解
    2. RequestMappingHandlerAdapter,则是处理请求的适配器,确定调用哪个类的哪个方法,并且构造方法参数,返回值。
    3. HandlerExceptionResolver 错误视图解析器
    4. addDefaultHttpMessageConverters 添加默认的消息转换器(解析json、解析xml)
    5. 等....
  4. 子容器需要注入父容器的Bean时(比如Controller中需要@Autowired Service的Bean); 会先从子容器中找,没找到会去父容器中找: 详情见AbstractBeanFactory#doGetBean方法

 

/** * 一般情况下,只有Spring 和SpringMvc整合的时才会有父子容器的概念, * 作用:* 比如我们的Controller中注入Service的时候,发现我们依赖的是一个引用对象,那么他就会调用getBean去把service找出来* 但是当前所在的容器是web子容器,那么就会在这里的 先去父容器找*/
BeanFactory parentBeanFactory = getParentBeanFactory();
//若存在父工厂,且当前的bean工厂不存在当前的bean定义,那么bean定义是存在于父beanFacotry中
if (parentBeanFactory != null && !containsBeanDefinition(beanName)) {//获取bean的原始名称String nameToLookup = originalBeanName(name);//若为 AbstractBeanFactory 类型,委托父类处理if (parentBeanFactory instanceof AbstractBeanFactory) {return ((AbstractBeanFactory) parentBeanFactory).doGetBean(nameToLookup, requiredType, args, typeCheckOnly);}else if (args != null) {//  委托给构造函数 getBean() 处理return (T) parentBeanFactory.getBean(nameToLookup, args);}else {// 没有 args,委托给标准的 getBean() 处理return parentBeanFactory.getBean(nameToLookup, requiredType);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM——深入探索 ChatGPT在代码解释方面的应用研究

1.概述 OpenAI在自然语言处理&#xff08;NLP&#xff09;的征途上取得了令人瞩目的进展&#xff0c;这一切得益于大型语言模型&#xff08;LLM&#xff09;的诞生与成长。这些先进的模型不仅是技术创新的典范&#xff0c;更是驱动着如GitHub Copilot编程助手和Bing搜索引擎等广…

搭建大型分布式服务(三十九)SpringBoot 整合多个kafka数据源-支持Aware模式

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目&#xff0c;每天处理上亿级的数据的精简小插件&#xff0c;快速上手。 <dependency><groupId>io.github.vipjo…

计算一个3x3矩阵对角线和其它两条线的元素之和

计算一个3x3矩阵对角线和其它两条线的元素之和 #include <stdio.h> int main () { int d0,b0,s,i,j; int a[3][3]{1,2,3,4,5,6,7,8,9}; for(i0,j2;i<3;i,j--) dda[i][i]a[i][j]; for(i0,j0;i<3;) {bba[i][j]a[i][j2]; ii2;} sdb; printf("d%d\nb%d\ns%d\n&qu…

5.25.12 数字组织病理学的自我监督对比学习

无监督学习可以弥补标记数据集的稀缺性。 无监督学习的一个有前途的子类是自监督学习&#xff0c;其目的是使用原始输入作为学习信号来学习显著特征。在这项工作中&#xff0c;我们解决了在没有任何监督的情况下学习领域特定特征的问题&#xff0c;以提高数字组织病理学界感兴…

R语言探索与分析-美国房价及其影响因素分析

一、选题背景 以多元线性回归统计模型为基础&#xff0c;用R语言对美国部分地区房价数据进行建模预测&#xff0c;进而探究提高多元回 归线性模型精度的方法。先对数据进行探索性预处理&#xff0c;随后设置虚拟变量并建模得出预测结果&#xff0c;再使用方差膨胀因子对 多重共…

使用Landsat的NDVI和NDWI阈值法土地分类

目录 分类效果源代码分类效果 创建一个包含多个层的影像合成:水体(NDWI > 0.5),植被(NDVI > 0.2),阴影区域的裸地(bare2但不包括bare1),和其他裸地(bare1)。然后,使用mosaic()方法合并这些层,并用clip(hh)方法裁剪到研究区域的范围。 源代码 var hh = ee.…

基于Java的零食管理系统的设计与实现(论文+源码)_kaic

摘 要 随着科技的进步&#xff0c;以及网络的普及&#xff0c;都为人们的生活提供了极大的方便。因此&#xff0c;在管理”三姆”宿舍在线零食商店时&#xff0c;与现代的网络联系起来是非常必要的&#xff0c;本次设计的系统在研发过程中应用到了Java技术&#xff0c;这在一定…

第一人称射击游戏:反恐精英(CS1.6) 支持win版和mac版下载

枪战老玩家还记得这款史诗巨作吗&#xff1f;Macz为广大游戏玩家倾情推出反恐精英(CS1.6) for Mac&#xff0c;CS1.6官方下载是由著名游戏《半条命》的其中一个游戏模组(MOD)衍生而成的游戏。逼真的画面&#xff0c;震撼的音效&#xff0c;3D的视角&#xff0c;多样的操作融合而…

LeetCode - 贪心(Greedy)算法集合(Python)[分配问题|区间问题]

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/139242199 贪心算法&#xff0c;是在每一步选择中&#xff0c;都采取当前状态下&#xff0c;最好或最优&#xff08;即最有利&#xff09;的选择&…

光猫、路由器的路由模式、桥接模式、拨号上网

下面提到的路由器都是家用路由器 一、联网条件 1.每台电脑、路由器、光猫想要上网&#xff0c;都必须有ip地址。 2.电脑获取ip 可以设置静态ip 或 向DHCP服务器(集成在路由器上) 请求ip 电话线上网时期&#xff0c;猫只负责模拟信号和数字信号的转换&#xff0c;电脑需要使…

Spark介绍及RDD操作

Spark介绍及RDD操作 PySpark简介spark特点运行原理spark实例化 SparkCore-RDDRDD创建转换&#xff08;Transformation&#xff09;行动&#xff08;Action&#xff09; PySpark简介 spark特点 运行速度快&#xff1a;DAG内存运算容易使用&#xff1a;Java、Scala、Python、R通…

深入探究 threejs 中的材质与纹理应用

深入探究 threejs 中的材质与纹理应用 一、引言 在三维图形开发领域&#xff0c;Three.js 是一个强大而受欢迎的库。其中&#xff0c;材质与纹理的应用对于创建逼真和吸引人的三维场景起着至关重要的作用。通过对材质和纹理的巧妙运用&#xff0c;可以极大地增强模型的视觉效…

AutoCAD 2024 for Mac(cad设计绘图工具) v2024.3中文激活版

AutoCAD是一款强大的CAD软件&#xff0c;适合于各种领域的设计和绘图。它具有二维图形和三维建模功能、多种文件格式支持、自定义命令和样式、批处理和脚本等特点&#xff0c;可以帮助用户实现高质量的设计和建模。同时&#xff0c;AutoCAD还支持云端存储和共享&#xff0c;方便…

Spring源码之BeanDefinition的加载

Spring源码之BeanFactory和BeanDefinition BeanFactory和BeanDefinitionBeanFactoryBeanDefinition源码分析创建AnnotationConfigApplicationContext对象注册配置类refresh方法 BeanFactory和BeanDefinition BeanFactory BeanFactory是Spring提供给外部访问容器的根接口&…

关于vlookup的第一个参数的个人理解

VLOOKUP&#xff08;查阅值&#xff0c;包含查阅值和返回值的查找区域&#xff0c;查找区域中返回值的列号&#xff0c;精确查找或近似查找&#xff09; 我个人理解&#xff0c;第一个参数应该叫线索值&#xff0c;因为我们要通过它去找与其对应的&#xff08;也就是与其同行的…

7-zip安装教程

一、简介 7-Zip 是一款开源的文件压缩软件&#xff0c;由 Igor Pavlov 开发。它具有高压缩比、支持多种格式、跨平台等特点。使用 C语言编写&#xff0c;其代码在 Github 上开源。 7-Zip的官网&#xff1a; 7-Zip 7-zip官方中文网站&#xff1a; 7-Zip 官方中文网站 7-Zip 的 G…

Day 10:100322. 删除星号以后字典序最小的字符串

Leetcode 100322. 删除星号以后字典序最小的字符串 给你一个字符串 s 。它可能包含任意数量的 ‘’ 字符。你的任务是删除所有的 ’ 字符。 当字符串还存在至少一个 ‘*’ 字符时&#xff0c;你可以执行以下操作&#xff1a; 删除最左边的 ‘*’ 字符&#xff0c;同时删除该星号…

C语言 | Leetcode C语言题解之第115题不同的子序列

题目&#xff1a; 题解&#xff1a; int numDistinct(char* s, char* t) {int m strlen(s), n strlen(t);if (m < n) {return 0;}unsigned long long dp[m 1][n 1];memset(dp, 0, sizeof(dp));for (int i 0; i < m; i) {dp[i][n] 1;}for (int i m - 1; i > 0;…

Springboot校园食堂智能排餐系统-计算机毕业设计源85935

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对校园食堂智能排餐系统等问题&#xff0c;对…

Tailwind Classes 我希望早点知道的

以下是一些我希望早点知道的 Tailwind 类&#xff0c;这些类使我的开发过程更加高效&#xff0c;让我的设计更加精致。 line-clamp line-clamp 类在处理多行文本截断时非常有用。它允许你控制显示的文本行数&#xff0c;并截断其余部分。这对于创建一致外观的元素&#xff08;如…