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