Código de ayuda
Índice
Corto y dulce
Los Ayudantes de Código le ayudan como desarrollador web a configurar pruebas A/B, especialmente cuando desarrolla para aplicaciones de una sola página.
Funciones auxiliares de JavaScript
varifyHelpers.waitFor
Con la función waitFor se utiliza un observador de mutaciones para esperar un elemento definido. En cuanto se añaden al DOM nuevos elementos que corresponden al selector definido (por ejemplo, mediante AJAX o JavaScript), se ejecuta la función de devolución de llamada.
La función callback se llama para cada elemento recién identificado.
Ejemplo de código
<div>
<p>This is existing content.</p>
<!-- <p class="lazyloaded-content">This content will be loaded later.</p> -->
</div>
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
// After the content was loaded, we want to color it red.
element.style.color = 'red';
});
Añadir varios selectores
window.varify.helpers.waitFor('.lazyloaded-content, .another-selector, and-another-selector', (element) => {
// After the content was loaded, we want to color it red.
element.style.color = 'red';
});
varifyHelpers.onDomChanged
Esta función llama al CallBack cada vez que se añaden o eliminan elementos en el DOM. También se basa en un observador de mutaciones.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Esta función llama a la llamada de retorno tan pronto como se haya cargado el DOM. Si el DOM ya está cargado, la llamada de retorno se llama inmediatamente.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Con la función isInView el sistema espera a que un elemento DOM específico sea completamente visible en la ventana gráfica. Por defecto, la llamada de retorno sólo se ejecuta una vez, pero opcionalmente puede ejecutarse cada vez que el elemento se encuentre en la ventana gráfica.
// The callback here will be triggered ONE TIME, when the element is in view.
window.varify.helpers.isInView('.product', (element) => {
window.dataLayer.push({
event: 'product viewed',
element,
});
});
// Adding true as third parameter
// will trigger the callback EVERY TIME the element is in view.
window.varify.helpers.isInView('.product', () => {}, true);
varifyHelpers.resetListeners
Esta función reinicia todos los observadores (observador de intersección y de mutación) de las funciones mencionadas. Esto significa que las funciones de devolución de llamada definidas dejan de ejecutarse.
// As an example, we setup a waitFor listener here. This will use a MutationObserver under the hood.
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
element.style.color = 'red';
});
// The next resetting function call could e.g. be located in a navigation callback function.
window.varify.helpers.resetListeners()