前端json对比工具心得

最新推荐文章于 2024-06-27 11:15:57 发布

coderYaozihan

最新推荐文章于 2024-06-27 11:15:57 发布

阅读量882

点赞数 1

文章标签： json

本文链接：https://blog.csdn.net/qq_38885990/article/details/132316319

版权

文章讲述了开发者在紧迫的时间下选择三种方案解决JSON数据对比问题：自己开发DOM、使用code-diff库和Codemirror库定制功能。方案2展示了code-diff库的应用，而方案3则详细描述了如何使用Codemirror实现对比、高亮、编辑和导航功能。

摘要由CSDN通过智能技术生成

3种方案

1.方案1自己开发写 dom去循环json进行对比并做虚拟滚动高亮不同的区域（因时间紧迫放弃）

2.使用code-diff库进行对比可高亮显示（做出来效果可以但是不能编辑）

3.使用codemirror库进行对比自定义写高亮和定位功能自定义实现按钮逻辑

//方案2实施代码  
<template>
      <code-diff
          :old-string="formData[0]"
          :new-string="formData[1]"
          file-name="test.txt"
          output-format="side-by-side"
      />

</template>
<script>
export default {
 setup() {
   const formData = ref([
      "[{'name':'liu','age':'18'}]",
      "[{'name':'liu111','age':'18'}]",
    ]);
   return {formData }
         }
}
</script>

方案2效果图：

//方案3代码
<template>
  <div>

        <div class="compareJson-content main_content_chart">
          <div class="button-line">
            <span style="margin-left: 12px"
              >左侧为基准值，右侧为参数值，参数值支持在当前页面修改、保存</span
            >
            <span>
              <span style="margin-right: 20px"
                >{{ chunkArrnow.length }}处不同</span
              >
              <a-button class="diff-button" @click="format"> 格式化 </a-button>
              <a-button class="diff-button" @click="PreDiff">
                上一个差异
              </a-button>
              <a-button class="diff-button" @click="NextDiff">
                下一个差异
              </a-button>
              <a-button class="diff-button" @click="save"> 保存 </a-button>
            </span>
          </div>
          <div class="code" ref="coderef"></div>
        </div>
 
  </div>
</template>
<script>
export default {
  name: "Options",
  components: {

  },

  setup(props, { emit }) {
   onMounted(() => {
    initData("{'aaa':1}","{'bbb':2}")
    });
    const comModalRef = ref(null);
    const formData = ref({});


    const coderef = ref(null);
    const viewRef = ref(null);
    const chunkIndex = ref(0);
    const FromBNow = ref(0);
    const chunkArrnow = ref([]);
  


    const initData = (jsonA, jsonB) => {
      if (jsonA && jsonB && index !== undefined) {
        initMergeView(jsonA, jsonB);
 
      }

      setChunkArr();
    };
    const initMergeView = (jsonA, jsonB) => {
      let doc1 = JSON.stringify(JSON.parse(jsonA), null, 2);
      let doc2 = JSON.stringify(JSON.parse(jsonB), null, 2);
      viewRef.value = new MergeView({
        a: {
          doc: doc1,
          extensions: [
            basicSetup,
            javascript(),
            EditorView.editable.of(false),
            EditorState.readOnly.of(true),
          ],
        },
        b: {
          doc: doc2,
          extensions: [
            basicSetup,
            EditorView.updateListener.of((update) => {
              if (update.docChanged) {
                setChunkArr();
                if (update.changedRanges[0].toB > FromBNow.value) {
                  viewRef.value.chunks.forEach((item, index) => {
                    if (update.changedRanges[0].toB + 1 == item.toB) {
                      chunkIndex.value = index;
                    }
                  });
                }
              }
            }),
          ],
        },
        parent: coderef.value,
      });
    };
    const setChunkArr = () => {
      if (viewRef.value.chunks) {
        chunkArrnow.value = viewRef.value.chunks;
      }
    };
    const PreDiff = () => {
      chunkIndex.value--;
      if (chunkIndex.value < 0) {
        chunkIndex.value = viewRef.value.chunks.length - 1;
      }
      viewRef.value.b.dispatch({
        effects: EditorView.scrollIntoView(
          viewRef.value.chunks[chunkIndex.value].toB - 10
        ),
      });
      FromBNow.value = viewRef.value.chunks[chunkIndex.value].toB;
    };
    const NextDiff = () => {
      chunkIndex.value++;
      if (chunkIndex.value > viewRef.value.chunks.length - 1) {
        chunkIndex.value = 0;
      }
      viewRef.value.b.dispatch({
        effects: EditorView.scrollIntoView(
          viewRef.value.chunks[chunkIndex.value].toB - 10
        ),
      });
      FromBNow.value = viewRef.value.chunks[chunkIndex.value].toB;
    };
  
    const format = () => {
      let text = viewRef.value.b.state.doc.toString();
      try {
        let json = JSON.parse(text);
        let formattedJson = JSON.stringify(json, null, 2);
        let changes = {
          from: 0,
          to: viewRef.value.b.state.doc.length,
          insert: formattedJson,
        };
        viewRef.value.b.dispatch({ changes });
      } catch (error) {
        console.log(error);
        message.warning("请检查，json格式错误");
        // 处理格式化错误的逻辑
      }
    };
    return {
      comModalRef,
      formData,
      initMergeView,
      setChunkArr,
      coderef,
      viewRef,
      chunkIndex,
      FromBNow,
      PreDiff,
      NextDiff,
      save,
      format,
    };
  },
};
</script>