本篇文章带大家了解一下renderjs，通过在uniapp中使用better-scroll，聊聊renderjs的一些细节，希望对大家有所帮助！
包含内容：
使用renderjs在app端获取dom
renderjs和service层之间的通信
renderjs中如何接收到service层中的自定义id（重点，官方文档没有的）
一、renderjs
1.1 renderjs的概念
官方文档
运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）
1.2 renderjs的作用
大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）
在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有window、document等这些全局变量，在app-vue的service层没有这些）
1.3 renderjs的使用
官方文档给出的示例 (内容较为详细，也可以看我接下来的简要概括)
在原先的script标签的同级新增一个script，设置lang=renderjs，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法)
新script标签内的结构和之前的几乎一致，有几点不同的需要注意：
生命周期不和uniapp相同，而是和vue相同，
onLoad应该写成原生vue的created官方文档好像说了renderjs中无法使用uni这个全局变量，具体哪个地方忘了。实测结果是：部分可以。例如
uni.upx2px是可以用的，uni.request不可以，所以使用uni全局变量之前先输出看一下有没有
在template中使用一开始给renderjs的命名加.的方式调用其中的方法
<template> <view> <button @tap="test.handleClick">点击</button> </view></template> <script> export default { // 原先的script，这里被称为service层 }</script> <script module="test"> export default { data() { return {} }, methods: { handleClick(event, ownerInstance) { // event是事件对象 // ownerInstance和this.$ownerInstance是一样的，用来调用service层的方法 console.log('点击了按钮') } }, created() { console.log('renderjs初始化完毕') } }</script>二、renderjs和service层的通信
具体分为三部分：
在template中通过用户手动操作触发事件
在service层中调用方法
在renderjs中调用方法
从renderjs到service层：通过this.$ownerInstance.callMethod()方法可以调用service中的方法，第一个参数是方法名，第二个参数是传过去的参数
<template> <view> <button @tap="test.onClick">点击</button> </view></template> <script> export default { methods: { acceptDataFromRenderjs(data) { console.log('从renderjs中接收到的数据', data) } } }</script> <script module="test"> export default { data() { return {} }, methods: { onClick(event, ownerInstance) { ownerInstance.callMethod('acceptDataFromRenderjs', { content: '测试文字' }) // 或this.$ownerInstance.callMethod('acceptDataFromRenderjs', { content: '测试文字' }) // 需要注意的是：只有通过在template中用户手动操作触发renderjs的方法参数是这两个：event, ownerInstance； // 通过其他方法触发的函数参数不一样，后面会说 } } }</script>从service层到renderjs：
这里就需要template了，首先在template中绑定一个service中定义的值，然后在同样的位置增加:change:(属性名)=(触发的方法)来实现通信。
简单来说就是service负责数据的更改，通过template监听数据的变化来通知renderjs
<template> <view> // prop是个名字，可以随意改，注意:change:[name]这两个名字需要相同就行了 <text :prop="options" :change:prop="test.onChange">无内容</text> <button @tap="changeOptionFn">点击修改options</button> </view></template> <script> export default { data() { return { options: { // 这里存放准备传递给renderjs的数据 token: null, num: 1 } } }, methods: { changeOptionFn() { this.options = { // 这个地方我用时间戳来修改token，用于触发change，实际需要传递的数据是num token: Date.now(), num: Math.random() } } } }</script> <script module="test"> export default { methods: { onChange(newValue, oldValue, ownerInstance, instance) { console.log('service层中的options发生变化') console.log('新值', newValue) console.log('旧值', oldValue) // ownerInstance和this.$ownerInstance一样，可用来向service层通信 // instance和ownerInstance的区别是： // instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点； // instance的作用目前尚不明确，官方没有给出用法 } } }</script>在上面的例子中，prop初次绑定到节点时，事件不会触发。
用户首先通过点击按钮触发changeOptionFn事件，函数中修改了this.options的值。
而在text节点监听到绑定值发生了改变就会触发test.onChange，从而实现service到renderjs的通信
上面的例子中有一点需要注意：在this.options中我定义了一个token属性，每次修改时都将最新的时间戳赋值给他，这样就保证了我每一次的点击都会使options发生改变。
如果没有这个token的话就会出现明明修改了options但是并未触发onChange的情况。
了解js基础的都知道，修改options是我是直接重新赋值的，改变了索引，所以即使我num值和原先的相同，他也应该做出改变（例如vue中的watch），但是事实并不是
所以可以推测出这个监听数据改变监听的是内部的属性值，只有属性的增删改才能触发回调。（如果一开始绑定的就是基础数据类型的话，直接修改就好了）
故，当绑定值使用对象的时候，在对象中增加一个每次都一定会变的值，即可保证事件的触发（如上例中的token）
补充一点：进行过prop绑定的值，触发过一次监听事件之后，在renderjs中可以直接使用this.属性名的方式获取到
例如上面的代码中，options改变导致test.onChange触发一次之后，在renderjs中可以直接通过this.options获取到值
三、renderjs中如何接收到service层中的自定义id
3.1 在renderjs中使用better-scroll
做过app-vue开发的话应该知道在service层中没有document对象，无法获取dom节点。
所以引用一些外部js的时候，如果初始化的时候需要传入一个选择器的，那基本就断定用到了document对象获取节点。
这时候就需要用到renderjs了，首先看一个better-scroll的示例。根据官方给出的示例做一些修改，我们可以得到以下代码
<template> <view id="my-scroll"> <view><slot /></view> </view></template> <script> export default {}</script> <script module="BScroll"> export default { mounted() { // 如果这个插件支持ESModule的话就不用这么写，直接import导入就好了 if (typeof window.BScroll == 'function') return this.initBScroll() const script = document.createElement('script') script.src = 'static/better-scroll.core.min.js' script.onload = this.initBScroll document.head.appendChild(script) }, methods: { initBScroll() { this.bs = new BScroll(document.querySelector('#my-scroll')) } } }</script>3.2 better-scroll自定义id
重点来了，上面的例子中虽然实现了效果，但是也出现了一个问题：id是固定的。
如果我在同一页面中多次使用该组件，就会导致出现多个重复id，导致无法预料的错误。
在官方给出的示例中，包括我研究过的插件市场中的很多项目，都是使用固定的id。
解决的方法就是由外部传入自定义id或是由内部生成随机id。那么应该如何在renderjs中如何接收到service层中的自定义id呢
下面我给出的方法算是我自己测试过最有效的方法了，直接看代码
<template> <view :id="bsId" :prop="bsId" :change:prop="BScroll.initBScroll"> <view><slot /></view> </view></template> <script> export default { props: { bsId: { type: String, default: 'bs-container' } } }</script> <script module="BScroll"> export default { mounted() { if (typeof window.BScroll == 'function') return this.initBScroll() const script = document.createElement('script') script.src = 'static/better-scroll.core.min.js' script.onload = this.initBScroll document.head.appendChild(script) }, methods: { initBScroll() { this.bs?.destroy() this.bs = new BScroll(document.querySelector(`#${this.$ownerInstance.$vm.bsId}`)) } } }</script>在父级中传入自定义的bsId，组件接收到之后将其作为元素id。
执行顺序和之前一样：在renderjs的mounted中加载外部js，加载完成后进行初始化操作，通过this.$ownerInstance.$vm.bsId获取到service层中的bsId完成操作
同时，bsId也绑定了prop，监听到改变时会重新进行初始化操作，所以在初始化的方法第一行加入了this.bs?.destroy()，如果实例已存在就先销毁。
还记得一开始就说过的renderjs只支持app-vue和h5吗，这里主要说的是app端，因为如果是h5端的话，是可以在service中直接使用document的，压根不用这么麻烦。
这里还有一点需要注意的：:prop="bsId" :change:prop="BScroll.initBScroll"
实测，如果不写这行代码，也就是不进行绑定prop的操作的话，是无法获取到this.$ownerInstance.$vm.bsId。（app端是这样，h5端不写这个也可以，但是h5端压根也用不着这种方法）