Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में JavaScript की Observe Technique के बारे में जानेगे की Observe Technique क्या है और वह कैसे काम करती वह सब हम step by step समझेंगे!.
JavaScript में Observe Technique क्या है?
JavaScript में “Observe” technique का इस्तेमाल किसी elements में changes को monitor करना और उस पर react करना है!. यह changes DOM elements, Object या data stream में हो सकते है!. इस technique से website और application को ज्यादा interactive और user friendly बनती है!.
JavaScript “Observe” के लिए कुछ built-in tools and patterns provide करता है!. जैसे की
- MutationObserver: वह DOM में होने वाले changes को monitor करता है!.
- IntersectionObserver: यह element कब Viewport में आता या जाता है यह observes करता है!.
- Proxy: यह JavaScript object की properties में changes को track करता है!.
- Observables: यह data stream को handle करने के लिए इस्तेमाल होता है!.
इसका इस्तेमाल करके आप real-time, dynamic feature बना सकते है!. यह techniquie हर developer के लिए जरुरी है, खाशकर अगर आप modern application create कर रहे है हो!.
MutationObserver
MutationObserver एक JavaScript object है जो आपको real-time में DOM (document object model) में होने वाले changes को देखने की अनुमति देता है!. यह वह पता लगाने का एक तरीका provide करता है की कब elements को add, remove, modified किया जाता है, जो अलग-अलग scenarios में उपयोगी हो सकता है, जैसे की यह पता लगाना की कब dynamic content load की जाती है या कब किसी element की attribute changes की जाती है!.
Syntax:
const observer = new MutationObserver(callback);
यह एक function है जो किसी change होने को detected करने पर execute होगा. यह MutationRecord object का एक array receive करेगा, जो हुवे mutations का describe करेगा!.
Observer Technique Configuration Options
ChildList: Child nods elements के add और remove का observes करता है!.
Attributes: Target node के attributes में changes का observes करता है!.
subtree: Inner elements के भी बदलाव track करता है
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>JavaScript Objserve technique</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='/'>
<script src='/'></script>
</head>
<body>
<main>
<header>
<h1>Welcome to Our Homepage</h1>
</header>
<section id="section1">
<h2>About Us</h2>
<p>This is the about us section. Our company is awesome!</p>
</section>
<section id="section3">
<h2>Featured Products</h2>
<p>Check out our latest products!</p>
<button id="addTextBtn">Add New Product</button>
</section>
</main>
<script>
const targetSection = document.getElementById('section3');
const config = {
childList: true,
attributes: true,
subtree: true
};
const callback = (mutationsList, observer) => {
mutationsList.forEach(mutation => {
console.log(mutation);
if (mutation.type === 'childList') {
console.log('A child element was added.');
}
});
};
const observer = new MutationObserver(callback);
observer.observe(targetSection, config);
document.getElementById('addTextBtn').addEventListener('click', () => {
const newText = document.createElement('p');
newText.textContent = 'New Text added!';
newText.classList.add("addd")
targetSection.appendChild(newText);
});
// observer.disconnect();
</script>
</body>
</html>
ऊपर के example में देख सकते है की section3 के अंदर एक button (#addTextBtn) दिया गया है, जिससे नया paragraph p tag जोड़ा जायेगा. जब “Add New Text” button पर click करेंगे, तो एक new <p> element section3 में जुड़ जायेगा!. और MutationObserver इस changes को detect करेगा और console में एक message log करेगा!.
MutationObserver एक a powerful API है, जो DOM में changes को efficiently track करता है!. Event Listeners(addEventListener) से अलग, यह asynchronous तरीके से DOM changes detect कर सकता है!. इसका इस्तेमाल Real-Time UI updates, Chat Apps, Stock market websites, और dynamic content tracking के लिए किया जाता है!.
IntersectionObserver
IntersectionObserver API एक powerful tool है जो यह पता लगाने में मदद करता है की कोय element viewport(screen) में कब आता या जाता है!. इसका इस्तेमाल Lazy loading, Infinite Scrolling, और performance Optimization के लिए किया जाता है यह tradition scroll event listener से बेहतर होता है, क्योकि वह ज्यादा efficient और performance friendly होता है!.
Syntax:
let observer = new IntersectionObserver(callback, options); observer.observe(targetElement);
Explanation:
callback → जब target element स्क्रीन में enter या exit करेगा, तब यह function trigger होगा।
options → इसमें observer की settings होती हैं (जैसे viewport का कितना हिस्सा visible होना चाहिए)।
observe(targetElement) → जिस element को track करना है, उसे observe करता है।
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IntersectionObserver Example</title>
<style>
.box {
width: 100%;
height: 300px;
background-color: lightgray;
margin: 50px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: background-color 0.5s ease-in-out;
}
.visible {
background-color: lightgreen !important;
}
</style>
</head>
<body>
<h1>Scroll Down to See the Effect</h1>
<div style="height: 800px;">Scroll Down</div> <!-- Extra Space for Scrolling -->
<div class="box" id="targetBox">Observe Me!</div>
<script>
const target = document.getElementById('targetBox');
const options = {
root: null,
rootMargin: "0px",
threshold: 0.5
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
console.log("Element is now visible!");
} else {
entry.target.classList.remove("visible");
}
});
}, options);
observer.observe(target);
</script>
</body>
</html>
ऊपर के example में देख सकते है जिस element को observe करना है उसे select किया है।
target: जिस element को observe करना है (#targetBox) उसे select किया।
Options:
root: null → पूरे viewport को reference माना गया।
rootMargin: “0px” → कोई extra margin नहीं।
threshold: 0.5 → जब element का 50% हिस्सा viewport में आएगा, तब callback trigger होगा।
Observer Logic:
अगर element viewport में दिखेगा, तो उसे green background color दे दिया जाएगा।
अगर element बाहर चला जाएगा, तो background फिर से gray हो जाएगा।
observer.observe(target) → यह observer को activate करता है।
Proxy
Proxy एक powerful feature है, जो हमें JavaScript के behavior को customize और control करने की अनुमति देता है!. Proxy का इस्तेमाल Object के properties को manupulate करने, validation, Default values assign करने और Loggine और Debugging करने के लिए किया जाता है!.
Syntax:
const proxy = new Proxy(target, handler);
Parameters:
target: वह object जिसे हम control करना चाहते है!.
handler: एक object जो traps(interceptors) को define करता है, ताकि हम target object के behovior को modify कर सके!.
Example:
<script>
const handler = {
get: function(target, property) {
return property in target ? target[property] : "Property not found";
}
};
const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name="Rahul"); // Output: Rahul
console.log(proxyUser.age); // Output: 25
console.log(proxyUser.email); // Output: Property not found
</script>
uper ke example के देख सकते है get trap तब trigger होता है, जब हम object की कोई property access करते हैं।
अगर property मौजूद नहीं है, तो “Property not found” return होता है।
Observables
Observables एक powerful asynchronous programming technique है, जो data streams को handle करने के लिए इस्तेमाल किया जाता है। यह RxJS (Reactive Extensions for JavaScript) library का एक महत्वपूर्ण हिस्सा है, जिसे event handling, HTTP requests, और real-time data processing के लिए उपयोग किया जाता है।
