#javascript #object #inheritance
#javascript #объект #наследование
Вопрос:
Мне нужно преобразовать некоторые теги «ul» и «li» в объекты JavaScript.
Мне удалось преобразовать все теги в объекты, но я не знаю, как я могу применить наследование, чтобы иметь первый объект, который содержит дочерние объекты…
Я использую рекурсивную функцию в своем коде :
var getDir = function(child) {
if(child.getAttribute('id')) {
var dir = child.getAttribute('id');
dir = dir.split("/");
dir.pop();
dir = dir.join("/");
return dir;
} else {
return "";
}
}
var getName = function(child) {
if(child.getAttribute('id')) {
var name = child.getAttribute('id');
name = name.split("/");
name = name.pop();
return name;
}
}
function Recursive(nodes, count)
{
if(nodes.childNodes)
{
for(let child of nodes.childNodes)
{
if(child.nodeType === 1 amp;amp; child.tagName === "LI")
{
var content = new Object();
content.dir = getDir(child);
content.name = getName(child);
content.type = child.type;
if(child.getAttribute('class') amp;amp; child.getAttribute('class') === "error") {
content.corrupted = true;
}
console.log(content);
console.log("-".repeat(count) "element: " child.tagName);
}
if(child.childNodes) {
Recursive(child, count 1);
}
}
}
}
Recursive(treeModule, 0);
treeModule — это содержимое HTML :
<ul>
<li id="myProject" type="folder">myProject
<ul>
<li id="myProject/css" type="folder">css
<ul>
<li id="myProject/css/main.css" type="file">main.css</li>
<li id="myProject/css/menu.css" type="file">menu.css</li>
<li id="myProject/css/user.css" type="file">user.css</li>
</ul>
</li>
<li id="myProject/fonts" class="empty" type="folder">fonts</li>
<li id="myProject/images" type="folder">images
<ul>
<li id="myProject/images/logo.png" class="error" type="file">logo.png</li>
</ul>
</li>
<li id="myProject/index.html" type="file">index.html</li>
<li id="myProject/js" type="folder">js
<ul>
<li id="myProject/js/controllers" type="folder">controllers
<ul>
<li id="myProject/js/controllers/core" type="folder">core
<ul>
<li id="myProject/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myProject/js/controllers/errors" type="folder">errors
<ul>
<li id="myProject/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/home/homePage.js" type="file">homePage.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/user/list.js" type="file">list.js</li>
<li id="myProject/js/controllers/user/login.js" type="file">login.js</li>
<li id="myProject/js/controllers/user/profile.js" type="file">profile.js</li>
<li id="myProject/js/controllers/user/subscribe.js" type="file">subscribe.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/js/libs" type="folder">libs
<ul>
<li id="myProject/js/libs/handlebars.min.js" type="file">handlebars.min.js</li>
<li id="myProject/js/libs/jquery.min.js" type="file">jquery.min.js</li>
<li id="myProject/js/libs/require.min.js" class="error" type="file">require.min.js</li>
</ul>
</li>
<li id="myProject/js/main.js" type="file">main.js</li>
<li id="myProject/js/models" type="folder">models
<ul>
<li id="myProject/js/models/menu.js" type="file">menu.js</li>
<li id="myProject/js/models/user.js" type="file">user.js</li>
<li id="myProject/js/models/users.js" type="file">users.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/ressources" class="empty" type="folder">ressources</li>
<li id="myProject/views" type="folder">views
<ul>
<li id="myProject/templates/core" type="folder">core
<ul>
<li id="myProject/templates/core/footer.html" type="file">footer.html</li>
<li id="myProject/templates/core/header.html" type="file">header.html</li>
<li id="myProject/templates/core/menu.html" type="file">menu.html</li>
</ul>
</li>
<li id="myProject/templates/errors" type="folder">errors
<ul>
<li id="myProject/templates/errors/error401.html" type="file">error401.html</li>
<li id="myProject/templates/errors/error403.html" type="file">error403.html</li>
<li id="myProject/templates/errors/error404.html" class="error" type="file">error404.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/home/homePage.html" type="file">homePage.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/user/list.html" type="file">list.html</li>
<li id="myProject/templates/user/login.html" type="file">login.html</li>
<li id="myProject/templates/user/profile.html" type="file">profile.html</li>
<li id="myProject/templates/user/subscribe.html" type="file">subscribe.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
И я хотел бы, чтобы самый глубокий «li» стал самым глубоким дочерним элементом в моем объекте, вот так :
{
"dir": "",
"name": "folder",
"type": "folder",
"children": [
{
"dir": "folder",
"name": "cascading",
"type": "folder",
"children": [
{
"dir": "folder/cascading",
"name": "1.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "2.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "3.css",
"type": "folder"
}
]
}
]
}
На данный момент я могу просто отобразить каждый объект и его глубину (с помощью console.log(«-«.repeat(count) «element: » child.tagName); ) в моей консоли
Комментарии:
1. Объекты DOM уже являются объектами Javascript. Совсем не ясно, какую проблему вы на самом деле пытаетесь решить.
2. На самом деле, мне нужно преобразовать мой HTML-код в объекты со специфическими свойствами, которые называются «дочерними» и содержат дочерние элементы объектов. Конкретно мне нужно преобразовать все «li» и «ul» в JSON для лучшей наглядности и потому, что так захотел мой учитель.
3. Узел DOM, содержащий дочерние элементы, не имеет ничего общего с наследованием.
Ответ №1:
Если вы ищете структуру для своей проблемы, я думаю, должно сработать
function Node(dirName,name,type){
this.dir=dirName;
this.name=name;
this.type=type;
}
function parentNode(dirName,name,type,childArray){
Node.call(this,dirName,name,type);
this.children=childArray;
}
parentNode.prototype=Object.create(Node.prototype);
var node1=new Node("folder/cascading","1.css","folder");
var node2=new Node("folder/cascading","2.css","folder");
var childArray=[];
childArray.push(node1);
childArray.push(node2);
var parentNode1=new Node("folder","cascading","folder",childArray);
Я предполагаю, что эта структура работает для вложенных уровней ul и li
Здесь узел является общим для родительского и дочернего узлов.
Родительский узел будет иметь дочерние узлы в качестве дополнительного свойства
Надеюсь, это поможет
Комментарии:
1. Спасибо за вашу помощь, я могу извлечь идею благодаря вашему коду 😉
2. Если это все равно вам помогло .. подумайте о принятии ответа