Kod Yardımcıları
İçindekiler tablosu
Kısa ve tatlı
Kod Yardımcıları, bir web geliştiricisi olarak özellikle tek sayfalı uygulamalar geliştirirken A/B testleri oluşturmanıza yardımcı olur.
JavaScript yardımcı işlevleri
varifyHelpers.waitFor
Fonksiyon ile waitFor tanımlanmış bir öğeyi beklemek için bir mutasyon gözlemcisi kullanılır. Tanımlanan seçiciye karşılık gelen yeni öğeler DOM'a eklenir eklenmez (örneğin AJAX veya JavaScript aracılığıyla), geri arama işlevi yürütülür.
Geri arama işlevi, yeni tanımlanan her öğe için çağrılır.
Kod örneği
<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';
});
Birden fazla seçici ekleme
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
Bu işlev, DOM'a her öğe eklendiğinde veya silindiğinde CallBack'i çağırır. Aynı zamanda bir mutasyon gözlemcisine dayanmaktadır.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Bu fonksiyon, DOM yüklenir yüklenmez geri çağrıyı çağırır. DOM zaten yüklenmişse, geri arama hemen çağrılır.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Fonksiyon ile isInView sistem belirli bir DOM öğesinin görüntü alanında tamamen görünür olmasını bekler. Geri arama varsayılan olarak yalnızca bir kez çalıştırılır, ancak isteğe bağlı olarak öğe görüntü alanında her bulunduğunda çalıştırılabilir.
// 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
Bu fonksiyon yukarıda bahsedilen fonksiyonların tüm gözlemcilerini (kesişim ve mutasyon gözlemcisi) sıfırlar. Bu, tanımlanan geri arama fonksiyonlarının artık çalıştırılmayacağı anlamına gelir.
// 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()