es6 html 模拟系统，自制自己的系统mysys！

前言

创作灵感来自于Windows 12 网页版以及许多模拟器。

实现计划

创建项目

创建一个项目模板

• mysys
  • css
    • system.css
  • img
  • js
    • eventhandler.js
    • filetree.js
    • jquery.js
    • system.js
  • index.html

1.制作文件管理系统

要想运行一个系统，首先得有文件树。

1.1.写入文件

浏览器有localStorage，

正是用localStorage制作文件树的。

文件树：

因为localStorage无法直接写成树形式，

所以写入时为了按需读取，需要一个一个写入。

上面的例子在localStorage里面是这样的：

接下来就可以制作写入文件的函数了。

理解如何写入文件

在真正的系统磁盘中，磁盘结构是磁道、扇区、盘面、柱面组成的，

磁道： 磁盘的盘面被划分成一个个磁道。 这样的一个“圈”就是一个磁道。

扇区： 一个磁道又被划分成一个个扇区，每个扇区就是一个“磁盘块”。各个扇区存放的数据量相同。（如1KB） 

盘面：一个盘片可能有两个盘面，每个盘面都对应一个磁头。所有的磁头是连在同一个磁臂上的，所以磁头只能共进退。

柱面：所有盘面中相对位置相同的磁道组成柱面。

这样只能以类似列表的形式写入文件。

由于存储的数据直接读取转化是列表形式的，所以会有文件管理系统来管理它们。

文件管理系统可以将数据读取为树形式，可以在上面建立索引使读取/写入文件更快。

用js实现写文件

上代码

function setfile({
	path,
	value,
	storageobject = localStorage
}) {
	let names = path.replaceAll(/\/{2,}|\\{2,}/g, '\\').split(/[/\\]/);
	let nval = value;
	if (nval == null) {
		nval = "";
	} else if (typeof(nval) != "string") {
		nval = String(nval);
	}
	let startnames = "";
	let lasti = names.length - 1;
	for (let i = 0; i < names.length; i++) {
		let onename = names[i];
		let currentname = startnames + onename;
		if (i == lasti) {
			if (storageobject[currentname] != null) {
				let obj = JSON.parse(storageobject[currentname]);
				if (obj == "folder") {
					// deleteinnerfiles({
					// 	currentname,
					// 	storageobject
					// });
				}
			}
			storageobject[currentname] = JSON.stringify({
				name: currentname,
				type: "file",
				value: nval
			});
		} else if (storageobject[currentname] == null) {
			storageobject[currentname] = JSON.stringify({
				name: currentname,
				type: "folder",
				value: [names[i + 1]]
			});
		} else {
			let nextname = names[i + 1];
			let obj = JSON.parse(storageobject[currentname]);
			if (obj.type == "folder") {
				if (!obj.value.includes(nextname)) {
					obj.value.push(nextname);
				}
			} else {
				obj.name = currentname;
				obj.type = "folder";
				obj.value = [nextname];
			}
			storageobject[currentname] = JSON.stringify(obj);
		}
		if (i != lasti)
			startnames += onename + "\\";
	}
}复制

使用方法：

setfile({

        path,

        value,

        storageobject

})

deleteinnerfiles是后面要写的函数（准确来说是作者没做eee...），所以暂时不适用。

转载请注明来源：es6 html 模拟系统，自制自己的系统mysys！

下一篇：es6 html 模拟系统，自制自己的系统mysys！（二）