External Libraries (jQuery, Lodash) ব্যবহারের পদ্ধতি

Riot.js এ external libraries যেমন jQuery এবং Lodash ব্যবহার করা সহজ। Riot.js নিজেই একটি ছোট এবং হালকা JavaScript লাইব্রেরি, তবে আপনি সহজেই অন্যান্য লাইব্রেরি যেমন jQuery এবং Lodash ব্যবহার করতে পারেন। এসব লাইব্রেরি আপনাকে DOM ম্যানিপুলেশন, ইউটিলিটি ফাংশন, ডেটা ম্যানিপুলেশন ইত্যাদি কাজ সহজে করতে সাহায্য করে।

1. jQuery ব্যবহার করা

যদিও Riot.js নিজেই DOM ম্যানিপুলেশন করে, আপনি যদি jQuery এর সাহায্যে DOM ম্যানিপুলেশন বা AJAX কল করতে চান, তবে এটি সহজেই ইনস্টল এবং ব্যবহার করা যেতে পারে।

Step 1: jQuery ইনস্টল করা

প্রথমে jQuery ইনস্টল করতে হবে। আপনি এটি npm অথবা CDN মাধ্যমে করতে পারেন:

npm দিয়ে jQuery ইনস্টল করা:

npm install jquery

CDN ব্যবহার:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 2: jQuery ব্যবহার করা

Riot.js কম্পোনেন্টে jQuery ব্যবহার করার জন্য, আপনাকে কম্পোনেন্টের স্ক্রিপ্ট অংশে jQuery ইমপোর্ট বা রেফারেন্স করতে হবে।

<!-- jQueryExample.riot -->
<jquery-example>
  <button id="btnClick">Click me</button>

  <script>
    import $ from 'jquery';

    export default {
      onMounted() {
        // jQuery এর মাধ্যমে DOM ম্যানিপুলেশন
        $('#btnClick').on('click', () => {
          alert('Button Clicked using jQuery!');
        });
      }
    }
  </script>
</jquery-example>

এখানে, onMounted মেথডে jQuery ব্যবহার করা হয়েছে যা বাটনে ক্লিক হলে একটি এলার্ট প্রদর্শন করবে। $('#btnClick') দ্বারা আপনি সহজেই DOM থেকে উপাদান সিলেক্ট করতে পারেন এবং .on('click') ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।

2. Lodash ব্যবহার করা

Lodash একটি জনপ্রিয় JavaScript লাইব্রেরি যা ডেটা ম্যানিপুলেশন, অ্যারে, অবজেক্ট, ফাংশন এবং স্ট্রিং সম্পর্কিত অনেক ধরনের ইউটিলিটি ফাংশন প্রদান করে। Lodash ব্যবহার করে আপনি কোডের অনেক অংশ সহজ এবং পরিষ্কার করতে পারেন।

Step 1: Lodash ইনস্টল করা

Lodash ইনস্টল করতে:

npm দিয়ে Lodash ইনস্টল করা:

npm install lodash

CDN ব্যবহার:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Step 2: Lodash ব্যবহার করা

Riot.js কম্পোনেন্টে Lodash ব্যবহার করার জন্য, আপনাকে Lodash ইমপোর্ট করতে হবে এবং তারপরে কম্পোনেন্টের মধ্যে ইউটিলিটি ফাংশনগুলি ব্যবহার করতে হবে।

<!-- LodashExample.riot -->
<lodash-example>
  <p id="output"></p>

  <script>
    import _ from 'lodash';

    export default {
      onMounted() {
        const numbers = [1, 2, 3, 4, 5];

        // Lodash এর সাহায্যে অ্যারে ম্যানিপুলেশন
        const doubledNumbers = _.map(numbers, (num) => num * 2);

        // রেন্ডারে ডাবল করা নম্বরগুলো দেখানো
        document.getElementById('output').textContent = doubledNumbers.join(', ');
      }
    }
  </script>
</lodash-example>

এখানে, _.map() ব্যবহার করে আমরা একটি অ্যারে (numbers) এর প্রতিটি আইটেমকে ২ দিয়ে গুণ করছি এবং সেই মানগুলো কম্পোনেন্টের মধ্যে রেন্ডার করছি।

3. jQuery এবং Lodash এর সাথে একসাথে ব্যবহার

আপনি একই কম্পোনেন্টে jQuery এবং Lodash একসাথে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি DOM ম্যানিপুলেশন করতে jQuery ব্যবহার করবেন এবং ডেটা ম্যানিপুলেশনের জন্য Lodash ব্যবহার করবেন।

<!-- CombinedExample.riot -->
<combined-example>
  <button id="addItem">Add Item</button>
  <ul id="itemList"></ul>

  <script>
    import $ from 'jquery';
    import _ from 'lodash';

    export default {
      onMounted() {
        // Initial items
        this.items = ['Apple', 'Banana', 'Orange'];

        // Display initial list
        this.updateList();

        // jQuery ইভেন্ট হ্যান্ডলার
        $('#addItem').on('click', () => {
          const newItem = _.sample(['Grapes', 'Mango', 'Peach']);  // Lodash এর _.sample() ব্যবহার
          this.items.push(newItem);
          this.updateList();
        });
      },

      updateList() {
        // Lodash এর _.uniq() ব্যবহার করে লিস্ট থেকে ডুপ্লিকেট আইটেম সরানো
        const uniqueItems = _.uniq(this.items);
        
        // jQuery এর মাধ্যমে DOM আপডেট করা
        $('#itemList').empty();
        _.forEach(uniqueItems, (item) => {
          $('#itemList').append(`<li>${item}</li>`);
        });
      }
    }
  </script>
</combined-example>

এখানে, আমরা jQuery দিয়ে #addItem বাটনের জন্য ক্লিক ইভেন্ট হ্যান্ডল করছি, এবং Lodash ব্যবহার করে একটি এলিমেন্টকে র্যান্ডমভাবে নির্বাচন (using _.sample()) এবং ডুপ্লিকেট আইটেমগুলি সরানো (using _.uniq()) করছি। এইভাবে, আপনি DOM ম্যানিপুলেশন এবং ডেটা ম্যানিপুলেশন এর জন্য দুটি লাইব্রেরি একসাথে ব্যবহার করতে পারেন।

সারাংশ:

• jQuery: DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিংয়ের জন্য একটি শক্তিশালী লাইব্রেরি। Riot.js-এর মধ্যে এটি ব্যবহার করা খুবই সহজ এবং DOM এর উপর কার্যকরভাবে কাজ করতে পারে।
• Lodash: ডেটা ম্যানিপুলেশন, অ্যারে এবং অবজেক্ট সম্পর্কিত ফাংশনালিটি সহজে প্রদান করে। এটি Riot.js কম্পোনেন্টে ডেটা প্রক্রিয়াকরণের জন্য খুবই উপযোগী।
• Riot.js: আপনি এই লাইব্রেরিগুলি Riot.js কম্পোনেন্টে ইমপোর্ট এবং ব্যবহার করতে পারেন, যাতে আপনি কোডের পুনঃব্যবহারযোগ্যতা এবং কার্যকারিতা বৃদ্ধি করতে পারেন।