-
Notifications
You must be signed in to change notification settings - Fork 0
/
ejemplo.html
138 lines (127 loc) · 5.08 KB
/
ejemplo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="resultado"></div>
<button type="button" onclick="comenzar()">Comenzar</button>
<script src="pila.js"></script>
<script>
/** Objeto de ejemplo */
var objeto=function(nombre,hijos) {
if(typeof hijos==="undefined") hijos=[];
this.nombre=nombre;
this.hijos=hijos;
this.ruta=null;
this.obtenerNombre=function() {
return this.nombre;
};
this.obtenerHijos=function() {
return this.hijos;
};
};
/** Listado de ejemplo */
var listado=[
new objeto("uno",[
new objeto("dos",[
new objeto("tres"),
new objeto("cuatro"),
new objeto("cinco",[
new objeto("seis")
])
]),
new objeto("siete",[
new objeto("ocho"),
new objeto("nueve")
])
]),
new objeto("diez",[
new objeto("once",[
new objeto("doce"),
new objeto("trece"),
new objeto("catorce")
])
])
];
function comenzar() {
var resultado="<h1>Recorrer todos los elementos</h1><ul>";
new pila({
//Listado a recorrer
origen:listado,
//Propiedad que contiene la descendencia
hijos:"hijos",
//Función de retorno para todos los elementos
retorno:function(obj,indice,pila) {
resultado+="<li>"+obj.nombre;
if(obj.hijos.length) resultado+="<ul>";
//Devolviendo false, se detendrá la ejecución
//return false;
},
//Función de retorno al finalizar cada nivel
cierre:function(padre,pila) {
resultado+="</ul>";
}
}).ejecutar();
resultado+="</ul>";
resultado+="<h1>Filtrar elementos por nombres pares</h1><ul>";
new pila({
origen:listado,
//También es posible usar una función que devuelva el nombre que identifica al elemento
nombre:"obtenerNombre",
//También es posible usar una función que devuelva la descendencia
hijos:"obtenerHijos",
//Filtro por nombre
filtro:/^(dos|cuatro|seis|ocho|diez|doce|catorce)$/,
//Función de retorno para los elementos que coincidan
retorno:function(obj,indice,pila) {
resultado+="<li>"+obj.nombre;
}
}).ejecutar();
resultado+="</ul>";
resultado+="<h1>Buscar elementos por nombre (<code>uno.dos.cinco</code>)</h1><ul>";
new pila({
origen:listado,
nombre:"nombre",
hijos:"hijos",
//Propiedad para almacenar la ruta
asignarRuta:"ruta",
//Buscar un elemento dada su ruta por nombre
ruta:"uno.dos.cinco",
retorno:function(obj,indice,pila) {
resultado+="<li>"+obj.nombre;
}
}).ejecutar();
resultado+="</ul>";
resultado+="<h1>Rutas (asignadas a la propiedad <code>ruta</code> de cada objeto)</h1><ul>";
new pila({
//Listado a recorrer
origen:listado,
//Propiedad o función que contenga o devuelva la descendencia
hijos:"hijos",
//Función de retorno
retorno:function(obj,indice,pila) {
resultado+="<li>"+obj.ruta;
}
}).ejecutar();
resultado+="</ul>";
resultado+="<h1>Método útil para acceder a una propiedad anidada dada su ruta separada por puntos</h1><ul>";
var valor=new pila({
origen:{
uno:{
dos:{
tres:"Cuatro"
}
}
}
}).obtener("uno.dos.tres");
resultado+="<li>"+valor+"</ul>";
document.querySelector("#resultado").innerHTML=resultado;
}
</script>
</body>
</html>