首页 前端知识 es6 html 模拟系统,自制自己的系统mysys!

es6 html 模拟系统,自制自己的系统mysys!

2024-09-06 00:09:19 前端知识 前端哥 978 780 我要收藏

前言

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

实现计划

创建项目

创建一个项目模板

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

1.制作文件管理系统

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

1.1.写入文件

浏览器有localStorage,

正是用localStorage制作文件树的。

文件树:

C:->[system->start.exe,data->[hello.exe,hello.ini]]

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

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

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

localStorage
keyvalue
C:{"type":"folder","value":["system","data"]}
C:\system{"type":"folder","value":["start.exe"]}
C:\system\start.exe{"type":"file","value":"startboot.open();"}
C:\data{"type":"folder","value":["hello.exe","hello.ini"]}
C:\data\hello.exe{"type":"file","value":"//..."}
C:\data\hello.ini{"type":"file","value":";example"}

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

理解如何写入文件

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

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

扇区: 一个磁道又被划分成一个个扇区,每个扇区就是一个“磁盘块”。各个扇区存放的数据量相同。(如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!(二)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17775.html
标签
评论
发布的文章

jquery video视频轮播播放

2024-09-27 09:09:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!