ছেদ এবং মিউটেশন পর্যবেক্ষকদের জন্য একটি ভাল এপিআই

একটি পূর্ববর্তী নিবন্ধআমি আপনাকে দেখিয়েছি যে কীভাবে পুনরায় চিত্র পর্যবেক্ষক এপিআইকে ব্যবহার করার সহজ কিছুতে রিফ্যাক্টর করা যায়:

// From this
const observer = new ResizeObserver(observerFn)

function observerFn (entries) {
  for (let entry of entries) {
    // Do something with each entry
  }
}

const element = document.querySelector('#some-element')
observer.observe(element);

// To this 
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, {
  callback({ entry }) {
    // Do something with each entry
  }
})

আজ, আমরা এর জন্য একই কাজ করতে যাচ্ছি MutationObserver এবং IntersectionObserver।

রিফ্যাক্টরিং মিউটেশন পর্যবেক্ষক

MutationObserver এর মতো প্রায় একই এপিআই রয়েছে ResizeObserver। সুতরাং আমরা আমরা লিখেছি কোডের পুরো অংশটি ব্যবহারিকভাবে অনুলিপি করতে পারি resizeObserver থেকে mutationObserver।

export function mutationObserver(node, options = {}) {
  const observer = new MutationObserver(observerFn)
  const { callback, ...opts } = options
  observer.observe(node, opts)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('mutate', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}

আপনি এখন ব্যবহার করতে পারেন mutationObserver সঙ্গে callback প্যাটার্ন বা ইভেন্ট শ্রোতার প্যাটার্ন।

const node = document.querySelector('.some-element')

// Callback pattern 
const obs = mutationObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('mutate', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})

অনেক সহজ!

পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করা

মত নয় ResizeObserver পর্যবেক্ষণ উপাদানগুলি বন্ধ করার জন্য যার দুটি পদ্ধতি রয়েছে, MutationObserver শুধুমাত্র একটি আছে, disconnect পদ্ধতি।

export function mutationObserver(node, options = {}) {
  // ... 
  return {
    disconnect() {
      observer.disconnect()
    }
  }
}

কিন্তু, MutationObserver একটি আছে takeRecords পদ্ধতি যা আপনাকে দেয় অপরিশোধিত রেকর্ড পান আপনি সংযোগ বিচ্ছিন্ন করার আগে। যেহেতু আমাদের করা উচিত takeRecords আমরা আগে disconnectআসুন এটি ভিতরে ব্যবহার করা যাক disconnect।

একটি সম্পূর্ণ এপিআই তৈরি করতে, আমরা এই পদ্ধতিটিও ফিরিয়ে দিতে পারি।

export function mutationObserver(node, options = {}) {
  // ... 
  return {
    // ...
    disconnect() {
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    }
  }
}

এখন আমরা সহজেই আমাদের মিউটেশন পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করতে পারি disconnect।

const node = document.querySelector('.some-element')
const obs = mutationObserver(/* ... */)

obs.disconnect()

মিউটেশনোবসার্ভারের পর্যবেক্ষণ বিকল্পগুলি

আপনি যদি ভাবছিলেন, MutationObserver‘এস observe পদ্ধতি 7 নিতে পারে বিকল্প। তাদের প্রত্যেকে কী পর্যবেক্ষণ করবেন তা নির্ধারণ করে এবং সেগুলি সমস্ত ডিফল্ট false।

subtree: নোডের পুরো সাবট্রি পর্যবেক্ষণ করে
childList: সংযোজন বা অপসারণের শিশু উপাদানগুলির জন্য মনিটর। যদি subtree হয় trueএটি সমস্ত বংশধর উপাদান পর্যবেক্ষণ করে।
attributes: বৈশিষ্ট্য পরিবর্তনের জন্য মনিটর
attributeFilter: নিরীক্ষণের জন্য নির্দিষ্ট বৈশিষ্ট্যের অ্যারে
attributeOldValue: যদি এটি পরিবর্তন করা হয় তবে পূর্ববর্তী অ্যাট্রিবিউট মানটি রেকর্ড করা উচিত কিনা
characterData: চরিত্রের ডেটা পরিবর্তনের জন্য মনিটর
characterDataOldValue: পূর্ববর্তী চরিত্রের ডেটা মান রেকর্ড করা উচিত কিনা

ছেদ পর্যবেক্ষক রিফ্যাক্টরিং

জন্য API IntersectionObserver অন্যান্য পর্যবেক্ষকদের মতো। আবার, আপনাকে করতে হবে:

একটি নতুন পর্যবেক্ষক তৈরি করুন: সঙ্গে new কীওয়ার্ড এই পর্যবেক্ষক কার্যকর করার জন্য একটি পর্যবেক্ষক ফাংশন নেয়।
পর্যবেক্ষণ করা পরিবর্তনগুলি সহ কিছু করুন: এটি পর্যবেক্ষক ফাংশনের মাধ্যমে করা হয় যা পর্যবেক্ষকের মধ্যে পাস করা হয়।
একটি নির্দিষ্ট উপাদান পর্যবেক্ষণ: ব্যবহার করে observe পদ্ধতি।
(Ally চ্ছিকভাবে) উপাদানটি আনবি সার্ভার করুন: ব্যবহার করে unobserve বা disconnect পদ্ধতি (আপনি কোন পর্যবেক্ষক ব্যবহার করছেন তার উপর নির্ভর করে)।

কিন্তু IntersectionObserver আপনার বিকল্পগুলি 1 ধাপে পাস করতে হবে (পদক্ষেপ 3 এর পরিবর্তে)। সুতরাং এখানে ব্যবহার করার কোডটি এখানে IntersectionObserver এপিআই।

// Step 1: Create a new observer and pass in relevant options
const options = {/*...*/}
const observer = new IntersectionObserver(observerFn, options)

// Step 2: Do something with the observed changes
function observerFn (entries) {
  for (const entry of entries) {
    // Do something with entry
  }
}

// Step 3: Observe the element
const element = document.querySelector('#some-element')
observer.observe(element)

// Step 4 (optional): Disconnect the observer when we're done using it
observer.disconnect(element)

যেহেতু কোডটি একই রকম, তাই আমরা যে কোডটির জন্য লিখেছি তাও আমরা অনুলিপি করতে পারি mutationObserver মধ্যে intersectionObserver। এটি করার সময়, আমাদের বিকল্পগুলি পাস করার জন্য মনে রাখতে হবে IntersectionObserver এবং না observe পদ্ধতি।

export function mutationObserver(node, options = {}) {
  const { callback, ...opts } = options
  const observer = new MutationObserver(observerFn, opts)
  observer.observe(node)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('intersect', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}

এখন আমরা ব্যবহার করতে পারি intersectionObserver একই সহজেই ব্যবহারযোগ্য এপিআই সহ:

const node = document.querySelector('.some-element')

// Callback pattern 
const obs = intersectionObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('intersect', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})

ছেদ পর্যবেক্ষক সংযোগ বিচ্ছিন্ন

IntersectionObserverএর পদ্ধতিগুলি উভয়েরই ইউনিয়ন resizeObserver এবং mutationObserver। এটির চারটি পদ্ধতি রয়েছে:

observe: একটি উপাদান পর্যবেক্ষণ
unobserve: একটি উপাদান পর্যবেক্ষণ বন্ধ
disconnect: সমস্ত উপাদান পর্যবেক্ষণ বন্ধ করে
takeRecords: অপরিশোধিত রেকর্ড পান

সুতরাং, আমরা যে পদ্ধতিগুলি লিখেছি সেগুলি একত্রিত করতে পারি resizeObserver এবং mutationObserver এই এক জন্য:

export function intersectionObserver(node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },

    disconnect() {
      // Take records before disconnecting.
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    },
    
    takeRecords() {
      return observer.takeRecords()
    },
  }
}

এখন আমরা এর সাথে পর্যবেক্ষণ বন্ধ করতে পারি unobserve বা disconnect পদ্ধতি।

const node = document.querySelector('.some-element')
const obs = intersectionObserver(node, /*...*/)

// Disconnect the observer
obs.disconnect()

`IntersectionObserver` বিকল্প

আপনি যদি ভাবছিলেন, IntersectionObserver তিনটি বিকল্প নেয়:

root: পর্যবেক্ষণ করা উপাদানগুলি দৃশ্যমান কিনা তা যাচাই করতে ব্যবহৃত উপাদানটি
rootMargin: আপনাকে মূলের প্রান্তগুলি থেকে একটি অফসেট পরিমাণ নির্দিষ্ট করতে দেয়
threshold: কখন কোনও পর্যবেক্ষক এন্ট্রি লগ করবেন তা নির্ধারণ করে

আপনাকে সাহায্য করার জন্য এখানে একটি নিবন্ধ বুঝতে IntersectionObserver বিকল্প।

জাঁকজমকপূর্ণ ল্যাবজেডের মাধ্যমে অনুশীলনে এটি ব্যবহার করা

জাঁকজমকপূর্ণ ল্যাবজ একটি আছে utils লাইব্রেরি যা ধারণ করে resizeObserver, mutationObserver এবং IntersectionObserver।

আপনি যদি প্রতিটি প্রকল্পে উপরের স্নিপেটগুলি অনুলিপি করতে না চান তবে আপনি সেগুলি ব্যবহার করতে পারেন।

import { 
  resizeObserver, 
  intersectionObserver, 
  mutationObserver 
} from 'splendidlabz/utils/dom'

const mode = document.querySelector(‘some-element’)

const resizeObs = resizeObserver(node, /* ... */)
const intersectObs = intersectionObserver(node, /* ... */)
const mutateObs = mutationObserver(node, /* ... */)

আমরা উপরে একসাথে লিখেছি কোডটি বাদ দিয়ে (এবং এতে পূর্ববর্তী নিবন্ধ), দুর্দান্ত ল্যাবজে প্রতিটি পর্যবেক্ষক পদ্ধতি আপনাকে একবারে একাধিক উপাদান পর্যবেক্ষণ করতে এবং বন্ধ করতে দিতে সক্ষম (ব্যতীত ব্যতীত (ব্যতীত mutationObserver কারণ এটি একটি নেই unobserve পদ্ধতি)

const items = document.querySelectorAll('.elements')
const obs = resizeObserver(items, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

// Unobserves two items at once
const subset = (items(0), items(1))
obs.unobserve(subset)

সুতরাং আমি ইতিমধ্যে আপনার জন্য তৈরি করা ফাংশনগুলি ব্যবহার করা সহজ একটি সহজ হতে পারে। 😉

নির্লজ্জ প্লাগ: জাঁকজমকপূর্ণ ল্যাবজ সিএসএস, জাভাস্ক্রিপ্ট, অ্যাস্ট্রো এবং স্যাভেল্টের জন্য – আমি গত কয়েক বছর ধরে তৈরি করেছি – এর জন্য প্রচুর দরকারী ইউটিলিটি রয়েছে।

আমি সেগুলি সমস্ত জাঁকজমকপূর্ণ ল্যাবজেডে পার্ক করেছি, তাই আমার বেশিরভাগ ওয়েব প্রকল্পের জন্য দরকারী ফাংশনগুলির জন্য আমাকে আর ইন্টারনেট ঘোরানোর দরকার নেই। আপনি যদি একবার দেখে থাকেন তবে আমি যা মেনে চলেছি তা আপনি কেবল উপভোগ করতে পারেন!

(আমি এখনও লেখার সময় ডকস তৈরি করছি যাতে এটি তুলনামূলকভাবে খালি মনে হতে পারে now এখনই এবং তারপরে আবার পরীক্ষা করুন!)

রিফ্যাক্টর স্টাফ শিখছে

আপনি যদি পর্যবেক্ষক এপিআইগুলিকে কীভাবে রিফ্যাক্টর করতে পারি তা আমি ব্যাখ্যা করে যেভাবে আপনি পছন্দ করেন তবে আপনি কীভাবে জাভাস্ক্রিপ্টকে আকর্ষণীয় শিখিয়েছি তা আপনি খুঁজে পেতে পারেন।

মধ্যে আমার জাভাস্ক্রিপ্ট কোর্সআপনি 20 টি বাস্তব জীবনের উপাদান তৈরি করতে শিখবেন। আমরা সহজভাবে শুরু করব, বৈশিষ্ট্যগুলি যুক্ত করব এবং রিফ্যাক্টরটি যুক্ত করব।

রিফ্যাক্টরিং শেখার মতো একটি গুরুত্বপূর্ণ দক্ষতা – এবং এখানে আমি নিশ্চিত হয়েছি যে আপনি এটি আপনার মস্তিষ্কে সিমেন্ট পেয়েছেন।

এটাই! আশা করি আপনি এই টুকরোটি পড়তে মজা পেয়েছেন!

Source link

রিফ্যাক্টরিং মিউটেশন পর্যবেক্ষক

পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করা

মিউটেশনোবসার্ভারের পর্যবেক্ষণ বিকল্পগুলি

ছেদ পর্যবেক্ষক রিফ্যাক্টরিং

ছেদ পর্যবেক্ষক সংযোগ বিচ্ছিন্ন

IntersectionObserver বিকল্প

জাঁকজমকপূর্ণ ল্যাবজেডের মাধ্যমে অনুশীলনে এটি ব্যবহার করা

রিফ্যাক্টর স্টাফ শিখছে

Related Posts

জার্মানির মেরজ: বোমার জন্য ইরানি কোয়েস্ট ‘আর গুরুতরভাবে বিতর্কিত হতে পারে না’

প্রাক্তন টিভি নিউজ অ্যাঙ্কর স্টেফানি হকরিজ কোভিড রিলিফ কেলেঙ্কারীতে দোষী সাব্যস্ত

ডাব্লুজিএডাব্লু 2025 অফিসার এবং পরিচালনা পর্ষদ নির্বাচন প্রার্থীদের ঘোষণা করেছে

মন্তব্য করুন জবাব বাতিল

`IntersectionObserver` বিকল্প