Jiess文档

Appearance

安装 ​

Jiess基础库 Git仓库

bash
git clone https://gitee.com/wgzimg/jiess-base

添加子模块 ​

如果用Git管理项目，可添加基础库作为项目的子模块

bash
# 存在src目录的项目中
git submodule add -- "https://gitee.com/wgzimg/jiess-base" src/.jiess

# 没有src目录的项目中
git submodule add -- "https://gitee.com/wgzimg/jiess-base" .jiess

注：根据项目的目录结构，放置于具体位置

使用插件安装 ​

插件安装基础库，目前支持webpack，vite和umi环境

bash
npm i @jiess/utils -S
js
# 引入webpack插件
const JiessBase = require('@jiess/utils/webpack');

// ...

new JiessBase({
	env: 'react16.8'
})
js
# 引入vite插件

// ...

JiessBase({
	env: 'vue3'
})

本插件会自动检查src目录是否存在，若存在则会安装到src/.jiess目录

启动项目时，插件自动检测.jiess是否存在，如果不存在， 则会自动克隆到.jiess目录，若已存在，则忽略后续操作

安装并导入相关模块 ​

在明确框架环境和UI后，便可根据下面的目录结构找到对应的入口

sh
│  config.js        # 基础库配置文件
│  index.js         # 插件自动生程的入口文件
│  readme.md
│
├─react168antd
│  ├─cdn
│  │  │  hook.js    # hook根文件
│  │  │  index.js   # cdn入口文件
│  │  │  ...
│  │
│  ├─cli
│  │  │  entry.js   # 入口模板（插件自动拷贝到基础库根目录）
│  │  │  hook.js    # hook根文件
│  │  │  ...
│  │
│  ├─css            # 基础样式
│  └─modules        # 基础组件
│
├─vue2element
│  ├─cdn
│  │  │  hook.js    # hook根文件
│  │  │  index.js   # cdn入口文件
│  │  │  ...
│  │
│  ├─cli
│  │  │  entry.js   # 入口模板（插件自动拷贝到基础库根目录）
│  │  │  hook.js    # hook根文件
│  │  │  ...
│  │
│  ├─css            # 基础样式
│  └─modules        # 基础组件
│
├─vue3element
│  ├─cdn
│  │  │  hook.js    # hook根文件
│  │  │  index.js   # cdn入口文件
│  │  │  ...
│  │
│  ├─cli
│  │  │  entry.js   # 入口模板（插件自动拷贝到基础库根目录）
│  │  │  hook.js    # hook根文件
│  │  │  ...
│  │
│  ├─css            # 基础样式
│  └─modules        # 基础组件
│
└─_resource         # 公共模块

html单页示例 ​

本例展示无限弹框在html单页中的使用

html单页中使用setup配置 ​

html
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>vue2 基础库安装</title>
		<link rel="stylesheet" href="./styles/common.css" />
		<link rel="stylesheet" href="./styles/childs.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入vue库 -->
		<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入Jiess核心库 -->
		<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
		<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
		<!-- 引入Jiess工具库 -->
		<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
		<script src="//unpkg.com/@jiess/utils"></script>
		<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
		<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
	</head>

	<body>
		<div id="root"></div>
		<script type="module">
			import { $Area, $JiessDialog, $tanInstance, $dialogInstance } from '../../jiess-base/vue2element/cdn/index.js';
			const { $component, $entry } = JiessCore;
			// 初始化安装Jiess（JiessEnv为vue2的环境适配器）
			const { JiessComponent } = $entry(JiessEnv, {}, {
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 注入全局的消息提示
				$msg: (message, type = 'success') => ELEMENT.Message({ message, type })
			});
			// 全局注册Jiess组件
			$component('jiess', JiessComponent);
			new Vue({
				render: h => h(JiessComponent, {
					attrs: {
						setup() {
							// 在项目最外层使用全局弹框组件
							this.add(this.render({ is: $JiessDialog }));
							// 业务代码区
							this.add('hello,Jiess');
						}
					}
				})
			}).$mount('#root');
		</script>
	</body>

</html>
html
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>vue3 基础库安装</title>
		<link rel="stylesheet" href="./styles/common.css" />
		<link rel="stylesheet" href="./styles/childs.css" />
		<!-- Import style -->
		<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
		<!-- Import Vue 3 -->
		<script src="//unpkg.com/vue@3"></script>
		<!-- Import component library -->
		<script src="//unpkg.com/element-plus"></script>
		<!-- 引入Jiess核心库 -->
		<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
		<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
		<!-- 引入Jiess工具库 -->
		<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
		<script src="//unpkg.com/@jiess/utils"></script>
		<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
		<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
	</head>

	<body>
		<div id="root" />
		<script type="module">
			import { $Area, $JiessDialog, $tanInstance, $dialogInstance } from '../../jiess-base/vue3element/cdn/index.js';
			const { $component, $entry } = JiessCore;
			// 初始化安装Jiess（JiessEnv为vue3的环境适配器）
			const { JiessComponent } = $entry(JiessEnv, Vue, {
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 注入全局的消息提示
				$msg: (message, type = 'success') => ElementPlus.ElMessage({ message, type })
			});
			// 全局注册Jiess组件
			$component('jiess', JiessComponent);
			Vue.createApp({
				render: () => Vue.h(JiessComponent, {
					setup() {
						// 在项目最外层使用全局弹框组件
						this.add(this.render({ is: $JiessDialog }));
						// 业务代码区
						this.add('hello,Jiess');
					}
				})
			}).mount('#root');
		</script>
	</body>

</html>
html
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>react 基础库安装</title>
		<link rel="stylesheet" href="./styles/common.css" />
		<link rel="stylesheet" href="./styles/childs.css" />
		<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
		<!-- 引入react库 -->
		<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
		<!-- 引入ant-design -->
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
		<!-- 引入Jiess核心库 -->
		<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
		<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
		<!-- 引入Jiess工具库 -->
		<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
		<script src="//unpkg.com/@jiess/utils"></script>
		<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
		<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
	</head>

	<body>
		<div id="root"></div>
		<script type="module">
			import { $Area, $JiessDialog, $tanInstance, $dialogInstance } from '../../jiess-base/react168antd/cdn/index.js';
			const { $component, $entry } = JiessCore;
			// // 初始化安装Jiess（JiessEnv为react的环境适配器）
			const { JiessComponent } = $entry(JiessEnv, React, {
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 注入全局的消息提示
				$msg: (message, type = 'success') => antd.message[type](message),
			});
			// 全局注册Jiess组件
			$component('jiess', JiessComponent);
			const container = document.getElementById('root');
			const root = ReactDOM.createRoot(container);
			root.render(React.createElement(JiessComponent, {
				setup() {
					// 在项目最外层使用全局弹框组件
					this.add(this.render({ is: $JiessDialog }));
					// 业务代码区
					this.add('hello,Jiess');
				}
			}));
		</script>
	</body>

</html>

常规项目中使用 ​

根据技术栈环境，安装基础库需要用到的ui

bash
npm i @jiess/plus @jiess/utils element-ui -S
# 或
yarn add @jiess/plus @jiess/utils element-ui
bash
npm i @jiess/plus @jiess/utils element-plus -S
# 或
yarn add @jiess/plus @jiess/utils element-plus
bash
npm i @jiess/plus @jiess/utils antd -S
# 或
yarn add @jiess/plus @jiess/utils antd

定义注册文件 ​

通常在Jiess基础库的同级目录，定义JiessConfig目录，存放Jiess相关配置和注册信息

js
// vue-cli2 -> src/jiessConfig/index.js
import Vue from 'vue';
import { Message, Loading } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JiessMidder from '@jiess/utils/midder';
import {
	$Area,
	$SuperTable,
	$tanInstance,
	$ActionButton,
	$ActionButtons,
	$dialogInstance,
	$TableTools,
	$TableFilter,
	$ExpandFilter,
	// --------------
	$modules
} from '@/.jiess';
import '@/.jiess/vue2element/css/base.css';
// ===============================================================
export const tools = $modules;
const { JiessEnv, $entry, $component } = $modules;
const jiess = $entry(JiessEnv,
	// 静态注入到jiess实例中
	{},
	// 动态注入到组件上下文中
	{
		area: $Area,
		$tan: $tanInstance,
		dialog: $dialogInstance,
		// 定义项目共享中介者
		$midder: new JiessMidder('GlobalMidder', 'no-store'),
		// 注入全局的消息提示
		$msg: (message, type = 'success') => Message({ message, type }),

	});

Vue.use(Loading.directive);
Vue.component('jiess', jiess.JiessComponent);
$component('jiess', jiess.JiessComponent);
$component($SuperTable.name, $SuperTable);
$component($ActionButton.name, $ActionButton);
$component($ActionButtons.name, $ActionButtons);
$component($TableTools.name, $TableTools);
$component($TableFilter.name, $TableFilter);
$component($ExpandFilter.name, $ExpandFilter);
js
// vite-vue3 -> src/jiessConfig/index.js
import 'element-plus/dist/index.css';
import { ElMessage } from 'element-plus';
import { h, reactive, withDirectives } from 'vue';
import JiessMidder from '@jiess/utils/midder';
import {
	$Area,
	$SuperTable,
	$tanInstance,
	$ActionButton,
	$ActionButtons,
	$dialogInstance,
	$TableTools,
	$TableFilter,
	$ExpandFilter,
	// --------------
	$modules
} from '@/.jiess';
import '@/.jiess/vue3element/css/base.css';
// ===============================================================
export const tools = $modules;
export default {
	install: (app) => {
		const { JiessEnv, $entry, $component } = $modules;
		const jiess = $entry(JiessEnv,
			// 静态注入到jiess实例中
			{
				h,
				reactive,
				withDirectives,
			},
			// 动态注入到组件上下文中
			{
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 定义项目共享中介者
				$midder: new JiessMidder('GlobalMidder', 'no-store'),
				// 注入全局的消息提示
				$msg: (message, type = 'success') => ElMessage({ message, type }),
			});
		app.config.globalProperties.$jiess = jiess;
		app.component('jiess', jiess.JiessComponent);
		$component('jiess', jiess.JiessComponent);
		$component($SuperTable.name, $SuperTable);
		$component($ActionButton.name, $ActionButton);
		$component($ActionButtons.name, $ActionButtons);
		$component($TableTools.name, $TableTools);
		$component($TableFilter.name, $TableFilter);
		$component($ExpandFilter.name, $ExpandFilter);
	}
}
js
// vue-create-app -> src/jiessConfig/index.js
import React from 'react';
import { message } from 'antd';
import JiessMidder from '@jiess/utils/midder';
import {
	$Area,
	$SuperTable,
	$tanInstance,
	$ActionButton,
	$ActionButtons,
	$dialogInstance,
	$TableTools,
	$TableFilter,
	// --------------
	$modules
} from '@/.jiess';
import '@/.jiess/react168antd/css/base.css';
// ===============================================================
export const tools = $modules;
const { JiessEnv, $entry, $component } = $modules;

const jiess = $entry(JiessEnv,
	// 静态注入到jiess实例中
	{
		useRef: React.useRef,
		useEffect: React.useEffect,
		useState: React.useState,
		useReducer: React.useReducer,
		createElement: React.createElement,
		useTransition: React.useTransition
	},
	// 动态注入到组件上下文中
	{
		area: $Area,
		$tan: $tanInstance,
		dialog: $dialogInstance,
		// 定义项目共享中介者
		$midder: new JiessMidder('GlobalMidder', 'no-store'),
		// 注入全局的消息提示
		$msg: (msg, type = 'success') => message[type](msg),
	});
$component('jiess', jiess.JiessComponent);
$component($SuperTable.name, $SuperTable);
$component($ActionButton.name, $ActionButton);
$component($ActionButtons.name, $ActionButtons);
$component($TableTools.name, $TableTools);
$component($TableFilter.name, $TableFilter);
export const JiessComponent = jiess.JiessComponent;

注册Jiess ​

javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

import '@/jiessConfig';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router';
import jiess from './jiessConfig';

createApp(App).use(jiess)
	.use(router).mount('#app');
javascript
// react环境无需注册过程，使用时引入JiessComponent组件即可

安装全局弹框 ​

安装全局弹框并非使用Jiess基础库的必要条件，实际研发中可酌情使用

vue
// vue-cli -> App.vue

<template>
	<div id="app">
		<jiess :setup="setup" />
		<router-view />
	</div>
</template>
<script>
	import { $JiessDialog } from '@/.jiess';
	export default {
		created() {
			this.setup = function() {
				// 注册全局弹框组件
				this.add(this.render({ is: $JiessDialog }))
			}
		}
	}
</script>
vue
// vite-vue3 -> App.vue

<template>
	<jiess :setup="setup" />
	<router-view />
</template>
<script setup>
	import { $JiessDialog } from '@/.jiess';
	function setup() {
		// 在项目最外层使用全局弹框组件
		this.add(this.render({ is: $JiessDialog }));
	}
</script>
js
// create-react-app -> app.js

import { JiessComponent } from './jiessConfig';
import { $JiessDialog } from '@/.jiess';
import './App.css';
function App() {
  return (
    <div className="App">
      <JiessComponent setup={function () {
				// 注册全局弹框组件
				this.add(this.render({ is: $JiessDialog }))
			}} />
    </div>
  );
}
export default App;

页面中使用无限弹框 ​

vue
// 页面中
<template>
	<div class="home">
		<jiess :setup="setup" />
	</div>
</template>

<script>
function setup() {
	let level = 1;
	const area = this.area({ header: '无限弹框示例' });
	const config = (show) => ({
		title: `当前层级【第${level++}层】`,
		children: [
			area.Button({
				type: 'primary',
				children: '新弹出一层',
				onClick: () => this.dialog(config)
			}),
			area.Button({
				type: 'warning',
				children: '关闭当前层',
				onClick: () => (show.value = false)
			}),
			area.Button({
				type: 'warning',
				children: '关闭最上层',
				onClick: () => this.dialog().close()
			}),
			area.Button({
				type: 'danger',
				children: '关闭所有层',
				onClick: () => {
					level = 1;
					this.dialog().closeAll();
				}
			})
		]
	});

	area
		.add(
			area.Button({
				type: 'primary',
				children: '开启无限弹框',
				onClick: () => this.dialog(config)
			})
		)
		.done();
}

export default {
	name: 'HomeView',
	created() { this.setup = setup; }
};
</script>
vue
// 页面中
<template>
  <div class="home">
    <jiess :setup="setup"></jiess>
  </div>
</template>

<script setup>
function setup() {
  let level = 1;
  const area = this.area({ header: '无限弹框示例' });
  const config = (show) => ({
    title: `当前层级【第${level++}层】`,
    children: [
      area.Button({
        type: 'primary',
        children: '新弹出一层',
        onClick: () => this.dialog(config)
      }),
      area.Button({
        type: 'warning',
        children: '关闭当前层',
        onClick: () => show.value = false
      }),
      area.Button({
        type: 'warning',
        children: '关闭最上层',
        onClick: () => this.dialog().close()
      }),
      area.Button({
        type: 'danger',
        children: '关闭所有层',
        onClick: () => {
          level = 1;
          this.dialog().closeAll();
        },
      })
    ]
  });

  area
    .add(
      area.Button({
        type: 'primary',
        children: '开启无限弹框',
        onClick: () => this.dialog(config),
      })
    ).done();
}
</script>
js
// 页面中
import { JiessComponent } from './jiessConfig';
import './Home.css';
function setup() {
  let level = 1;
  const area = this.area({ title: '无限弹框示例' });
  const config = show => ({
    okType: 'primary',
    okText: '新弹出一层',
    cancelText: '关闭当前层',
    title: `当前层级【第${level++}层】`,
    onOk: () => this.dialog(config),
    onCancel() {
      // 或根据响应式关闭当前层
      show.value = false;
    },
    children: area.Button({
      children: '关闭所有层',
      onClick: () => {
        level = 1;
        this.dialog().closeAll();
      }
    })
  });

  area.add(
    area.Button({
      type: 'primary',
      children: '开启无限弹框',
      onClick: () => this.dialog(config)
    })
  ).done()
}

function Home() {
  return (
    <div className="App">
      <JiessComponent setup={setup} />
    </div>
  );
}
export default Home;

拓展总结 ​

$entry安装 ​

$entry为Jiess的内置模块，用于Jiess的安装，作为函数，其接收三个参数

  • 首参：提供对应框架环境的环境适配器
  • 次参：静态注入到jiess实例中的对象
  • 三参：动态注入到组件上下文中的对象

比如上面的示例中，我们就动态注入$msg，setup中就可以使用this.$msg获取

应用环境 ​

最后，咱们介绍Jiess中的setup函数的应用

介绍

在setup中，我们用不同于原框架的Jiess语法来构造节点，以及使用Jiess响应式 来接管数据交互和动态渲染；我们甚至可以将其想象为原框架环境中的独立王国

  • vue2 页面中使用基础组件

默认在安装中，已注册了全局组件</jiess>

html
<template>
	<jiess :setup="setup"></jiess>
</template>

<script>
	export defualt{
		created(){
			this.setup = function setup() {
				// jiess环境下的setup配置函数中
			}
		}
	}
</script>
  • vue3 页面中使用基础组件

默认在安装中，已注册了全局组件</jiess>

html
<template>
	<jiess :setup="setup"></jiess>
</template>

<script setup>
	function setup() {
		// jiess环境下的setup配置函数中
	}
</script>
  • react 页面中使用基础组件

注册过程种会构建原框架组件 JiessComponent

js
import React from 'react';
import { JiessComponent } from '@/jiessConfig';
const { Component, createElement } = React;
export class MyPage extends Component {
	render() {
		return createElement(JiessComponent, {
			setup() {
				// jiess环境下的setup配置函数中
			}
		})
	}
}
  • jiess 组件中
js
export const MyComponent = {
	name: 'MyComponent',
	isJiess: true,
	setup(props) {
		// jiess环境下的setup配置函数中
	}
}