Algo bastante sencillo y que puede sernos útil es detectar los parámetros que se envían por URL para así modificar el comportamiento de nuestro Javascript, por ejemplo si se envía un parámetro o tiene cierto valor, se podría cargar un objeto o implementar una función.
El script sería el siguiente:
// Obtenemos la URL
var url = document.location.href;
// Nos quedamos con los parámetros
url = url.substring(url.lastIndexOf('?')+1);
// Dividimos los distintos parámetros
url = url.split('&');
// Almacenamos los parámetros en un array(param => valor)
var res = new Array();
for(var i=0; i
Si nuestra URL es amigable, no hay parámetros sino que se indican en la propia URL (http://servidor/metodo/accion/parametro/parametro), deberíamos hacer algo así:
//Obtenemos la Query String (URL - host)
var url = document.location.href;
url = url.substring(url.lastIndexOf(document.location.host)+1);
// Separamos mediante la barra (/)
var res = url.split('/');
Como se puede apreciar es muy sencillo, pero nos puede ser muy útil, sobre todo si queremos ganar en rendimiento y no cargar todo el js, que a veces no está muy optimizado y en todas las páginas se carga cuando a veces no sería necesario.
Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:
$('.boton')
Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:
Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)
La jerarquía de las plantillas de wordpress permite definir diferentes plantillas para mostrar según el tipo de contenido. Por ejemplo, la template para mostrar el contenido de un post es single.php, pero si es un custom post type podemos crearnos la template single-miposttype.php y que use esa plantilla específica para mostrar los contenidos del custom post type. Si se trata de una página mostrará page.php, y así con todos los tipos de contenido.
Lo que nos encontramos en ocasiones es que queremos ejecutar un javascript específico asociado a esa plantilla, lo cual podemos hacerlo a la hora de añadir los scripts preguntando por el tipo de contenido. Pero si lo queremos hacer de una forma más automática, podemos añadir en el filtro template_include la acción de añadir el script.
add_filter('template_include', 'js_load_script_template');
function js_load_script_template($template) {
// Obtenemos el fichero de la template que se usa
$js = pathinfo($template);
$js = $js['filename'];
// Me gusta obtener la versión del theme para evitar caches
$my_theme = wp_get_theme();
$version = $my_theme->get( 'Version' );
// Si el fichero js existe, p.e. single-miposttype.js lo añadimos
if (file_exists(get_template_directory().'/js/'.$js.'.js')) {
wp_enqueue_script( $js, get_bloginfo('template_directory').'/js/'.$js.'.js', array(), $version );
}
// Tambien ejecuto el script relacionado con la plantilla generica, p.e. single.js
$js_part = preg_replace('#^([^\-]+)\-.*$#', '$1', $js);
if ($js != $js_part && file_exists(get_template_directory().'/js/'.$js_part.'.js')) {
wp_enqueue_script( $js_part, get_bloginfo('template_directory').'/js/'.$js_part.'.js', array(), $version );
}
return $template;
}
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
IT Mill Toolkit es un framework open source para crear interfaces de usuario, ofreciendo widgets y herramientas para desarrollar aplicaciones web de alta calidad. Podrás crear RIAs sin tener que preocuparte por imcompatibilidades de navegadores o el DOM de Javascript, tan solo usando herramientas Java.
Además ofrece varios widgets con soporte para AJAX, seguridad para evitar ataques mediante Javascript, está basado en Google Web Toolkit, faclidad para cambiar los estilos y muchas cosas más. IT Mill Toolkit
VÃa / WebAppers