NodeJS：將資料夾按照存放路徑變成一個對應的JSON

維倫發表於2019-02-19
NodeJSJSON

在程式設計之前，一定要有一個信條：程式碼是為了減少工作量而生的，重複枯燥的工作是不能容忍的。

需求

這是由上篇文章衍生出的需求，我已經將一個資料夾內所有的檔名轉譯為英文，但我在頁面上還需要將這些圖片引入載入。如果一個一個手寫到程式裡，未免有點勞心勞神。那麼何不將這個資料夾按照存放路徑變成一個相應的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) => {
							//監聽錯誤，如正常輸出，則列印null
							if (error == null) {
								obj = null;

							}

						});
					}
					// 如果是目錄則遞迴呼叫自身
					else if (st.isDirectory()) {
						if (obj.length <= 0) {
							obj.push({
								name: path,
								list: []
							})
						} else {
							var value = paths;
							async.forEachLimit(obj, 1000, function(item, callback) {
								//如果陣列裡已有
								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);
})();
複製程式碼

提示

  • 首先，要有心理準備，這個輪子裡使用了遞迴+很多遍歷，這對於記憶體佔用是很嚴重的，尤其是我們還有一個全域性變數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) => {
	//監聽錯誤，如正常輸出，則列印null
	if (error == null) {
		obj = null;
	}
});
複製程式碼

END

這篇小筆記就結束了，這個輪子遇到的問題很淺顯，但值得重視。對我將來寫大型單頁應用或是系統型網站非常有借鑑意義，所以此篇文章的漏洞和錯誤，我會再次進行排查，以達到最優的解決方法。我在這裡拋磚引玉，誠懇希望各位同仁前輩能不吝賜教！

相關文章