在編程之前,一定要有一個信條:代碼是為了減少工作量而生的,重復枯燥的工作是不能容忍的。
需求
這是由上篇文章衍生出的需求,我已經將一個文件夾內所有的文件名轉譯為英文,但我在頁面上還需要將這些圖片引入加載。如果一個一個手寫到程序里,未免有點勞心勞神。那么何不將這個文件夾按照存放路徑變成一個相應的JSON在前端請求并渲染呢?
說干就干。
文件夾的路徑如下所示:
一級路徑:test
二級路徑:A,B,C...共十三個文件夾
三級路徑:每個二級路徑下有3-8個文件夾不等
四級路徑:a.jpg,b.jpg,c.jpg等數量不等的圖片文件
思路
1.一個全局變量:數組類型obj。
2.遞歸遍歷目錄,是文件夾的取出名字,建立一個對象,放入文件夾名name和一個空數組list,如
{ name:'fileName', list:[]//用來存放下屬路徑 }
3.依次重復步驟2,直至尋找到路徑下的文件,將文件名name和拼合好的路徑src放入歸屬的list中,如下:
list:[ { name:'fileName', src:'filePath' } ]
實踐
語言
NodeJS
需求模塊
fs/async。
代碼 先上代碼,邏輯解析在提示補上。
(function() { Array.prototype.distinct = function() { var arr = this, result = [], i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i].name === arr[j].name) { j = ++i; } } result.push(arr[i]); } return result; } // 主業務代碼 var fs = require("fs"); var async = require('async'); var obj = []; var search = function(src) { // 讀取目錄中的所有文件/目錄 fs.readdir(src, function(err, paths) { if (err) { throw err; } paths.forEach(function(path) { var _src = src + '/' + path; fs.stat(_src, function(err, st) { if (err) { throw err; } // 判斷是否為文件 if (st.isFile()) { async.forEachLimit(obj, 1000, function(item, callback) { if (src.match(new RegExp(item.name))) { item.list.forEach(function(iv) { if (src.match(new RegExp(iv.name))) { iv.list.push({ name: path.split('.')[0], src: _src }) } }) } callback(null, item) }) obj = obj.distinct(); fs.writeFile("main.json", JSON.stringify(obj), "utf-8", (error) => { //監聽錯誤,如正常
提示
首先,要有心理準備,這個輪子里使用了遞歸+很多遍歷,這對于內存占用是很嚴重的,尤其是我們還有一個 全局變量OBJ ,如果邏輯處理不好很容易會出現錯誤內存溢出。這也是為什么我引入了async模塊的理由。
在引入模塊之后,第一步要著眼于判斷為文件夾后的函數:
//如果obj為空,說明我們是第一次進入函數,那么插入一個新的元素 if (obj.length <= 0) { obj.push({ name: path, list: [] }) }
async.forEachLimit是異步串行函數,可以同批次運行指定數量的代碼,可以避免一次遍歷太多,里面的參數依次為(數組,指定的數量,執行函數,錯誤回調)。
下面代碼中的參數很多,如paths,path,src,_src等,打代碼的時候經常會讓我頭腦不清晰,這也側面告誡了我一個問題,同一作用域內不宜有太多處理函數。
//如果路徑參數src里匹配到了obj中元素的name,說明數組里已經有了上級文件夾,則向此上級文件夾內插入此時的文件夾名path if (src.match(new RegExp(item.name))) { item.list.push({ name: path, list: [] }) } /*如果沒有上級文件夾,那往尾部插入新的元素 *進行一次遍歷排查,去除掉二級路徑向尾部插入的舉動*/ value.forEach(function(vv) { if (vv == item.name) { obj.push({ name: path, list: [] }) } else {} })
對我來說,這段代碼是一段丑陋的函數,處理方法過于粗糙,并且占用了不必要的內存空間,更嚴重的是,拖累了整體文件的運行速度,但時間倉促,加之能力菜的真實,暫時還尚未想出解決方案。
還要備注的是,這里本來想達到的去重判斷因為上級方法套用的遍歷次序不同,造成我只完成了初級的防止push重復,卻又有了遞歸式的重復。有興趣的朋友在使用這個demo時可以將首行的去重方法刪除,看看效果。
處理好了文件夾狀態下的方法,來看看已經到了四級路徑的處理
//src是此時運行的search方法內的文件路徑參數,對item.name也就是二級路徑的文件名進行匹配,如果正確,則對三級路徑下的文件名進行匹配(本來我想在這里寫遞歸或者回調的,太懶取消原計劃)。全部都匹配正確,則往內插入文件名和文件路徑 async.forEachLimit(obj, 1000, function(item, callback) { if (src.match(new RegExp(item.name))) { item.list.forEach(function(iv) { if (src.match(new RegExp(iv.name))) { iv.list.push({ name: path.split('.')[0], src: _src }) } }) } callback(null, item) })
函數到這里時,就是最后一步,寫入json文件了,不能忘記的是,這里需要進行一次去重,原因在上文提到了,方法在函數行首。
PS:在運行結束之后,一定要將全局變量清空,雖然我暫時尚未遇到因此理由內存的崩潰,但可以預見到的是,在用于龐大文件夾時,勢必會對內存有很大的傷害。
obj = obj.distinct(); fs.writeFile("main.json", JSON.stringify(obj), "utf-8", (error) => { //監聽錯誤,如正常
END
這篇小筆記就結束了,這個輪子遇到的問題很淺顯,但值得重視。對我將來寫大型單頁應用或是系統型網站非常有借鑒意義,所以此篇文章的漏洞和錯誤,我會再次進行排查,以達到最優的解決方法。我在這里拋磚引玉,誠懇希望各位同仁前輩能不吝賜教!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com