介绍

Jiess基础库，是实践的总结，是基于Jiess核心库的拓展

注：本库依赖@jiess/plus，并结合UI框架搭配使用

基础库的设计

与通常的理解不同，基础库并没有发布到npm仓库，而是置于项目本地的目录中

为什么不是npm包

早期的Jiess基础库也是npm依赖包，但逐渐暴露出以下问题：

• 需要支持单页的html页面
• 不方便调试代码和排查问题
• 偶尔定制化调整库中代码

总结就是，Jiess基础库需要应对各种天马行空的需求，所以需要给使用者适当的调整空间

命名与放置

Jiess基础库，对命名没有限制；仅约定在项目中以.jiess命名目录

• 在html单页中：该环境不支持以.开头的文件夹，所以不做命名约定
• 在项目中命名：建议以.jiess命名，因为Jiess自动化插件会读取该目录名

Jiess自动化插件

• 该插件是可根据不同的项目环境安装Jiess基础库
• 如果项目中存在src目录，则在src/.jiess目录下安装
• 如果项目中不存在src目录，则在根目录/.jiess下安装

项目启动时会自动查看基础库目录是否存在，如果不存在则会从仓库中拉取基础库

特点

支持多种研发环境

Jiess基础库使用export导出，所以在html单页中支持import导入

注：html单中导入设置script标签：type=module

结合UI框架

结合主流，Jiess基础库选择了三种UI框架，与三种技术栈做搭档

• vue2项目：使用 element-ui
• vue3项目：使用 element-plus
• react项目：使用 antd-ui

研发中，咱们搭配UI框架，省去了重复造轮子；所以，Jiess基础库同样搭配UI使用

使用其他的UI框架？

Jiess基础库与UI框架需要严格的匹配，才能使用其提供的拓展能力， 如果确有必要的话，那就结合自己的UI，重构一份吧配置吧

• 举例 vue技术栈下使用antd

首先在.jiess/vue3/antd下构建目录，然后参考内置的.jiess/vue3/element目录中的文件， 针对弹框，布局和列表三大模块进行重构，便可以为自己量身打造一份配置

功能与应用

Jiess基础库，针对以下三类问题，给出简化方案

除了这三类问题，Jiess基础库还提供了一些常用组件哦

布局与渲染

思考一下？

页面的一行，放几个元素？每个元素占据多大的宽度？诸如此类需求（尤其是表单页）很常遇到吧？ 需求其实很简单，可如何让常见的需求做到通用，你会如何处理呢？

以下是Jiess基础库，布局与渲染模块的功能：

快速布局

• 页面中构建一块区域，每块区域有单独的Form，Card和Row，区域内容嵌套于区域内部
• 每块区域可以方便的定义标题和头部按钮，并对其内部表单进行表单校验，以及数据控制
• 每块区域单独定义内部组件的宽度，同时也可对内部组件的宽度单独控制，实现快速布局

快捷渲染

• 为简化实际开发种对表单多层嵌套的问题，对常用的表单组件提供了快捷渲染的方法
• 快捷渲染方法种，对组件外层包裹了FormItem和Col,实现了对组件的数据控制和布局控制
• 在简化组件嵌套的同时，对表单的校验也给出简洁的优化方案，进一步降低代码冗余

全局弹框

思考一下

弹框是每个项目的刚性需求，然而弹框的复用性通常是很低的，在需要用到的地方往往都需要单独的定义； 那么能不能做一个全局的弹框，满足整个项目任意的弹框需求？

以下是Jiess基础库，布全局弹框模块的功能：

• 基于Jiess组件，支持弹框中任意内容的渲染
• 实现无限级弹层，实现了对任意弹框需求的支持
• 在弹框操作种可以方便的使用Jiess语法以及Jiess组件

列表模块

思考一下

列表页面，常用于作为每个模块的“门面”，一般包含筛选，列表，分页三个部分，三者间的字段存在高度的相似性， 那能否将三者统一维护，从而降低开发与维护的复杂度呢？

以下是Jiess基础库，列表模块的功能：

• 列表模块由筛选区，列表主体区，和分页区三个部分构成，支持灵活布局以及自由组合
• 实现了列表表头，筛选区，以及新增区，编辑区，四区间的有机整合，有助于字段统一