天貓精靈Sound Pro體驗：智能音箱沒有音質？來聽聽我的
這幾年除了手機作為智能生活終端最主要的核心之外，第二個可以成為中心點的產品是什么？——是智能音箱。 手機在執行命令的時候有兩種操作方式，手和智能語音助手，而智能音箱只
答案是可以的。
簡化一下，假設我有下面的目錄結構。
添加圖片注釋，不超過 140 字（可選）。
第一步圖示：（filterable關鍵字替換為空，只針對.vue文件操作）。
添加圖片注釋，不超過 140 字（可選）。
第二步圖示：針對.vue文件的el-select標簽匹配替換（即為新加屬性）從而完成任務。
添加圖片注釋，不超過 140 字（可選）。
通過上述圖示，我們發現vscode自帶的搜索匹配功能，也就是做了兩件事。
那我們是不是也可以使用node自己寫對應功能呢？答案是肯定的。
在此之前，我們先來回顧復習一下之前的相關知識。
我們寫一個函數，把字符串中的某些字符，替換成新的字符：
let str = ` 白66依山盡, 黃河66入海流, 欲窮千66里目, 更上一層66樓`/** * 一個用來在字符串中替換指定字符的函數 * @param {string} str 原來的字符串 * @param {string} targetStr 要替換的目標字符 * @param {string} replaceStr 把目標字符替換成什么字符 * @returns {string} 返回替換好的新的字符串 */function replaceAllStr(str, targetStr, replaceStr) { // 把原來的字符串 通過正則 匹配到所有的目標字符，統一替換成要替換的字符 return str.replace(new RegExp(targetStr, 'g'), replaceStr);}let newStr = replaceAllStr(str, '66', '88')console.log('原來的字符串--->', str);console.log('替換后的新字符串--->', newStr);打印的效果圖如下：
添加圖片注釋，不超過 140 字（可選）
// 讀取對應路徑下的目錄，返回數組，數組中的每一項是文件夾名或文件名fs.readdirSync(path) // 讀取對應路徑，獲取標準信息，并看看此路徑是文件還是文件夾const stats = fs.statSync(path) stats.isFile()stats.isDirectory()// 同步讀取文件內容，讀取到的是文件中的所有字符串fs.readFileSync(filePath, 'utf-8') // 將數據內容data同步寫入到file文件中去fs.writeFileSync(file, data)// 獲取文件的后綴名path.extname(file)// 把文件夾和文件拼接成標準的路徑path.join(folderPath, file);欲知更多詳情如何，請訪問nodejs中文網：https://nodejs.cn/api/
根據上面的兩個知識點回顧，寫一個遞歸讀取文件夾中的文件函數，代碼如下：
const fs = require('fs');const path = require('path');function printAllFilesInFolder(folderPath, fileSuffix = '') { const files = fs.readdirSync(folderPath); // 讀取對應目錄【數組，文件夾或文件】 files.forEach((file) => { // 遍歷對應目錄內容 const filePath = path.join(folderPath, file); // 拼成標準路徑 const stats = fs.statSync(filePath); // fs模塊讀取此路徑得到文件信息狀態 if (stats.isFile() && path.extname(file) === fileSuffix) { // 若是文件且后綴名對得上 let fileStr = fs.readFileSync('./' + filePath, 'utf-8') // 就去讀取這個文件的內容 console.log('--讀取到文件內容為：-->', fileStr); // 最后再打印出來 } else if (stats.isDirectory()) { // 若是文件夾 printAllFilesInFolder(filePath, fileSuffix); // 文件夾就遞歸繼續操作 } });}// 用法示例：傳入文件夾路徑來打印所有文件const folderPath = './page';const fileSuffix = '.vue';printAllFilesInFolder(folderPath, fileSuffix);const fs = require('fs');const path = require('path');function replaceAllStr(str, targetStr, replaceStr) { // 把原來的字符串 通過正則 匹配到所有的目標字符，統一替換成要替換的字符 return str.replace(new RegExp(targetStr, 'g'), replaceStr);}function printAllFilesInFolder(folderPath, fileSuffix = '') { const files = fs.readdirSync(folderPath); // 讀取對應目錄【數組，文件夾或文件】 files.forEach((file) => { // 遍歷對應目錄內容 const filePath = path.join(folderPath, file); // 拼成標準路徑 const stats = fs.statSync(filePath); // fs模塊讀取此路徑得到文件信息狀態 if (stats.isFile() && path.extname(file) === fileSuffix) { // 若是文件且后綴名對得上 let fileStr = fs.readFileSync('./' + filePath, 'utf-8') // 就去讀取這個文件的內容 /** * 第一步，把文件中的filterable關鍵字字符串替換成空 * */ let newFileStr = replaceAllStr(fileStr, 'filterable', '') /** * 第二步，把文件中的el-select通過替換的方式加屬性filterable * */ // let newFileStr = replaceAllStr(fileStr, '<el-select', '<el-select filterable ') fs.writeFileSync(filePath, newFileStr) // 文件更新替換 } else if (stats.isDirectory()) { // 若是文件夾 printAllFilesInFolder(filePath, fileSuffix); // 文件夾就遞歸繼續操作 } });}// 用法示例：傳入文件夾路徑來打印所有文件const folderPath = './page';const fileSuffix = '.vue';printAllFilesInFolder(folderPath, fileSuffix);
為了方便大家使用，筆者把代碼推到了github上去了https://github.com/shuirongshuifu/efficiencyTool3。
本文鏈接：http://www.tebozhan.com/showinfo-26-45497-0.htmlNode在項目中應用案例之給幾百個下拉框統一加Filterable實現可搜索
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號