Всем доброго времени. Понимаю что вопрос глубокий но хотелось бы понять как писать годный код в ооп. Прогаю относительно недавно и при освоении ооп который должен был упростить код(как часто говорят на харбре))) вытоге уже сума меня сводить начал. Хотелось бы понимание в верном направлении я рою или нагромаздил черти че. Вот пример кода реализуещего на основе localStorage имитацию файловой системы для редактора. к нему еще несколько подобных фалов прилагается
const ul = "ul";
const li = "li";
const explorerlist = "explorer-list";
const sublist = 'explorer-sublist-item';
const projects = "projects";
const $toolbar = $("<div>", {
class: "explorer-toolbar"
});
$toolbar.append($("<button>", {
class: "explorer-toolbar-btn material-icons",
title: "Create file",
"data-action": "file-new",
html: 'insert_drive_file'
}));
$toolbar.append($("<button>", {
class: "explorer-toolbar-btn material-icons",
title: "Create folder",
"data-action": "folder-new",
html: 'create_new_folder'
}));
$toolbar.append($("<button>", {
class: "explorer-toolbar-btn material-icons",
title: "Collapse all folders",
"data-action": "collapse-all",
html: 'indeterminate_check_box'
}));
$title = $("<div>", {
"class": "explorer-input-wrapper"
}).append($("<input>", {
"class": "explorer-input-field isBlured",
"type": 'text',
"data-action": "project-name",
"placeholder": "Project Name"
}));
class EXPLORER {
constructor() {
this.treeID = explorerlist;
this.p = {};
this.opened = {};
this.init()
}
init() {
let opened = Local.get("opened");
this.opened["project"] = opened["project"] || 0;
this.opened["files"] = opened.files || [];
Local.set("opened", this.opened);
}
get projects() {
var p = Local.get(projects);
for (var key in p) {
let n = p[key]["name"];
this.p[n] = p[key]
}
return Local.get(projects);
}
get Project() {
var _this = this;
return new class {
open(name) {
$title.attr("data-id", name).val(name);
for (let i = 0; i < _this.projects.length; i++) {
if (name == _this.projects[i].name) {
const dir = _this.projects[i].dir;
Local.setKey("opened", "project", i);
Tree.showTree(ul, li, sublist, Tree.generate(dir), _this.$filetree);
}
}
}
get projects() {
var p = Local.get(projects);
for (var key in p) {
let n = p[key]["name"];
_this.p[n] = p[key]
}
return _this.p
}
};
}
get File() {
var _this = this;
return new class {
open(name) {
let filesArr = Local.getKey("opened", "files");
_this.file_path = {};
var dir = Local.get("projects")[_this.opened.project].dir;
dir.reduce((q, files) => {
const _file = files.substring(files.indexOf("/") + 1);
_this.file_path[_file] = files
}, _this.file_path);
if (_this.opened["project"] !== "undefined") {
var code = Local.get("projects")[_this.opened.project].files[name];
Workspace.Editors(_this.file_path[name]).create(code[1], _this.file_path[name]);
Workspace.Editors(_this.file_path[name]).instance.setValue(code[0]);
filesArr.push(_this.file_path[name]);
Local.setKey("opened", "files", filesArr);
}
}
close(name) {
let filesArr = Local.getKey("opened", "files");
for (var i = 0; i < filesArr.length; i++)
if (filesArr[i] === name) filesArr.splice(i, 1)
Local.setKey("opened", "files", filesArr);
}
}
}
render() {
this.$explorer = $("#explorer");
this.$filetree = $("<ul>", {
class: explorerlist,
id: explorerlist
});
this.$explorer.append($toolbar, $title, this.$filetree);
event(this.$filetree, this);
for (let i = 0; i < this.projects.length; i++) {
if (i == this.opened["project"]) {
this.Project.open(this.projects[i]["name"]);
}
}
}
}
var event = (elem, explorer) => {
$(document).on('click touchend', elem, e => {
if ($(e.target).parent('li').hasClass(sublist)) {
$(e.target).parent('li').toggleClass('active');
}
if ($(e.target).parent('li').hasClass('explorer-file')) {
let elem = e.target,
str = '';
if (!elem && elem === this.$filetree) return
elem = $(e.target).parent().parent('li');
let dir = elem ? elem.children().text() : '';
str = `${str && dir ? `${dir}/` : dir}${str}`;
}
});
$(document).on('dblclick touchend', elem, e => {
if ($(e.target).parent().hasClass('explorer-file-item')) {
var name = $(e.target).text();
explorer.File.open(name);
}
});
$(document).on("change", $title, (e) => {
var projName = $(e.target).attr("data-id")
var projects = EXPLORER.projects;
for (var key in projects) {
if (projects[key]["name"] == projName) {
projects[key]["name"] = $(e.target).val();
Local.set(projects, projects)
}
}
});
}
function initMode(fileExtension) {
switch (fileExtension) {
case "html" || "xml":
return "htmlmixed";
case "js":
return "javascript";
case "css":
return "css";
}
}
function getFormat(text) {
return text.split(".").pop()
}
Если есть какие статейки на примете подкиньте плз. Те что нашел на харбре и мозиле весьма примитивны и не дают понго представления приминения сих принципов на практике
