Elpis 全栈应用框架-- 总结

elpis 是什么？

在日常的开发过程中，我们难免会出现在一个页面中需要多次的编写一些增删改查的方法，并且需要调用多个接口去完成数据的请求。不难看出，这些内容在我们日常的工作占据着很大的比例，但它又是重复性高的工作内容。 elpis 应用框架就是用来解决这些高重复性的问题。

elpis 的核心内容

elpis 的重点核心内容在于 elpis-core(BFF层) 和 DSL 模型。通过这 BFF 层，能够将由数据层传递过来的数据进行整合和统一，使得在一个页面能够将原先需要从不同接口调动的数据统一到一个接口上，并且能够对请求进行统一处理，例如:身份验证，跨域的处理，日志的监控等。而通过 DSL 模型的构建，可以对系统领域进行细致的划分，你可以将它理解为点一个汉堡套餐，你选择你想要吃的主食(领域)，然后再选你想要的一些小吃(项目配置)，这种模型能够大幅度的缩减在前期对项目架构设计所花费的时间。

elpis-core 解析引擎

elpis-core 作为整个应用框架的核心内容，它充当了服务端到客户端的中间层，它在业务处理之前，先会对请求进行一定的检验和处理，通过一层层的校验和处理，走到中心的业务逻辑处理区域，然后对业务逻辑进行处理，例如: 渲染页面，从服务端读取信息等。最后再一步一步的退出到外部。因此我们便需要各个处理器来统一并处理相应的步骤。

处理器介绍

在上面我们可以得知，想要实现整体洋葱圈模型，我们应该具备能够处理以下内容的处理器。

路由请求的处理 -- router
路由参数的校验规则 -- router-schema
参数校验、错误捕捉等拦截处理 -- middleware
渲染、获取信息等操作 -- controller
向服务端发送信息 -- service
读取项目配置 -- config
一些第三方的扩展内容 -- extend

webpack 工程化

在实现完核心内容的开发后，我们便需要进行打包，这也是我们在日常的开发中不可避免的内容，我们通过将开发的内容通过打包引擎，对文件进行整理、压缩、分类，一方面将文件转换为浏览器能够读懂的格式，另一方面是减小文件的大小，将公共的功能进行抽离，从而提高效率。文件打包完成后需要给到我们的解析引擎进行解析，最终渲染出相应的页面。

编译解析

这部分我们需要通过各种 loader 对相应的文件进行处理，包括但不限于:

vue-loader -- .vue
bable-loader -- .js
url-loader -- png | jpg | jepg | gif
style-loader -- .css | .less
css-loader -- .css | .less
less-loader -- .less
file-loader -- eot | svg | ttf | woff | woff2

对于 vue 模块我们还需要通过一个 vueLoaderPlugin 对 vue 文件进行解析

分包处理

对于文件的分包，则根据代码的改动与使用的频率将代码分为三种类型的包，分别是:

vendor: 第三方插件的包
common: 公共内容包
default: 默认包，正常页面各自的包

压缩优化

在这一部分，首先我们需要对我们的业务代码进行压缩，然后根据不同的环境进行相应的功能配置，从而满足不同环境的文件需求。

生产环境

在生产环境中，我们的项目是需要上线的项目，因此如何最大效率的缩小项目文件的大小与如何提高打包的速度成了我们必须考虑的内容，并需要将一些开发时的调试代码进行忽略。在 elpis 中我们需要用到的打包插件有:

happyPack: 将 webpack 的文件解析任务分为多个子线程处理，加快打包速度。
css-minimizer-webpack-plugin: 压缩 css 资源
terser-webpack-plugin: 使用 terser-webpack-plugin 中的并发和缓存来提升压缩阶段的性能
html-webpack-inject-attributes-plugin: 浏览器在请求资源时，不发送用户的身份凭证
clean-webpack-plugin: 清空 webpack 目录下的所有文件，以及未使用的 webpack 资源

开发环境

在开发环境中，我们更需要注重如何在开发的过程中，实时的查看我们代码的效果。这便需要到热更新模块，通过将 js | css 文件放置到一台服务器中，再对文件进行监督，在文件被修改后，重新触发打包流程，然后浏览器重新发起获取资源请求。

DSL 领域模型

DSL(Domain Specific Language，领域特定语言)，指的是对特定的领域设定的语言与模型体系。通过 DSL 能够将领域进行划分，然后特定的模型来解决特定的领域。

通过上面的内容，我们大概了解的 DSL 模型是一个什么东西。接下来我们便需要思考如何编写符合我们需求的 DSL 模型。

首先是项目的基本内容，包括:

项目使用的模板
项目的名称
项目的描述
项目的图标
项目的首页

其次是对于项目的描述文档对于后台管理页面的开发，大致可以将页面分为以下几种:

数据展示页面
第三方页面
信息可视化页面等个性页面
权限管理等表格类页面

通过以上的内容，我们得出以下的 DSL 模板的初步设计

js 复制代码

 菜单列表
  - 菜单一
      菜单的 key 
      菜单的名称
      该菜单是否存在子菜单
      该页面的类型
      相应的页面类型的配置
  - 菜单二
      菜单的 key 
      菜单的名称
      该菜单是否存在子菜单
      该页面的类型
      相应的页面类型的配置

接下来便是对各个类型页面的内部配置。

schema 页面

这部分的页面为表格页面，一般情况下这部分的页面存在着，复用度高，功能相似程度高的特点，也就是传说中的 CRUD 页面，因此在这部分我们需要将内容进行抽离。

js 复制代码

schema 页面的配置
    该页面数据源的 api
    该页面的数据页面
        数据的 key
            数据的类型
            数据的名称
            页面展示数据的样式 // 这里通过将这些配置传入到 element-ui 中，从而实现相应的配置
            在搜索栏中相关的配置 // 这里表示在顶部的搜索栏中展示的内容
        数据的 key
            数据的类型
            数据的名称
            页面展示数据的样式 
            在搜索栏中相关的配置 
该页面的操作配置
    头部操作内容
        单个操作的配置 // 例如新增等
            操作名称
            操作触发的事件
            按钮的类型
    列表操作内容 // 对应每一条数据的操作
        单个操作的配置 // 例如删除等
            操作名称
            操作触发的事件
            按钮的类型
            操作事件携带的参数  // params

custom 页面

这个页面负责于定制化的开发，属于那些单页面的开发，例如: 可视化、地图等,然后通过路径的配置跳转到对应的页面去。

js 复制代码

custom 页面的配置
    自定义单页面的路径

iframe 页面

这个页面则是将第三方页面导入到项目中，通过将别人的网页地址进行配置，然后页面将呈现别的网页内容

js 复制代码

iframe 页面的配置
    第三方页面的地址

sider 页面

这个页面则是在页面中新增一个侧边栏，其内容可以嵌套前方的内容

动态组件的开发

在了解完前面的 DSL 模型后，我们知道了 DSL 模型，它类似于预制菜，并且主要在 schema 页面中使用。那么设置完 DSL 菜单后，我们就需要来制作相应的预制菜了。

通过在 schema 文件夹下的 component 文件夹中，提前编写好我们会运用到的组件功能，例如: 新增内容侧边弹窗，修改内容的侧边弹窗等。然后在相应的数据中进行配置，这样该组件就能够对配置了该组件的数据进行操作。

js 复制代码

schema 页面的配置
    该页面数据源的 api
    该页面的数据页面
        数据的 key
            数据的类型
            数据的名称
            页面展示数据的样式 // 这里通过将这些配置传入到 element-ui 中，从而实现相应的配置
            在搜索栏中相关的配置 // 这里表示在顶部的搜索栏中展示的内容
            组件2 配置 // 配置完内容后，可以在组件中操作该数据 
            组件1 配置 
component 配置
    组件名字(采用组件文件名称的驼峰命名)
        组件在页面中展示的名称
        组件中操作按钮的名称
        组件携带的关键参数

npm 包的发布

最后，我们来谈一下有关于 npm 包的发布，由于我们是封装一个应用框架，那么就一定需要面临发布 npm 包，才能让更多人使用。以下是发布一个 npm 包的步骤

首先你需要有一个 npm 的账号
然后你需要将你的应用框架进行 业务代码 与 实现代码 的分离
- 这部分需要抽离三个部分的代码
- 核心解析引擎
- 打包引擎
- 一些动态拓展的代码
然后便是制作 npm 包了
- 检查是否有镜像源，如果有则需要清空
  - 清空镜像源
- 登录 npm
- 确认 npm 的账号
- 发布 npm 包

具体的代码操作如下:

js 复制代码

// 查看镜像源
npm config get

// 清空镜像源
npm config set registry

// 登录 npm
npm login

// 确定当前登录的 npm 账号
npm whoami

// 发布 npm 
npm publish --access public  // 公有化提交，第一次提交需要进行公有化提交。私有化的包需要付费。
npm publish

总结

通过使用 elpis 进行开发项目，我相信它可以为我们节省大部分的时间，但由于 DSL 的文档具有较高的文档编写规范，因此想要使用好整个框架，你需要认真观看使用文档。

对于后续的开发，第一点便是需要对动态组件进行一个扩展，然后对对应的动态组件能够有对应的使用文档。第二点是兼容更多的语言，例如: react、angular 等。第三点是对当前的领域模型进行更深层次的规划与编写。