পুনরায় আকার পর্যবেক্ষকের জন্য একটি ভাল এপিআই

রেজাইজ পর্যবেক্ষক, মিউটেশন পর্যবেক্ষক এবং ছেদ পর্যবেক্ষকরা সমস্ত ভাল এপিআই যা তাদের পুরানো অংশগুলির চেয়ে বেশি পারফরম্যান্ট:

এই তিনটি পর্যবেক্ষকের জন্য এপিআই বেশ একই রকম (তবে তাদের পার্থক্য রয়েছে যা আমরা পরে যাব)। কোনও পর্যবেক্ষক ব্যবহার করতে আপনাকে নীচের পদক্ষেপগুলি অনুসরণ করতে হবে:

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

অনুশীলনে, উপরের পদক্ষেপগুলি এর সাথে এর মতো দেখাচ্ছে ResizeObserver।

// Step 1: Create a new observer
const observer = new ResizeObserver(observerFn)

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

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

// Step 4 (optional): Disconnect the observer
observer.disconnect(element)

পদক্ষেপগুলি পরিষ্কার হয়ে যাওয়ার পরে এটি পরিষ্কার (এবং বোধগম্য) দেখাচ্ছে। তবে এটি মন্তব্যগুলি ছাড়াই কোনও গোলযোগের মতো দেখতে পারে:

const observer = new ResizeObserver(observerFn)

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

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

সুসংবাদটি হ’ল: আমি মনে করি আমরা পর্যবেক্ষক এপিআইগুলিকে উন্নত করতে পারি এবং তাদের ব্যবহার করা আরও সহজ করে তুলতে পারি।

পুনরায় আকার পর্যবেক্ষক

আসুন শুরু করা যাক ResizeObserver যেহেতু এটি তাদের সকলের মধ্যে সবচেয়ে সহজ। আমরা এমন একটি ফাংশন লিখে শুরু করব যা এনক্যাপসুলেট করে resizeObserver আমরা তৈরি করি।

function resizeObserver () {
  // ... Do something
}

রিফ্যাক্টরিং শুরু করার সবচেয়ে সহজ উপায় ResizeObserver কোডটি আমাদের মধ্যে তৈরি করা সমস্ত কিছু রাখা হয় resizeObserver প্রথম

function resizeObserver () {
  const observer = new ResizeObserver(observerFn)

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

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

এরপরে, আমরা পাস করতে পারি element এটি সহজ করার জন্য ফাংশনটিতে। যখন আমরা এটি করি, আমরা এটি দূর করতে পারি document.querySelector লাইন।

function resizeObserver (element) {
  const observer = new ResizeObserver(observerFn)

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

  observer.observe(node);
}

এটি ফাংশনটিকে আরও বহুমুখী করে তোলে যেহেতু আমরা এখন এটিতে কোনও উপাদান পাস করতে পারি।

// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node)

এটি সমস্ত লেখার চেয়ে ইতিমধ্যে অনেক সহজ ResizeObserver আপনি যখনই এটি ব্যবহার করতে চান তখন স্ক্র্যাচ থেকে কোড।

এরপরে, এটি বেশ স্পষ্ট যে আমাদের কলব্যাকে একটি পর্যবেক্ষক ফাংশনে যেতে হবে। সুতরাং, আমরা সম্ভাব্যভাবে এটি করতে পারি:

// Not great
function resizeObserver (node, observerFn) {
  const observer = new ResizeObserver(observerFn)
  observer.observe(node);
}

যেহেতু observerFn সর্বদা একই – এটি মাধ্যমে লুপ entries এবং প্রতিটি উপর কাজ করে entry – আমরা রাখতে পারে observerFn এবং একটি পাস callback উপাদানটি পুনরায় আকার দেওয়ার সময় কাজ সম্পাদন করতে।

// Better 
function resizeObserver (node, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback(entry)
    }
  }

  observer.observe(node);
}

এটি ব্যবহার করতে, আমরা পাস করতে পারি callback মধ্যে resizeObserver – এটি তৈরি করে resizeObserver ইভেন্ট শ্রোতার মতো কিছুটা পরিচালনা করুন যার সাথে আমরা ইতিমধ্যে পরিচিত।

// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, entry => {
  // Do something with each entry
})

আমরা উভয়ই সরবরাহ করে কলব্যাকটি কিছুটা উন্নত করতে পারি entry এবং entries। অতিরিক্ত ভেরিয়েবল পাস করার জন্য কোনও পারফরম্যান্স হিট নেই তাই এখানে আরও নমনীয়তা সরবরাহ করার কোনও ক্ষতি নেই।

function resizeObserver (element, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback({ entry, entries })
    }
  }

  observer.observe(element);
}

তাহলে আমরা দখল করতে পারি entries মধ্যে callback আমাদের যদি প্রয়োজন হয়।

// Usage of the resizeObserver function
// ...
const obs = resizeObserver(node, ({ entry, entries }) => {
  // ...
})

এরপরে, ভেরিয়েবলের পরিবর্তে বিকল্প প্যারামিটার হিসাবে কলব্যাকটি পাস করা বোধগম্য। এই তৈরি হবে resizeObserver এর সাথে আরও সামঞ্জস্যপূর্ণ mutationObserver এবং intersectionObserver ফাংশনগুলি যা আমরা পরবর্তী নিবন্ধে তৈরি করব।

function resizeObserver (element, options = {}) {
  const { callback } = options
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
        callback({ entry, entries })
      }
  }

  observer.observe(element);
}

তারপরে আমরা ব্যবহার করতে পারি resizeObserver এই মত।

const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})

পর্যবেক্ষকও একটি বিকল্প নিতে পারেন

ResizeObserver‘এস observe পদ্ধতি একটি নিতে পারে বিকল্প একটি সম্পত্তি আছে যে বস্তু, box। এটি নির্ধারণ করে যে পর্যবেক্ষক পরিবর্তনগুলি পর্যবেক্ষণ করবে কিনা content-box, border-box বা device-pixel-content-box।

সুতরাং, আমাদের এই বিকল্পগুলি থেকে বের করতে হবে options আপত্তি এবং তাদের পাস observe।

function resizeObserver (element, options = {}) {
  const { callback, ...opts } = options
  // ...
  observer.observe(element, opts);
}

Al চ্ছিক: ইভেন্ট শ্রোতার প্যাটার্ন

আমি ব্যবহার পছন্দ callback কারণ এটি বেশ সোজা। তবে আপনি যদি কোনও স্ট্যান্ডার্ড ইভেন্ট শ্রোতার প্যাটার্ন ব্যবহার করতে চান তবে আমরা এটিও করতে পারি। এখানে কৌশলটি একটি ইভেন্ট নির্গত করা। আমরা এটি কল করব resize-obs যেহেতু resize ইতিমধ্যে নেওয়া হয়।

function resizeObserver (element, options = {}) {
  // ...
  function observerFn (entries) {
    for (let entry of entries) {
      if (callback) callback({ entry, entries })
      else {
        node.dispatchEvent(
          new CustomEvent('resize-obs', {
            detail: { entry, entries },
          }),
        )
      }
    }
  }

  // ...
}

তারপরে আমরা শুনতে পারি resize-obs ইভেন্ট, এই মত:

const obs = resizeObserver(node)
node.addEventListener('resize-obs', event => {
  const { entry, entries } = event.detail
})

আবার, এটি al চ্ছিক।

উপাদানটি অবরুদ্ধ করা

একটি চূড়ান্ত পদক্ষেপ হ’ল যখন পর্যবেক্ষণের আর প্রয়োজন হয় না তখন ব্যবহারকারীকে উপাদান (গুলি) পর্যবেক্ষণ করা বন্ধ করার অনুমতি দেওয়া। এটি করার জন্য, আমরা দুটি ফিরিয়ে দিতে পারি observer পদ্ধতি:

• unobserve: একটি পর্যবেক্ষণ বন্ধ Element
• disconnect: সমস্ত পর্যবেক্ষণ বন্ধ Elements

function resizeObserver (node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnet()
    }
  }
}

উভয় পদ্ধতিই আমরা এখন পর্যন্ত যা তৈরি করেছি তার জন্য একই কাজ করে যেহেতু আমরা কেবল অনুমতি দিয়েছি resizeObserver একটি উপাদান পর্যবেক্ষণ। সুতরাং, উপাদানটি পর্যবেক্ষণ বন্ধ করতে আপনি যে কোনও পদ্ধতি পছন্দ করেন তা চয়ন করুন।

const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})

// Stops observing all elements 
obs.disconect()

এটির সাথে, আমরা এর জন্য আরও ভাল এপিআই তৈরির কাজ শেষ করেছি ResizeObserver – দ্য resizeObserver ফাংশন।

কোড স্নিপেট

আমরা যে কোডটি লিখেছি তা এখানে resizeObserver

export function resizeObserver(node, options = {}) {
  const observer = new ResizeObserver(observerFn)
  const { callback, ...opts } = options

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

  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnect()
    }
  }
}

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

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

import { resizeObserver } from '@splendidlabz/utils/dom'

const node = document.querySelector('.some-element')
const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

বোনাস: জাঁকজমকপূর্ণ ল্যাবজ resizeObserver একবারে একাধিক উপাদান পর্যবেক্ষণ করতে সক্ষম। এটি একবারে একাধিক উপাদানকেও আনবাইজ করতে পারে।

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) 

এই রিফ্যাক্টরিং সহায়ক?

রিফ্যাক্টরিং অতি দরকারী (এবং গুরুত্বপূর্ণ) কারণ এটি এমন একটি প্রক্রিয়া যা আমাদের এমন কোড তৈরি করতে দেয় যা ব্যবহার বা বজায় রাখা সহজ।

আপনি যদি এই রিফ্যাক্টরিং অনুশীলনকে দরকারী বলে মনে করেন তবে আপনি কেবল আমার পছন্দসই পছন্দ করতে পারেন যে আমি আমার মধ্যে উদীয়মান বিকাশকারীদের জাভাস্ক্রিপ্ট শিখিয়েছি জাভাস্ক্রিপ্ট শিখুন অবশ্যই।

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

এটাই!

আশা করি আপনি এই টুকরোটি উপভোগ করেছেন এবং পরেরটিতে আপনাকে দেখতে পাবেন।