Segunda version de Inspector, con mejoras en la logica y sin usar jquery
Solo se agrega al final del HTML.
<script type="text/javascript" src="Inspector.v2.js"></script> EL codigo crea un Objeto que se anida en el Nodo html, y en el momento en que cambia el modelo de datos del objeto inicia una actualizacion sobre ese Nodo y sus nodos hijos que a raiz de ese cambio su interfaz haya sido afectada.
Para indentificar los nodos html los cuales estaran aferrados aun modelo o componente se agrega un componente llamado com este componente tiene como entrada el nombre del componente y si es requerido un nombre de instancia las dos formas acontinuacion son validas.
<div com="Poo as mypoo">{{mypoo.name}}</div>
<div com="Poo">{{this.name}}</div>Ahora un codigo mas complejo.
<div com="Poo as mypoo">
<!-- data binded to mypoo.name object -->
{{mypoo.name}}
<br>
<!-- input with the model as two way binding data-source -->
<input model="mypoo.name" />
<!-- click to clear the data will be clear and also will be updated-->
<button onclick="mypoo.name='';"> clear </button>
</div>
<script type="text/javascript">
function PooClass() {
this.name = "I am willie the poo";
}
// TELL INSPECTOR TO ADD THIS OBJECT
Inspector.add("Poo", PooClass);
</script> El inspector usa propiedades html nativas para leer eventos como onclick onchange onblur etc... estos eventos se pueden usar tanto para ejecutar funciones globales o funciones que solo existen dentro del componente creado.
<div com="Poo as mypoo">
<!-- data binded to mypoo.name object -->
{{mypoo.name}}
<br>
<!-- input the name -->
<input onInput="mypoo.setName(evt)" />
<!-- click to clear the data will be clear and also will be updated-->
<button onclick="this.clear()"> clear </button>
</div>
<script type="text/javascript">
function PooClass() {
this.name = "I am willie the poo";
this.setName=function(evt){
this.name=evt.target.name;
};
this.clear=function(){
this.name="";
}
}
// TELL INSPECTOR TO ADD THIS OBJECT
Inspector.add("Poo", PooClass);
</script> - model : Esta propiedad es usada en metodos de entrada o seleccion para que lea o escriba sobre una propiedad/campo/atributo del componente, por lo tanto escribira sobre esta propiedad si hay un cambio o input sobre el, y/o actualizara sobre el DOM si hay una actualizacion sobre la propiedad/campo/atributo
<input type='text' model='this.name' />
<script type="text/javascript">
function PooClass() {
this.name = "pedro";
}
Inspector.add("Poo", PooClass);
</script>- html : Esta propiedad agrega HTML al nodo que lo contenga, puede ser textual un template o generado dinamicamente ejecutando un metodo.
<ul html="this.getColors()"></ul>
<script type="text/javascript">
function PooClass() {
this.colors = ["red","blue","green","yellow"];
this.getColors=function(){
return this.colors.map((color)=>{
return `<li >${color}</li>`
}).join("");
};
}
Inspector.add("Poo", PooClass);
</script>Sobre la consola js puedes ir agregando colores y automaticamente aparecera un nuevo nodo.
- include : This tag is used to load files as htmls, js , css or a full stack or files, Ex:
** Load html:
<include src="poocomponent.html" />** Load js:
<inlcude src="poocomponent.js">** Load full stack of files (pooocomponent.json):
["./pooocomponent.css","./poocomponent.js","./pooocomponent.html"]
<include src="poocomponent.json" />** know when has load file=(pooocomponent.json):
["./pooocomponent.css","./poocomponent.js","./pooocomponent.html"]
<include src="poocomponent.json" onload="jsmethodcallback()" />** show some data while loading, can be anithing...
<include src="somefile.html" onload="jsmethodcallback()"> ... LOADING </include>- add : Agrega componente.
- clear : Remueve todos los componentes agregados.
- run : vuelve a ejecutar el inspector para inspeccionar y evalular los componentes con el html.
- Includer: Es un objeto que puede agregar archivos al HTML como html, js, mjs, css.
- Nithel Elias - Initial work - Nithel Elias
Colombian Senior Developer
This project is licensed under the MIT License - see the LICENSE.md file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent