前言
创作灵感来自于Windows 12 网页版以及许多模拟器。
实现计划
创建项目
创建一个项目模板
- mysys
- css
- system.css
- img
- js
- eventhandler.js
- filetree.js
- jquery.js
- system.js
- index.html
- css
1.制作文件管理系统
要想运行一个系统,首先得有文件树。
1.1.写入文件
浏览器有localStorage,
正是用localStorage制作文件树的。
文件树:
因为localStorage无法直接写成树形式,
所以写入时为了按需读取,需要一个一个写入。
上面的例子在localStorage里面是这样的:
key | value |
---|---|
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!(二)