怎么优化的拆分一个上千行的vue3代码?

Question

<script lang="ts" setup>
import jsPlumb from "jsplumb";
let jsPlumb_instance: jsPlumb.jsPlumbInstance | any = null; 

const data = reactive({
    nodeList: []
})

const a = () => {
 // jsPlumb_instance.xxxxx
// data.nodeList.xxxx
}
const b = () => {
 // jsPlumb_instance.xxxxx
// data.nodeList.xxxx
}
const c = () => {
 // jsPlumb_instance.xxxxx
// data.nodeList.xxxx
}

onMounted(() => {
  jsPlumb_instance = $jsPlumb.getInstance();
  nextTick(() => {
    init();
    initPanZoom(jsPlumb_instance)
  });
});
</script>

大致就是这样的，jsPlumb_instance跟data在很多方法里都会用到，但是方法特别多，我怎么能拆分一下呢?

Answer 1

 // 方法可以拆到单独文件,或者都放到一起,又或者通过一个文件import所有方法再一起export出来
// 所有函数均接收jsPlumb_instance，data两个参数
import a from 'a.js'
import b from 'b.js'
import c from 'c.js'
const forEach = (...fns) => (...args) => fns.forEach(fn => fn.apply(null, args));
const fn = forEach(a,b,c) // 组合所有函数
fn(jsPlumb_instance, data) // 传入参数