文件夹下的所有文件和引用文件做对比
项目越来越大,有些菜单或者目录会暂时去掉,后面会直接弃用,可能会留有冗余,所以对比一下,方便删除不用文件
我这边是对比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>
