قم بتحسين تطبيق Rails 7 الخاص بك من خلال تكامل Stimulus.js وJavaScript

Stimulus.js هو إطار عمل متواضع لجافا سكريبت يعمل على تعزيز HTML الخاص بك. إنه الرفيق المثالي لوظائف Rails المضمنة. في هذا المنشور، سنستكشف كيفية استخدام Stimulus.js لوظيفة JavaScript، ودمجها مع مكتبات JavaScript الأخرى، وإدارة تبعيات JavaScript بشكل فعال باستخدام Importmap.

المتطلبات الأساسية

قبل أن نبدأ، تأكد من حصولك على ما يلي:

• إعداد تطبيق Rails 7
• المعرفة الأساسية بجافا سكريبت وريلز

إعداد Stimulus.js في Rails 7

يأتي Rails 7 مع الدعم الافتراضي لـ Stimulus.js. للبدء، تأكد من تضمين Stimulus في تطبيقك عن طريق تشغيل:

rails new my_app
cd my_app

يمكنك العثور على وحدات تحكم التحفيز في التطبيق/جافا سكريبت/وحدات التحكم.

إنشاء وحدة تحكم التحفيز

لنقم بإنشاء وحدة تحكم التحفيز للتعامل مع حدث النقر البسيط. قم بتشغيل الأمر التالي:

rails generate stimulus hello

سيؤدي هذا إلى إنشاء وحدة تحكم جديدة hello_controller.js في التطبيق/javascript/controllers. افتح الملف وأضف الكود التالي:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

في HTML الخاص بك، استخدم وحدة تحكم التحفيز:

  

  Greet

عند النقر على الزر، سيتغير النص إلى "Hello, World!".

التكامل مع مكتبات جافا سكريبت الأخرى

يمكن أن يعمل Stimulus.js بسلاسة مع مكتبات JavaScript الأخرى. على سبيل المثال، لندمج jQuery مع Stimulus.js.

أولاً، قم بإضافة jQuery باستخدام Importmap:

أضف jQuery إلى ملف config/importmap.rb الخاص بك:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

ثم قم باستيراد jQuery في وحدة تحكم Stimulus الخاصة بك:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

إدارة تبعيات جافا سكريبت

تعد إدارة تبعيات JavaScript في Rails 7 أمرًا مباشرًا باستخدام Importmap. هنا بعض النصائح:

• إضافة مكتبة: استخدم الدبوس "library_name"، إلى: "library_url" في ملف config/importmap.rb الخاص بك لإضافة مكتبة جديدة.
• إزالة مكتبة: قم بإزالة السطر المقابل من config/importmap.rb لإزالة مكتبة موجودة.
• تحديث المكتبات: قم بتحديث عناوين URL في config/importmap.rb إلى أحدث الإصدارات.
• تحقق من المكتبات القديمة: قم بزيارة عناوين URL في config/importmap.rb لمعرفة ما إذا كانت الإصدارات الأحدث متوفرة.

يمكنك أيضًا إضافة ملفات JavaScript مخصصة إلى مشروعك. ضعها في مجلد التطبيق/جافا سكريبت واستوردها عند الحاجة.

خاتمة

يوفر Stimulus.js طريقة قوية وبسيطة لإضافة وظائف JavaScript إلى تطبيق Rails الخاص بك. ومن خلال دمجها مع مكتبات JavaScript الأخرى، يمكنك إنشاء تجربة مستخدم غنية وديناميكية. إن إدارة تبعيات جافا سكريبت الخاصة بك بشكل صحيح تضمن بقاء تطبيقك قابلاً للصيانة وحديثًا.

تعليمات سعيدة!