文件夹下的所有文件和引用文件做对比

项目越来越大,有些菜单或者目录会暂时去掉,后面会直接弃用,可能会留有冗余,所以对比一下,方便删除不用文件

 

我这边是对比view项目下的文件和路由文件

 

 

 

 下面上代码

 

 

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>page test</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .file {
        vertical-align: top;
        position: relative;
        display: inline-block;
        background: #d0eeff;
        border: 1px solid #99d3f5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1e88c7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
      }

      .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
      }

      .file:hover {
        background: #aadffd;
        border-color: #78c3f3;
        color: #004974;
        text-decoration: none;
      }

      .dllList {
        width: 50%;
        float: left;
        display: block;
        border-collapse: collapse;
      }

      .dllList th,
      td {
        width: 200px;
        border: 1px solid #98bf21;
        font-size: 1em;
        text-align: right;
        padding: 3px 7px 2px 7px;
      }

      .dllList th {
        font-size: 1.1em;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 4px;
        background-color: #a7c942;
        color: #ffffff;
      }

      .dllList tr:nth-child(even) {
        color: #000000;
        background-color: #eaf2d3;
      }
    </style>
    <script type="text/javascript">
      var filesAll = null;
      var textsAll = null;
      var noMatchFilesAll = [];
      function fileChange(that) {
        var files = that.files;
        var filesArr = [];
        for (var i = 0; i < files.length; i++) {
          let name = files[i].name;
          let size = Math.round(files[i].size / 1024) + "K";
          if (/\.vue$/gi.test(name)) {
            //这里按业务要求筛选所有dll文件

            filesArr.push({
              name: files[i].name,
              size: Math.round(files[i].size / 1024) + "K",
            });
          }
        }
        filesAll = filesArr;
        createTable(filesArr);
      }

      function createTable(arr, tableId) {
        var tableObject = document.getElementById(tableId || "dllList");
        for (var i = 0; i < arr.length; i++) {
          let TableRow = tableObject.insertRow();
          let fileInd = TableRow.insertCell(0);
          fileInd.innerHTML = i + 1;
          let fileName = TableRow.insertCell(1);
          fileName.innerHTML = arr[i].name;
          let fileSize = TableRow.insertCell(2);
          fileSize.innerHTML = arr[i].size;
        }
      }

      function onefileChange(input) {
        if (window.FileReader) {
          var file = input.files[0];
          filename = file.name.split(".")[0];
          var reader = new FileReader();
          reader.onload = function () {
            document.getElementById("txt").value = this.result;
            textsAll = this.result;
          };
          reader.readAsText(file);
        }
      }

      function clickBtn() {
        if (!filesAll || !textsAll) {
          alert("请选择文件");
          return;
        }
        noMatchFiles = [];
        filesAll.forEach((item) => {
          if (!textsAll.includes(item.name.replace(".vue", "") + "')")) {
            noMatchFiles.push(item);
          }
        });
        createTable(noMatchFiles, "matchList");
      }
    </script>
  </head>

  <body>
    <div style="height: 50px">
      <a href="javascript:;" class="file"
        >第一步:选择view文件夹
        <input
          type="file"
          webkitdirectory
          directory
          onchange="fileChange(this)"
        />
      </a>
      <a href="javascript:;" class="file"
        >第二步:选择menu.js
        <input type="file" onchange="onefileChange(this)" />
      </a>
      <a class="file" onclick="clickBtn()">第三步:点击对比</a>
    </div>
    <span>对比后的表格</span>
    <div style="display: flex">
      <table id="matchList" class="dllList">
        <thead>
          <tr>
            <th>序号</th>
            <th>文件名</th>
            <th>大小(误差±1K)</th>
          </tr>
        </thead>
      </table>
    </div>
    <span>所有文件表格</span>
    <div style="display: flex">
      <table id="dllList" class="dllList">
        <thead>
          <tr>
            <th>序号</th>
            <th>文件名</th>
            <th>大小(误差±1K)</th>
          </tr>
        </thead>
      </table>
      <textarea
        id="txt"
        style="
          float: left;
          display: block;
          width: 50%;
          height: 800px;
          overflow: auto;
        "
      ></textarea>
    </div>
  </body>
</html>

 

posted @ 2021-04-28 11:16  一曲迷音醉  阅读(157)  评论(0)    收藏  举报