Jiess文档

Appearance

介绍 ​

@jiess/plus是一个javascript库；同时也是Jiess的核心库，提供了以下能力

  • 配置式渲染
  • 支持vue2、vue3和react
  • 数据双向绑定
  • Jiess基础组件
  • Jiess组件化

为了最大程度的减少代码体积，在设计时，将核心主体（18KB）与环境适配代码（3-5KB）相分离。 开发时，必须引入核心主体，并按需引入对应的环境（vue2，vue3，react）适配代码。一共两个部分

说明

上面提到的KB值为不经过babel转换的体积，为了兼容低版本浏览器，Jiess同时提供了经过babel转换的兼容库； 在项目中import JiessCore from @jiess/plus直接引入时，指向的是未经babel转换的Jiess核心库

在历经多次的改版和演化后，形成了现在的@jiess/plus；要说明的是，为了降低学习成本， 部分API的设计参考了vue3；向尤大大致敬

配置式渲染 ​

在日常开发中，其实我们也常使用配置式渲染，比如有经验的小伙伴经常会封装一个项目通用的table组件， 使用时仅需对该组件传入表头的配置参数，以及列表的数据，便可以最终渲染出列表

与标签书写列表相比，为什么选择配置式？因为配置是由js构成，具备极大的灵活性，封装性；通过提供必要的配置属性， 便可呈现不同的效果，简化了开发过程，同时也能降低维护成本

配置式渲染是Jiess的出发点和指导思想——使用javascript配置对象生成标签，组件和页面

注：Jiess不排斥标签，相反，在支持JSX的环境中Jiess天然支持JSX

封装性 ​

开发中，我们经常提到：模块化，组件化。目的都是为了将公共的模块或组件提取并封装；

在传统的标签组件开发中，更多的是以组件为维度，进行公共组件的提取；而更加灵活的js，则是以函数为维度， 进行公共模块化提取；相对组件化来讲，模块化可以提供更加精细化的控制

交互特性 ​

配置式的特性，在数据交互，组件交互的层面，突破了很多原有的限制，打开了一扇新的窗户；就是说，越是交互特性复杂的页面， 就越能发挥出Jiess的作用；

扁平化特性 ​

开发中，需要提供javascript配置对象，Jiess通过解析该对象，最终渲染出页面；这里提到的javascript配置对象， 遵循则扁平化的特性，对象中的key为属性，value为属性值，上手非常简便

灵活特性 ​

书写标签时，往往在一开始就定义好了标签需要使用到哪些属性，所以，标签上的属性是不好追加或者去除的，使用配置对象时， 则迎刃而解；另外，标签属性一般需要对应属性值，使用配置对象时，可以用展开运算符或解构运算符

再结合则函数的传参和模块化特性，可以说打开了新世界

重点

在Jiess底层会使用vue或react的render函数，将配置对象转化为原框架对应的虚拟节点树，供其渲染；理论上， 支持render函数是使用Jiess的前提；因此，uni-app虽然支持vue，但不能用Jiess渲染小程序

支持vue2、vue3和react ​

Jiess是积极拥抱前端主流技术的积极分子；包括后续我们会努力实现对uni-app、weex等技术的支持。 尽量抹平它们间的语法差异性，降低前端的门槛，Jiess一直在行动

兼容性

Jiess 在规划设计时，非常注重对原框架的适应能力：

  • 您可以在 Jiess 中直接使用原框架中的组件，如各种UI库的组件
  • 在 JSX 环境中，还完美支持 JSX 语法，在后面文档中会详细介绍

数据双向绑定 ​

在Jiess中，同样是数据驱动页面，并使用了半自动的响应式数据双向绑定方案

响应式数据 ​

要实现数据双向绑定，必须有响应式数据，即被Jiess观察器观察的Proxy代理数据

计算属性 ​

计算属性工具$computed，通过传入一个函数，变化自动观察函数体内部所依赖的Jiess响应式数据的变化，并返回Jiess响应式对象，一旦依赖响应数据改变，便重新计算，得到新的结果值

Jiess观察器 ​

响应式数据观察工具$val，可对响应式数据整体观察，或对响应式数据中指定的字段进行观察，并触发绑定的回调，通知更新页面

重点

在调用render方法渲染时，我们需要手动绑定对响应式数据的观察——这里的绑定过程，就是调用$val方法对响应式数据套上观察器

$val方法返回观察器对象，在Jiess内部对该对象特殊处理，解析得到真实的值；因此，观察器对象作为属性时，实际传入的是真实的结果值

  • 我们通过表格来对必Jiess与Vue和React的响应式更新方案：
对必维度JiessVueReact
绑定模式半自动响应式数据绑定模式自动双向数据绑定手动触发更新页面
构建数据jiess实例的工具方法$ref,$reactive,$computedvue2：data函数返回对象中指定，vue3：Vue库的工具函数ref,reactive,computed类组件：定义于state对象属性中，函数式组件：使用React库的工具函数useState等函数
绑定数据手动使用jiess实例的工具方法$val方法,观察数据的变化，实现自动双向绑定直接使用响应式数据，自动双向绑定直接使用数据即可
数据更新setup函数体不会执行，交互过程完全由观察器接管，在Jiess内部完成交互过程由vue观察器接管，触发模板的重新编译或者render函数生成新的节点树，更新update生命周期类组件：手动调用setState；函数式组件：由工具函数提供的更新方法
数据关联响应式数据与定义的上下文没有关联性，数据更新时的刷新范围取决于观察器中执行观察任务的上下文定义时，及与作用上下文绑定，及一旦变化便更新该上下文定义时，及与作用上下文绑定，及一旦变化便更新该上下文

Jiess响应式数据的特点

Jiess响应式数据在非观察状态就是普通的对象，使用jiess实例的工具方法$val对其整体或者特定的属性进行观察后，该响应式数据的特定属性的就会自动触发Jiess内部的更新

由于没有定义源的限制，即在A组件中定义的响应式，可直接用于B组件中，且响应式更新时更新仅更新组件B，从而实现A组件中灵活控制B组件的更新

半自动的响应式数据绑定模式，提供了更灵活的操作空间，为响应式解锁了各种新的玩法

Jiess基础组件 ​

Jiess拥有极强的适应能力，以至于同时支持vue和react，那它是如何做到的呢？

在@jiess/plus中提供了一个 Jiess 基础组件，该组件就是所对应原框架中的组件；说到这里，你应该也想到了， 没错，Jiess 就是以组件的形式运行于原框架中

与使用普通的组件一样，在原框架环境中，你可以直接使用 Jiess 组件，并对其提供必要参数， 就可以在 Jiess 组件所处的位置，渲染出任意的效果

因此，也可以简单的将 Jiess 看作普通组件，其专注于试图的渲染，完全不受原框架相关生态的约束或依赖， 从而具备了极强的兼容性

Jiess组件化 ​

一套代码，多环境运行，是Jiess努力的方向。而组件化的能力，向着此目标推进了一大步

父子组件通信 ​

这是组件嵌套场景中，最基础的功能；后面文档会详细介绍

全局注册组件 ​

同vue一样，全局注册的组件不再需要单独引入，直接使用即可

Jiess插槽 ​

结合页面的布局，可以将插槽中的内容定位到对应的位置；支持具名插槽和作用域插槽

数据透传 ​

除了常用的父子组件数据通信，Jiess还提供了跨组件的数据透传能力