本方案基本的思路是减少通信的次数，使用 sjs 函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。sjs 函数的除了纯逻辑的运算，还可以通过封装好的ComponentDescriptor 实例来访问以及设置组件的 class 和样式，对于交互动画，设置 style 和 class 足够了。sjs 函数的例子如下：
const setFontSize = (event, ownerInstance) => {
var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
instance.setStyle({
"font-size": "14px"
})
instance.getDataset()
instance.setClass(className)
}
其中入参 event 是 小程序事件对象 基础上多了 event.instance 来表示触发事件的组件的 ComponentDescriptor 实例。ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。
ComponentDescriptor的定义如下：
方法 | 参数 | 描述 | |
|---|---|---|---|
| selectComponent | selector对象 | 返回组件的 ComponentDescriptor 实例。 | |
| selectAllComponents | selector对象数组 | 返回组件的 ComponentDescriptor 实例数组。 | |
| setStyle | Object/string | 设置组件样式，支持rpx 单位(需客户端版本>= 853)，设置的样式优先级比组件 xhsml 里面定义的样式高。不能设置最顶层页面的样式。 | |
| addClass/removeClass/hasClass | string | 设置组件的 class。设置的 class 优先级比组件 xhsml 里面定义的 class 高。不能设置最顶层页面的 class。 | |
| getDataset | 无 | 返回当前组件/页面的 dataset 对象 | |
| callMethod | (funcName:string, args:object) | 调用当前组件/页面在逻辑层（Service）定义的函数。funcName表示函数名称，args表示函数的参数。 | |
| getState | 无 | 返回一个object对象，当有局部变量需要存储起来后续使用的时候用这个方法。 | |
| triggerEvent | (eventName, detail) | 和组件的triggerEvent一致。 | |
| setTimeout | (Function, Number) | 与原生 setTimeout 一致。用于创建定时器。 | |
| clearTimeout | Number | 与原生 clearTimeout 一致。用于清除定时器。 |