NodeJS 將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON的方法
在編程之前,一定要有一個(gè)信條:代碼是為了減少工作量而生的,重復(fù)枯燥的工作是不能容忍的。
需求
這是由上篇文章衍生出的需求,我已經(jīng)將一個(gè)文件夾內(nèi)所有的文件名轉(zhuǎn)譯為英文,但我在頁(yè)面上還需要將這些圖片引入加載。如果一個(gè)一個(gè)手寫(xiě)到程序里,未免有點(diǎn)勞心勞神。那么何不將這個(gè)文件夾按照存放路徑變成一個(gè)相應(yīng)的JSON在前端請(qǐng)求并渲染呢?
說(shuō)干就干。
文件夾的路徑如下所示:
一級(jí)路徑:test
二級(jí)路徑:A,B,C...共十三個(gè)文件夾
三級(jí)路徑:每個(gè)二級(jí)路徑下有3-8個(gè)文件夾不等
四級(jí)路徑:a.jpg,b.jpg,c.jpg等數(shù)量不等的圖片文件
思路
1.一個(gè)全局變量:數(shù)組類(lèi)型obj。
2.遞歸遍歷目錄,是文件夾的取出名字,建立一個(gè)對(duì)象,放入文件夾名name和一個(gè)空數(shù)組list,如
{ name:'fileName', list:[]//用來(lái)存放下屬路徑 }
3.依次重復(fù)步驟2,直至尋找到路徑下的文件,將文件名name和拼合好的路徑src放入歸屬的list中,如下:
list:[ { name:'fileName', src:'filePath' } ]
實(shí)踐
語(yǔ)言
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)聽(tīng)錯(cuò)誤,如正常輸出,則打印null if (error == null) { obj = null; } }); } // 如果是目錄則遞歸調(diào)用自身 else if (st.isDirectory()) { if (obj.length <= 0) { obj.push({ name: path, list: [] }) } else { var value = paths; async.forEachLimit(obj, 1000, function(item, callback) { //如果數(shù)組里已有 if (src.match(new RegExp(item.name))) { item.list.push({ name: path, list: [] }) } else { value.forEach(function(vv) { if (vv == item.name) { obj.push({ name: path, list: [] }) } else {} }) } callback(null, item) }, function(err) { if (err) throw err; }) } exists(_src, search); } }); }); }); }; var exists = function(src, callback) { callback(src); }; exists('./test2', search); })();
提示
首先,要有心理準(zhǔn)備,這個(gè)輪子里使用了遞歸+很多遍歷,這對(duì)于內(nèi)存占用是很?chē)?yán)重的,尤其是我們還有一個(gè) 全局變量OBJ ,如果邏輯處理不好很容易會(huì)出現(xiàn)錯(cuò)誤內(nèi)存溢出。這也是為什么我引入了async模塊的理由。
在引入模塊之后,第一步要著眼于判斷為文件夾后的函數(shù):
//如果obj為空,說(shuō)明我們是第一次進(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è)問(wèn)題,同一作用域內(nèi)不宜有太多處理函數(shù)。
//如果路徑參數(shù)src里匹配到了obj中元素的name,說(shuō)明數(shù)組里已經(jīng)有了上級(jí)文件夾,則向此上級(jí)文件夾內(nèi)插入此時(shí)的文件夾名path if (src.match(new RegExp(item.name))) { item.list.push({ name: path, list: [] }) } /*如果沒(méi)有上級(jí)文件夾,那往尾部插入新的元素 *進(jìn)行一次遍歷排查,去除掉二級(jí)路徑向尾部插入的舉動(dòng)*/ value.forEach(function(vv) { if (vv == item.name) { obj.push({ name: path, list: [] }) } else {} })
對(duì)我來(lái)說(shuō),這段代碼是一段丑陋的函數(shù),處理方法過(guò)于粗糙,并且占用了不必要的內(nèi)存空間,更嚴(yán)重的是,拖累了整體文件的運(yùn)行速度,但時(shí)間倉(cāng)促,加之能力菜的真實(shí),暫時(shí)還尚未想出解決方案。
還要備注的是,這里本來(lái)想達(dá)到的去重判斷因?yàn)樯霞?jí)方法套用的遍歷次序不同,造成我只完成了初級(jí)的防止push重復(fù),卻又有了遞歸式的重復(fù)。有興趣的朋友在使用這個(gè)demo時(shí)可以將首行的去重方法刪除,看看效果。
處理好了文件夾狀態(tài)下的方法,來(lái)看看已經(jīng)到了四級(jí)路徑的處理
//src是此時(shí)運(yùn)行的search方法內(nèi)的文件路徑參數(shù),對(duì)item.name也就是二級(jí)路徑的文件名進(jìn)行匹配,如果正確,則對(duì)三級(jí)路徑下的文件名進(jìn)行匹配(本來(lái)我想在這里寫(xiě)遞歸或者回調(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í),就是最后一步,寫(xiě)入json文件了,不能忘記的是,這里需要進(jìn)行一次去重,原因在上文提到了,方法在函數(shù)行首。
PS:在運(yùn)行結(jié)束之后,一定要將全局變量清空,雖然我暫時(shí)尚未遇到因此理由內(nèi)存的崩潰,但可以預(yù)見(jiàn)到的是,在用于龐大文件夾時(shí),勢(shì)必會(huì)對(duì)內(nèi)存有很大的傷害。
obj = obj.distinct(); fs.writeFile("main.json", JSON.stringify(obj), "utf-8", (error) => { //監(jiān)聽(tīng)錯(cuò)誤,如正常輸出,則打印null if (error == null) { obj = null; } });
END
這篇小筆記就結(jié)束了,這個(gè)輪子遇到的問(wèn)題很淺顯,但值得重視。對(duì)我將來(lái)寫(xiě)大型單頁(yè)應(yīng)用或是系統(tǒng)型網(wǎng)站非常有借鑒意義,所以此篇文章的漏洞和錯(cuò)誤,我會(huì)再次進(jìn)行排查,以達(dá)到最優(yōu)的解決方法。我在這里拋磚引玉,誠(chéng)懇希望各位同仁前輩能不吝賜教!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用nodejs實(shí)現(xiàn)json和jsonp服務(wù)的方法
本篇文章主要介紹了用nodejs實(shí)現(xiàn)json和jsonp服務(wù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08詳解基于Koa2開(kāi)發(fā)微信二維碼掃碼支付相關(guān)流程
這篇文章主要介紹了詳解基于Koa2開(kāi)發(fā)微信二維碼掃碼支付相關(guān)流程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05nodejs實(shí)現(xiàn)獲取某寶商品分類(lèi)
這篇文章主要介紹了nodejs實(shí)現(xiàn)獲取某寶商品分類(lèi),十分的簡(jiǎn)單實(shí)用,進(jìn)入后臺(tái)直接打開(kāi)控制臺(tái),把代碼粘進(jìn)去運(yùn)行就OK了,有需要的小伙伴可以參考下。2015-05-05Node.js使用Sharp.js進(jìn)行圖像處理的實(shí)踐與技巧
Sharp.js 是一個(gè)高性能的 Node.js 圖像處理庫(kù),基于 C 語(yǔ)言編寫(xiě)的 libvips 庫(kù)封裝而來(lái),提供了便捷、高效的圖片編輯與轉(zhuǎn)換功能,以下是對(duì) Sharp.js 的深入解析,包括全方位實(shí)踐與技巧,需要的朋友可以參考下2024-08-08詳解用Node.js寫(xiě)一個(gè)簡(jiǎn)單的命令行工具
本篇文章主要介紹了詳解用Node.js寫(xiě)一個(gè)簡(jiǎn)單的命令行工具,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Node.js使用Koa搭建 基礎(chǔ)項(xiàng)目
時(shí)下前端工程師有很多人比較關(guān)注NodeJs以及express 框架或者Koa 框架之類(lèi)的新技術(shù)。難得我最近閑時(shí)較多,利用一下舊歷新年尚未正式到來(lái)的這片閑暇,也來(lái)涉足其中,一窺其中奧妙。2018-01-01