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
waitFor -> DOM'daki öğeleri bekleyin
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';
});
onDomChanged -> DOM'daki Değişiklikler
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.
});
onDomLoaded -> DOM yüklendi
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.
});
isInView -> Eleman tamamen görünüm alanında
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);
isInEditor -> Varify Editor için kontrol edin
Bu yardımcı işlevi, o anda Varify Düzenleyicisinde olup olmadığınızı kontrol etmek için kullanabilirsiniz. Bu, kodunuzun sadece canlı web sitesinde yürütülür - ve editörde değil.
Bu, özellikle betiğiniz, örneğin. JavaScript ile Yönlendirme tetiklendiğinde: Sorguyu, düzenleyicide iletmeyi özellikle önlemek için kullanabilirsiniz, böylece orada sorunsuz bir şekilde test etmeye ve düzenlemeye devam edebilirsiniz.
if (window.varify.helpers.isInEditor()) {
return
}
// Your JavaScript Code (won't run in editor)
resetListeners -> Tüm gözlemcileri sıfırla
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()