. 背景

. 简介

. git规范

git分支规范

由于团队成员暂时只有我一个,不采用release分支

.master分支是固定的，线支，永远与线上代码一致

.develop分支是固定的，又叫研发分支，当develop分支的发布线上测试回归完成，才可以合并到master分支

.feature分支是功能分支，有多个功能分支，就feature-a -b这样如果开发完成，测试没有问题，可以合并到develop分支

.hotfix分支是修复分支，当遇到线上问题，从hotfix分支拉下来修改完成。可以合并到master分支

开发常规流程从develop分支拉取代码===>创建feature-xx开发分支 ===>开发测试完成====>合并到develop====>与原先线上功能回归完成====>合并到master

线上问题流程master分支拉取代码====>新建分支hotfix-xx===>开发测试完成===>合并到master分支====>合并到develop分支

git提交规范

在团队协作开发软件项目时遵循 统一的 commit 规范 对于保持代码仓库的整洁和提高团队成员之间的沟通效率很关键。这里采用的是husky+commitlint

husky是一个 git hooks 管理工具，它可以简化你在 git仓库 中设置 hook 的过程。它就像是个尽职尽责的保安，可以在 git 的各种操作环节添加自定义指令操作。

. 基于node实现服务端内核引擎BFF层

背景

elpis-core 是 elpis 应用框架的主要，相当于服务端和客户端之间的 “中间桥梁”。它的工作逻辑是：先对收到的请求做一系列校验和预处理，等 → 权限 → 路由 - 高性能网关Express.js,Laravel,ASP.NET Core拦截器模型 分离式 是 显式注册请求前和响应后处理器，职责完全解耦 - HTTP 客户端封装 - 统一添加 Token/日志 - API 调用提高Axios,Spring Boot RestTemplate,Fetch Interceptors事件驱动模型 无固定方向 ⚠️ 间接支持 请求/响应作为事件发布。监听器异步处理 - 实时通信 - 异步任务处理 - 微服务消息总线Node.js,Socket.IO,RabbitMQ,KafkaAOP 切面模型 编织式 是 将横切关注点从主业务中分离，动态织入 - 公司级后台程序 - 数据库事务管理 - 统一权限/审计日志Spring AOP,NestJS Interceptors,AspectJ你想实现…，推荐模型 “请求进来打日志。响应出去再打一次日志” ✅ 洋葱圈模型“所有 API 调用自动加 Token” ✅ 拦截器模型“使用者登录后发欢迎邮件” ✅ 事件驱动模型“数据库操作自动开启/提交事务” ✅ AOP 切面模型“简单中间件：鉴权 → 限流 → 路由” ✅ 管道模型

由于我们使用的技术栈是koa 得知这里处理中间件是用的洋葱圈模型

. 调研 软件程序结构

软件架构模式是用来解决“如何组织大型软件程序结构”的通用方案，目的是让程序更易开发、维护、 和演化。

. 调研常见软件架构模式及典型使用场景

. 详解MVC MVC MVC MVC MVC MVC MVC MVC MVC MVC MVC

 组件
职责
示例
Model
Model
Model
Model
Model
- 数据存取
- 业务规则
-
状态管理

User User User User User User 类 、OrderService OrderService OrderService、 数据库 ORM 模 型

 View
View
View
View
View
View
View
View
-
渲 染 UI
HTML
HTML
HTML /
/
/
/
/
/
/
/
/

模板 、前 端组件 ）

不包含业 务逻辑

被 动显示数 据

Nunjucks/EJS Nunjucks/EJS Nunjucks/EJS Nunjucks/EJS Nunjucks/EJS Nunjucks/EJS

模板 、React/Vue 组 件 （在传统

MVC

中）

 Controller

Controller

 -
接 收 HTTP 请 求

调用

Model

处 理数 据

选择

View

并传 入数 据

返 回响 应

Koa/Express

路 由处 理函 数

. fs :思考复 习

. fs : mvc 和 mvvm 有什么区别

• MVC

: 你

告诉页 面 “ 去 显示某某 数据” / / / / / / / / / /

文件

职责

谁 主动？

数据和业 务逻辑 被 动

展示 UI

HTML

HTML / / / / 模板），不包含逻 辑

被 动

主动协 调者： 接收用 户输 入

选 择

✅ 主 动

: 你 改了 数据，页 面 自动更新

组件

关键机制

: 数据和业

务逻

辑-

ViewUI

UI

UI UI UI UI UI UI

UI UI

( HTML

+ + + + + + 绑定指

令)，不直接操

作数据数

据绑

定

( Data

Binding )

ViewModel暴 露可绑

定的数

据和命

令 ( 如

user.name

save

save

) 自 动同步

↔

Model双 向绑 定 ( Two-way Binding )

主要区 别

对比项	MVC	MVVM
核 心驱动	Controller 主动控制数 据绑 定自 动同步数 据流单 向 ( 手动更 新 View ) 双 向 ( View ↔ ViewModel 自 动同步 ) DOM 操作需要手 动渲 染 /更 新框 架自 动处 理典 型场景后端 Web 应 用 ( SSR ) 前端 SPA 应 用代 表框 架Rails,Laravel,Spring MVCVue.js。Angular 学 习成本低 ( 逻 ... 辑直观 ) 中 ( 需理解响 ... 应式原理 ) 适合团 ... 队后端主导项 目前端主导的交互密集型应 用 详细设 计 详细设 计 详细设 计 详细设 计 详细设 计 详细设 计 详细设 计 详细设 计 . 核 心框 ... 架采用 Koa . :轻量级 Node . js Web ... 框架 @koa/router :路 由管 ... 理 TypeScript . :类 型安 ... 全 . ... 模板引擎 中间件 . ... 数据库采用 MySQL :关 系型 数据库 . 工 ... 具库 . 开 ... 发工具 elpis/ ├── app/ # 业 ...务代 码目 ... 录 │ ├── controller/ # 控制 ... 器层 ( 处 理业 ...务逻 ... 辑) │ │ ├── project . ts # 项 ... 目控 制器示 ... 例 │ │ └── view . ts # 查 ... 看控 制器 │ ├── service/ # 服务 ... 层 ( 数据操 ... 作) │ │ └── project . ts # 项 ... 目服 ...务示 ... 例 │ ├── router/ # 路 由定 ... 义 │ │ ├── project . ts # 项 ... 目路 由 │ │ └── view . ts # 查 ... 看路 由 │ ├── middleware/ # 自定 ... 义 中间件│ │ ├── api-params-verify . ts # API 参数验 ... 证│ │ ├── api-sign-verify . ts # API 签 名验 ... 证│ │ └── error-handle . ts # 错误处 ... 理│ ├── views/ # 查 ... 板文 件│ │ ├── entry.error.html # 错误页 面│ │ └── entry.page.html # 通用页 面│ ├── public/ # 静 ...态资 源│ └── middleware.ts # 全 ...局 中间件配 置├── config/ # 配 置文 件│ ├── config.local.ts # 本 地环 ...境配 置│ ├── config.娱乐a.ts # 测 ...试环 ...境配 置│ ├── config.prod.ts # 生 ...产环 ...境配 置│ └── config.default.ts # 默 ...认配 置├── constants/ # 常 量定 ... 义│ ├── routerPath.ts # 路 由路 ... 径常 量│ └── responseCode.ts # 响 应码 常量├── elpis-core/ # 核 心启 动器│ ├── index.ts # 启 动入 口│ ├── env.ts # 环 ...境变 量│ └── loader/ # 加 ... 载器│ ├─ config.ts # 配 置加 ... 载器│ ├─ controller.ts # 控 制器加 ... 载器| |----service-ts# 服务加...载器| |----router-ts# 路由加载器| |----middleware-ts# 中间件加载| |--- tool-ts# 工...具函数| └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─── elpis-base/# 基...础类| ├─ controller-ts# 控制...基类| ├─ service-ts# 服务基类| └─ baseFn-ts# 基...础函数├─ elpis-types/# 类型定义| ├─ core-ts# 核...类型| └─ common-ts# 通用类型├─ index-ts# 项目入口└─ package-json#依赖配置pre> index.ts ↓ElpisCore.start↓. mountBaseContent - 初始 化 环... 境 和方法↓. mountLoader - 加载 各模... 块├─ configLoader - 加载 配... 置├─ middlewareLoader - 加载 中间... 件├─ routerSchemaLoader - 加载 路 由 Schema├─ controllerLoader - 加载 控制... 器├─ serviceLoader - 加载 服务├─ extendLoader - 加载扩... 展├─ globalMiddleware - 注册 全局 中间... 件└─ routeLoader - 注册 路由↓. startServer - 启动 HTTP 服务pre> Koa App ├── controllers - 控制... 实例映... 射├── services - 服... 实例映... 射├── middlewares - 中 间... 映射├── router - KoaRouter 实例├── tools - 工... 集合├── config - 配... 对象├── logger - 日... 实例└── ElpisEnv - 环... 工具pre> 整体架... 构说明 ✅ 自... 动模块 加载: 控制... 制... 制... 服务... 服务... 服务.... 中 间.... 中 间.... 路由.... 路由.... 等自... 动扫.... 描 加载✅ 多 环.... 多 环.... 多 环.... 境支.... 境支.... 持: 本 地 .... 本 地 .... 测.... 测.... 试 .... 生 .... 生 .... 产 环.... 产 环.... 境隔 .... 离✅ TypeScript :完 整的类型定 .... 义✅ 具体实 现上面是我 们的设计的文件架....构，中 间....件架....构，根据设计得 出具体实 现 . 最外层入 口 elpis/index . ts引入我 们实现的elpis-core 可以添 加额外的参 数，来进 行启动 import ElpisCore from "./elpis-core/index";// 启动项 目ElpisCore.start;pre> 实现elpis-core 入口 引 入koa 实例挂载 对应内容方法：elpis/elpi s-cor e/in dex .ts先 引 入koa，得 到koa 实例开启 一个服....务 核 ...... 心作用 &# x26;常 见用 ...... 途 实现加......载工......具函......数路由、中......间......件控制器服......务配置等内容方法：elpi s/elpi s-cor e/loa der根据我 们的设计 我 们采用 是约......定式 编程，且有自......动模块 加载 功能，我 们将模块 分为下 面几类。接下来做出 自......动 加载 模块的功能，就是当服......务启动 时可 以自......动 加载 app xxx 下面的内容做到 该注...... 册 注...... 册 注...... 册 该使...... 用的可以直接放在 app 实 例 中，让 app.xxx 这 样 来使用做到 便...... 捷 开 发，让 app 这 个实 例贯 穿 我 们整个服......务。 . tool 工......具函 数方法：elpi s/elpi s-cor e/loa der/to ol .ts工......具函 数挂载 到app 上。使 别 的模块 可 以app.tool.xxx 直接 使用 我 们写好的工......具函 数例子因为 我们 要做 自...... 动 加载 模块的功能，可 以封 装出这 么一个 自...... 动 加载 文件 模块的功能函 数。 /* 自...... 动 加载 指定 目录 下的模块，并 按方法 结...... 构建立嵌套 对象* @param {string} basePath 基 础 目录 方法（如 app.businessPath)* @param {string} subDirName 子 目录 名（如 'middleware')* @param {object} app 应 用 实例传 给每个 模块)* @param {string} optionExtra 其 他参 数 extensions 要 加载 的文件 名默...... 认 )*@returns{object}嵌套的对象 结...... 构 */async function autoLoadModules:Promise&# x3C;Record&# x3C;string,any>{//建立完整 目录 方法const targetDir = path.resolve;// 获取 所有匹 配的文件const files = getFilesToPath;// 最终结 果 对象const result:Record&# x3C;string,any>= {};//遍历每个 文件for{//.获取 相对于 targetDir 的方法（如 'user auth login.js')letrelativePath=path.relative;//.转换下划 线短横 线为驼峰（如 user_profile→ userProfile )relativePath=relativePath.replace /g。=>letter.toUpperCase,);//.将方法 分隔 符替 ...... 换为'.'letdotPath=relativePath.replace,".");//.移除 名dotPat h=removeScriptExt;不过，//.分割 为键 数组constkeys=d otPat h.split;//.加载 模块传 入 appletmodule:any;try{constmoduleResult=awaitdiyRequire;if{module=m oduleResult.module;}else{module={ };console.log，}}catch{module={ };console.log，}//建立嵌套 对象{a:{b:{c:m odule}}}constnested=k eys.reduceRight =>,module );// 合并 到 result 支...... 持 多文件 共...... 享顶 ...... 层命 名空..... 间consttopKey=k eys;if{result=nested;}else{// 如果 已存在需要 深合 并简 单递...... 归合 并deepMerge;}}returnresult;}exportdefault:Tools=>{return{autoLoadModules,};}，pre> 接下来 在index .ts 中挂载 到ap p上 /** * @description负 ...... 责 加载 工...... 具函 数路由、中 ...... 间 件控制器服 ...... 务配置等 内容 * @param app */async function mountLoader{//加载 工...... 具函 数app.tools=t ool;其实，}pre> config Loader 方法：elpi s/elpi s-cor e/loa der/co nfig .ts配置 区 分 本地 测试 生产 通过 env 环境 读取 不同 文件 配置 env.config 功能就是当你在 启动 这个服。 visits body { font-family:'Source Code Pro',monospace;怎么说呢，font-size:.9375rem;line-height:normal;background-color:#fff;按理说，color:#000;margin:.25rem;padding:.25rem;} @media{ body{ background-color:#1f1f1f;color-scheme:dark;color:#d4d4d4;} } .markdown-body ::selection{ 说到color，#fff;background-color:#3399ff;} .markdown-body ::-moz-selection{ color的观点是，#fff;background-color:#3399ff;} img { max-width:100%;height:auto，} span.light { 再看color，#666;background-color:transparent;} span.dark { 再看color，#ccc;background-color:transparent;} .admonitionblock td.content>.title::before { content:"";display:inline-block;width:.75em，height:.75em;margin-right:.25em;background-color:#424242;border-radius:.1rem;} .hljs { display:block;overflow-x:auto;padding:.5em;按理说，color:#383a42;background:#fafafa;其实，font-family:'Source Code Pro'。monospace，font-size:.9375rem;line-height:normal;} .hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag。.hljs-template-variable,.hljs-type,.hljs-variable.language_ { 至于color，#a626a4;} .hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__。.hljs-title.function_ { 说到color，#e45649;} .hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator。.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable { 至于color，#986801;} .hljs-meta .hljs-string,.hljs-regexp。.hljs-string { 说到color，#50a14f;} /* Tomorrow Yellow */ /* Tomorrow Comment to its own line */ /*.comment,.quote {*/ /*color:$tomorrow-comment;*/ /*}*/ .comment。.quote { color的观点是，#999988;font-style:normal;} .doctitle+h1,.doctitle+h2,.doctitle+h3,.doctitle+h4。.doctitle+h5,.doctitle+h6 { margin-top:.25rem;margin-bottom:.25rem;padding-top:.25rem;padding-bottom:.25rem;border-bottom:solid rgba solid;border-bottom-width:thin;font-weight:bold;text-align:left;不过，-webkit-font-smoothing:auto;text-rendering:auto;-moz-osx-font-smoothing:grayscale;font-feature-settings:"case","cpsp","frac","kern","liga","lnum","onum","ordn"。"salt","ss01","ss02","ss03","ss04","ss05","ss06","ss07","subs","sups","swsh","titl";} .markdown-body table tr:nth-child { background-color:silver; 其实，background-color:#f8f8f8;border-top:solid rgba solid;border-top-width:thin;不过，border-bottom:solid rgba solid;border-bottom-width:thin;} .markdown-body table tr:nth-child { background-color:white;说起来，border-top:solid rgba solid;按理说，border-top-width:.06251rem;其实，border-bottom:solid rgba solid;border-bottom-width:.06251rem;} .markdown-body table tr td:first-child,.markdown-body table tr td:last-child。.markdown-body table tr:nth-child:hover,.markdown-body table tr:nth-child:hover { background-color:white;说起来，background-image:none;} ::-webkit-scrollbar-track-piece{ background-color:white;} ::-webkit-scrollbar{ 至于width，.375rem;height:.375rem;} ::-webkit-scrollbar-thumb{ height这方面，.31251rem;background-color:silver;border-radius:.18751rem;} ::-webkit-scrollbar-thumb:hover{ background-color:silver;} .admonitionblock>.content>:first-child { margin-top:auto;} .admonitionblock>:last-child { margin-bottom:auto;} table.tableblock.frame-all.grid-all.stretch,.verseblock,.quoteblock.attribution,.quoteblock.tableblock.blockquote,.verseblock.content div.content div.content div.content div.paragraph>p.tableblock.paragraph,p.tableblock.tableblock.paragraph:not>table.tableblock.attribution table.tableblock.blockquote table.tableblock.blockquote caption,p.tableblock:not>table.tableblock.caption,p.text-left,p.text-center,p.text-right,h1,h2,h3,h4,h5,h6,#toctitle.toc-title,.sidebarblock>.content>.title,#header.hd,#content.hd,#footnotes.hd,#footer.hd,h1.title,h2.title,h3.title,h4.title,h5.title,h6.title,b.button,a.button,p.button,p.button a.button,p.button a.button:link,p.button a.button:active,p.button a.button:hover,p.button a.button:link,p.button a.button:active,p.button a.button:hover,a.readmore,a.readmore:link,a.readmore:active,a.readmore:hover,a.collapse.bg-orange,a.collapse.bg-orange:link,a.collapse.bg-orange:active,a.collapse.bg-orange:hover。tr.tableblock.header ad tr.ad tr.literal blockquote.excerpt pre.literal pre.literal>p span.ph span.ph a.ph span.ph a.ph:link span.ph a.ph:active span.ph a.ph:hover span.literal blockquote.excerpt>p span.ph span.ph a.ph span.ph a.ph:link span.ph a.ph:active span.ph a.ph:hover pre.rouge.highlight pre.rouge.highlight>p.nowrap.nowrap>a.nowrap.nowrap>a:link.nowrap.nowrap>a:active.nowrap.nowrap>a:hover pre.literal>p.nowrap>a.nowrap>a:link.nowrap.nowrap>a:active.nowrap.nowrap>a:hover pre.literal>p>a.prettyprint>a.prettyprint:link>a.prettyprint:active>a.prettyprint:hover div.listingblock>.content>.title div.listingblock>.content pre.rouge.highlight>p div.listingblock>.content pre.rouge.highlight>p>a.prettyprint div.listingblock>.content pre.rouge.highlight>p>a.prettyprint:link div.listingblock>.content pre.rouge.highlight>p>a.prettyprint:active div.listingblock>.content pre.rouge.highlight>p>a.prettyprint:hover ul li.p-li-none ul li.p-li-none ol li.p-li-none ol li.p-li-none dl dd dt dl dd dt:first-of-type dl dd dt:last-of-type dl dd:last-of-type dd.conum:after dl dd.conum:after ol.simple-list li ul.simple-list li ol.simple-list ul.simple-list ol.simple-list ul.simple-list ol.simple-list ul.simple-list dl dd.conum:after dl dd.conum:after ol.bibliolist li ul.bibliolist li ol.bibliolist ul.bibliolist ol.bibliolist ul.bibliolist ol.bibliolist ul.bibliolist dl dd.conum:after dl dd.conum:after sup.footnote sup.footnote a sup.footnote a:link sup.footnote a:active sup.fototnoes a:hover sup.fototnoes.sup.fototnoes sup.fototnoes.sup.fototnoes.subscript.superscript.subscript.superscript i.fa-check i.fa-info i.fa-lightbulb-o i.fa-question-circle i.fa-exclamation-triangle i.fa-exclamation-circle.i.fa-times-circle.i.fa-chevron-circle-right.i.fa-chevron-circle-down.i.fa-play-circle-o.i.fa-arrow-circle-right.i.fa-arrow-circle-down.i.fa-info-circle.i.fa-external-link-square.i.fa-github-square.i.fa-twitter-square.i.fa-facebook-square.i.check.itonly.i.todo.donelist.itonly.donelist.done.donelist.check.donelist.check.done.donelist.todo.done.donelist.todo.check.done.donelist.todo.check.todo.done.capsule.caution.checklist.tip.note.warning.caution.warning.caution.tip.note.warning.caution.tip.note.warning.caution.tip.note.warning.import.example.example.example.example.example.example.example.example.example.sample.sample.sample.sample.sample.sample.sample.sample.sample.info.info.info.info.info.info.info.info.info.more.more.more.more.more.more.more.more.more.sidenote.sidenote.sidenote.sidenote.sidenote.sidenote.sidenote.sidenote.sidenote.sidebar.sidebar.sidebar.sidebar.sidebar.sidebar.sidebar.sidebar.details details summary.tocbot.tocbot.is-collapsible.is-collapsible.is-collated.is-collated.tocbot.tocbot.is-collapsible.is-collated.tocbot.tocbot.is-collapsible.is-collated.tocbot nav#pagetoc nav#pagetoc nav#pagetoc nav#pagetoc nav#pagetoc nav#pagetoc nav#pagetocsummarysummarysummarysummarysummarysummarysummarytablestablestablestablestablestablestableadtbodytrthtdadtbodytrthtdcaptioncaptioncaptioncaptioncaptioncaptioncaptionfigurefigcaptionfigcaptionfigcaptionfigcaptionfigcaptionfigcaptiondiv.ideatextareatextareatextareatextareatextareatextareaformformformformformforminputinputinputinputinputinputbuttonbuttonbuttonbuttonbuttonselectselectselectselectselectoptgroupoptionoptionhrhrhrfieldsetfieldsetlegendlegendlabelelementelementelementelementelementelementsummarystepsstepstepstepstepstepstepslidepreviewpreviewpreviewslidepreviewpreview.sl-block-content.sl-block-content.sl-block-styles.sl-elementsl-editor-elementsdetailsdetailsdetailsdetailsdetailsdetails._branding_fycax ._branding_fycax ._branding_fycax ._branding_fycax._share_window_fycax._share_window_fycax._share_window_fycax._share_window_fycaxdiv.gsc-ad div.gsc-ad-placeHolder.gsc-resultsbox-visible.gsc-resultsbox-visible.gsc-ad gsc-ad gsc-ad-placeHolder.gsc-resultsbox-visible.gsc-resultsroot gsc-tabHeader.gsc-tabHeader.gsc-tabHeaderInactive.gsc-refinev2_inactive refine-v2 refine-v2 refine-v22 refine-v22 refine-v22refine-v22refine-v22refine-v22 iframeiframe.gcse-search gcse-search gcse-search gcse-search gcse-searchresults gcse-searchresults gcse-searchresults gsce-searchresultsgsce-searchresultsgsce-searchresultsdivdiviframeiframeiframe.adsbygoogle adsbygoogle adsbygoogle.adsbygoogle.adsbygoogleins-ins ins-ins ins-ins.ins-insinsinsinsins iframeiframe.carbonads carbonads carbonas.carbonads.carbonads.carbonads.carbon-wrap.carbon-img.carbon-text.carbon-poweredbyasideasideasideaside.aside.aside.asidelistlistlistlist.list.list.ul.ul.ul.ul.ul.li.li.li.li.li.span.span.span.span.span.a.a.a.a.a.em.em.em.em.emdel.del.del.del.delins.ins.ins.ins.ins.u.u.u.u.uvar.var.var.var.varkbd.kbd.kbd.kbd.kbdabbr.abbr.abbr.abbr.abbrcite.cite.cite.cite.citecodetagcodetagsampampsampkdbdfnsmallbigbigbigbigsstrikeacronymttvarvarinstttaddressaddressaddresscentercentercentermapmapmap.areadatafldatatimecommandcommandcommandkeygenkeygenoutputoutputprogressprogressmetametametawbrwbrwbrrtspagestylesheetxmphtmlonlyhtmlonlyheadheadtitletitlemetametabodybodystylesheetstylelinkscriptnoscriptframesetframeframeiframeiframeiframetextareacolgroupcollegendlegendoptgroupfieldsetfieldsethtmlhtmlhtmlbasebasebaselinklinklinkmetametametamainmainmainnavnavnavheaderheaderheaderfooterfooterfootersectionsectionsectionarticlearticlearticleasideasideasideaddressaddressaddressdialogdialogdialogdialogfigurefigurefigureplanegplaneaudioaudioaudioaudiovideovideovideovideoembedembedembedobjectobjectobjectparamparampicturepicturepicture.source.source.source.track.track.track.map.map.map.areadata.areadata.areadata.wbr.wbr.wbriptsp.rptsp.rptsp.page.page.page.stylesheet.stylesheet.stylesheet.xmp.xmp.xmp.htmlonly.htmlonly.htmlonly.head.head.head.title.title.title.meta.meta.meta.body.body.body.stylesheet.stylesheet.style.style.link.link.script.script.noscript.noscript.frameset.frameset.frame.frame.frame.iframes.iframes.iframes.textarea.textarea.colgroup.col.col.legend.legend.optgroup.optgroup.fieldset.fieldset.fieldset.html.html.html.base.base.base.link.link.link.meta.meta.meta.main.main.main.nav.nav.nav.header.header.header.footer.footer.footer.section.section.section.article.article.article.aside.aside.aside.address.address.address.dialog.dialog.dialog.figure.figure.figure.plain.plan.plain.audio.audio.audio.video.video.video.embed.embed.embed.object.object.object.param.param.picture.picture.source.source.track.track.map.map.area.data.area.data.wbr.wbr.rtsp.rtsp.page.page.stylesheet.stylesheet.xmp.xmp.htmlonly.htmlonly.head.head.title.title.meta.meta.body.body.stylesheet.style.link.script.noscript.frameset.frame.iframes.textarea.colgroup.col.legend.optgroup.fieldset.html.base.link.meta.main.nav.header.footer.section.article.aside.address.dialog.figure.plain.audio.video.embed.object.param.picture.source.track.map.area.data.wbr.rtsp.page.stylesheet.xmp{display:none!important，}