تضمين جافا سكريبت بشكل فعال في تطبيق Phoenix

في إطار تطبيق Phoenix الخاص بك، تواجه تحدياً فيما يتعلق بتضمين جافا سكريبت (Javascript) على صفحات محددة دون الحاجة إلى تكرار الكود وانتهاك مبدأ عدم تكرار الشيء (DRY). حاليا، يتم وضع الجافا سكريبت داخل علامة script في ملف myapp/web/templates/post/form.html.eex. وعلى الرغم من إمكانية نقل الجافا سكريبت إلى web/static/js/app.js، إلا أنك لا ترغب في تضمين الجافا سكريبت على كل صفحة، بل فقط على صفحتين محددتين.

لحل هذه المشكلة بشكل أفضل وفعّال، يمكنك استخدام ميزة Phoenix “assigns” لتحديد متغير يحمل اسم يمثل صفحات تحتاج إلى تضمين الجافا سكريبت. في المقام الأول، يجب عليك إعداد متغير في الكنترولر الخاص بالصفحات التي تريد فيها تضمين الجافا سكريبت.

على سبيل المثال، إذا كنت تريد تضمين الجافا سكريبت على صفحتين تحملان عنواني “page1” و “page2″، يمكنك قام بتحديد متغير assigns في كنترولر هاتين الصفحتين كما يلي:

elixirCopy code
defmodule MyApp.PageController do
  use MyApp, :controller

  def show(conn, %{"id" => "page1"}) do
    assign(conn, :include_js, true)
  end

  def show(conn, %{"id" => "page2"}) do
    assign(conn, :include_js, true)
  end
end

ثم، في قالب الصفحة myapp/web/templates/post/form.html.eex، يمكنك استخدام هذا المتغير لتحديد متى يجب تضمين الجافا سكريبت:

htmlCopy code
<%= if @include_js do %>
  <script src="<%= static_path(@conn, "/js/app.js") %>">script>
<% end %>

باستخدام هذه الطريقة، سيتم تضمين الجافا سكريبت فقط على الصفحات التي تقوم بتعيين المتغير include_js في الكنترولر الخاص بها. وبهذا، تحقق من تضمين الجافا سكريبت على الصفحات المطلوبة دون الحاجة إلى تكرار الكود وبالتالي الامتثال لمبدأ عدم تكرار الشيء (DRY).

لتحقيق أقصى استفادة من هذا النهج، يُفضل أيضًا تنظيم ملفات الجافا سكريبت بشكل جيد داخل مجلد web/static/js لتحسين هيكلية المشروع. يمكنك إنشاء مجلد فرعي لتخزين ملفات الجافا سكريبت ذات الصلة بالصفحات المعنية. على سبيل المثال، إذا كنت قد قمت بتعيين متغير include_js لصفحتي “page1” و “page2″، يمكنك إنشاء مجلد web/static/js/pages ووضع ملف app.js داخله لتلك الصفحات المعنية.

الهدف هو تنظيم وتجميع الجافا سكريبت المتعلق بصفحة معينة في مكان محدد بدلاً من تضمين الجميع في ملف واحد، مما يجعل الصيانة أكثر سهولة ويحسن أداء التطبيق.

المفهوم الرئيسي هو أنه يمكنك تعيين المتغير include_js بناءً على الشروط التي تحددها، سواء كان ذلك استنادًا إلى المعلومات في طلب HTTP أو أي سياق آخر يتيح لك تحديد الصفحات التي تحتاج إلى تضمين الجافا سكريبت.