Jiess文档

Appearance

Jiess 五端对比速查表 ​

同一个计数器功能，三种 Web 技术栈的实现对比。Jiess 一份代码同时运行在 Vue 3、React 和 Web Components 中。v6.0 新增 Three.js（3D 场景）和 Konva（2D Canvas）适配器，详见 工具&导出 中的 $entry 示例。

代码对比 ​

Vue 3 · TemplateReact · JSXJiess · 纯 JS 配置对象
vue
<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">+1</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>
<style scoped>
span { font-size: 24px; margin-right: 10px; }
</style>
jsx
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  )
}
// 样式需另写 CSS/CSS-in-JS
javascript
// 本段代码在 Vue 3、React 和 Web Components 中完全一致
import { $ref } from '@jiess/core'

const count = $ref(0)

function setup() {
  this.add({ is: 'div', children: [
    { $proxy: count, is: 'span',
      style: { fontSize: '24px', marginRight: '10px' } },
    { is: 'button', children: '+1',
      onClick: () => count.value++ }
  ]})
}

语法对照 ​

需求Vue 模板React JSXJiess（纯 JS 对象）
响应式数据ref(0) / reactive({})useState(0)$ref(0) / $reactive({})
数据读取count (自动解包)countcount.value
数据修改count.value++setCount(count + 1)count.value++
条件渲染v-if="show"{show && <div/>}$if: show
列表渲染v-for="item in list"list.map(i => <li/>)list.map(i => ({ is: 'li', children: i }))
动态样式:class="{ active: isActive }"className={isActive ? 'active' : ''}className: isActive ? 'active' : ''
事件绑定@click="handler"onClick={handler}onClick: handler
插槽<slot name="header"/>{props.children}$slots: { header: [...] }
文本绑定{message}$proxy: message
双向绑定v-model="val"value={val} onChange={setVal}update: true
计算属性computed(() => ...)useMemo(() => ..., [])$computed(() => ...)
监听变化watch(source, cb)useEffect(() => ..., [])$watch(proxy, 'field', cb)
生命周期onMounted(fn)useEffect(fn, [])this.onMounted(fn)
组件文件.vue (SFC).jsx / .tsx.js / .ts
编译需求Vue SFC CompilerBabel JSX Transform无需编译 ✨

核心差异 ​

传统框架 (Vue / React)Jiess
需要 .vue / .jsx 特殊文件只需要 .js / .ts
模板语法和逻辑切换心智负担高全程 JS，无语法切换
Vue 组件不能给 React 用同一份组件，三个环境通用（Vue3/React/Web Components）
编译错误难以定位运行时 JS 错误，堆栈清晰
需额外学习框架专属模板语法会 JavaScript 就会 Jiess
模板 + 样式 + 逻辑分散在不同块配置对象内聚所有关注点
样式隔离需手动配置（scoped/CSS-in-JS）自动样式隔离：Web Component 使用 Shadow DOM 硬隔离，Vue3/React 使用 SASS 嵌套软隔离

五个环境的使用入口 ​

同一份 Jiess 组件代码，可以通过不同的适配器渲染到五个环境。只有第一个 $entry 参数不同，组件内部的 this.add() 语法完全一致：

环境引入适配器$entry 第二个参数
Vue 3@jiess/core/vue3Vue（vue 命名空间）
React@jiess/core/react{ useRef, useEffect, useLayoutEffect, useState, createElement }（React hooks）
Web Components@jiess/core/web-component{ $tag: 'div' }（指定根标签，无需框架）
Three.js（3D 场景）@jiess/core/threeTHREE（three 命名空间）
Konva（2D Canvas）@jiess/core/konvaKonva（konva 命名空间）
javascript
// 示例：注册 Three.js 环境后，即可在组件里用 threeCanvas 根标签搭建 3D 场景
import * as THREE from 'three'
import { $entry } from '@jiess/core'
import JiessEnv from '@jiess/core/three'

const jiess = $entry(JiessEnv, THREE, {})
const { JiessComponent } = jiess

Three.js / Konva 的完整场景示例见 创建节点 → Three.js 3D 场景与 Konva 2D 场景；各环境的 $entry 参数说明见 工具&导出 → $entry。

蜀ICP备19017195号-2