中台前端框架AntDesignPro document.ejs文件详解

前言

.ejs文件是使用EJS（Embedded JavaScript templating）模板引擎创建的模板文件。EJS是一种简单而强大的模板语言，可以在HTML文件中嵌入JavaScript代码。EJS主要用于服务器端渲染（SSR）的场景，也可以在构建时（使用Node.js脚本）动态生成HTML文件

EJS文件

主要特性

简单性：EJS使用普通的HTML标记。
JavaScript代码嵌入：可以在模板中直接嵌入JavaScript代码，进行数据绑定、条件判断、循环等操作。
灵活性：EJS不强迫遵循某种编程模式或使用特定的框架。它可以被集成到任何可以解析JavaScript的环境中。

基本语法

EJS模板中主要有以下几种标记：

<% 代码 %>：运行JavaScript代码，但不输出到模板。
<%= 表达式 %>：输出数据到模板（HTML转义）。
<%- 表达式 %>：输出未经HTML转义的数据到模板，通常用于包含HTML内容。
<%# 注释 %>：在模板中添加注释，不会在最终输出中显示。

在AntDesignPro中的作用

在基于Umi框架以及Ant Design Pro开发的React应用中，document.ejs文件作为应用的HTML模板，为整个应用提供了基本的HTML结构和初始加载资源的引用，任何页面的加载和渲染都是在这个基础模板的框架内进行的。

具体来说，页面显示涉及到以下几个方面：

根元素 ：<div id="root">是React应用挂载的点。所有的React组件，包括路由控制的页面内容，都将在这个元素内部渲染。因此，无论是应用的首页还是后续导航到的任何页面，其内容都会在这个div内展示。
资源加载 ：document.ejs中定义的外部资源（如CSS文件、JavaScript脚本、图标等）为应用的所有页面提供了样式和功能支持。这些资源在文档加载时被加载和应用，确保了页面的统一性和应用的交互性。
页面模板：此文件还可以包含一些全局性的元素或脚本，比如网站的头部、底部信息、SEO相关的meta标签、全局的样式定义等。这些内容将在每个页面上保持一致，除非在具体页面中进行了覆盖或特定的调整。
动态内容渲染 ：虽然document.ejs提供了页面的静态框架，但页面上的具体内容（如用户数据、动态列表等）则是通过React组件动态渲染的。这些动态内容的渲染依赖于React的状态管理和组件生命周期，与document.ejs的静态结构相结合，共同构成了最终用户看到的页面。

Document.ejs关键内容

<!DOCTYPE html>: 声明文档的类型。
<html lang="en">: 根元素，定义文档语言。
<head>部分：包含了文档的元数据，如
- 字符集定义<meta charset="UTF-8" />、
- 视口设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />、
- 页面标题<title>Ant Design Pro</title>
- 链接到外部资源如图标<link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />。
<body>部分：定义了文档的主体内容。
- <noscript>标签用于显示一条消息，告诉用户如果他们的浏览器不支持或禁用了JavaScript，应该如何启用JavaScript。
- <div id="root">是应用的根元素，React应用将在这里渲染其内容。
- 页面加载时显示的样式和结构，包括一个旋转的加载指示器（ant-spin），以及一些基本的布局和样式设置。

EJS文件工作流程

EJS通过特殊的标记<% %>来区分JavaScript代码和HTML内容，可以在这些标记内编写任何JavaScript代码，包括变量声明、控制流语句（如if、else、for循环等）。
编写逻辑将将数据从服务器传递到EJS模板中，然后使用这些数据动态构建HTML。例如，如果有一个用户列表，可以通过EJS模板遍历这个列表，并为每个用户生成HTML标记。
当服务器接收到一个请求时，它会处理EJS模板，执行嵌入的JavaScript代码，并用实际的值替换变量和表达式。然后，它将生成的HTML发送回客户端。
EJS支持部分视图和布局，这意味着可以将页面分割成多个部分（如头部、尾部、导航等），在多个页面中重用这些部分。这有助于减少代码重复并提高项目的可维护性。