پرش به محتویات

تعامل با جاوااسکریپت

تا به حال معماری Elm، نوع داده، دستور و اشتراک را دیده‌ایم. همچنین، Elm را روی سیستم نصب کرده‌ایم.

اما وقتی نیاز به کار با جاوااسکریپت دارید، چه اتفاقی می‌افتد؟ شاید یک Browser API وجود داشته باشد که هنوز بسته‌ معادل در Elm ندارد. شاید بخواهید یک ویجت جاوااسکریپت را درون برنامه خود جاسازی کنید. این فصل سه مکانیزم تعامل با جاوااسکریپت را معرفی می‌کند:

قبل از اینکه به این سه مکانیزم بپردازیم، باید بدانیم چگونه برنامه Elm را به جاوااسکریپت کامپایل کنیم!

یادداشت

اگر در حال ارزیابی Elm برای استفاده در محل کار هستید، توصیه می‌کنم اطمینان یابید که این سه مکانیزم قادر به پوشش تمام نیازهای شما باشند. می‌توانید با نگاهی به این نمونه‌ها یک مرور سریع از این فصل داشته باشید. لطفا اگر از چیزی اطمینان ندارید، در انجمن کاربری پرس و جو کنید و اگر بطور کامل اطمینان ندارید، توصیه می‌کنم بعدا به Elm برگردید.

کامپایل به JavaScript

با اجرای دستور elm make، بطور پیشفرض فایل HTML تولید می‌شود. بنابراین اگر بگویید:

elm make src/Main.elm

فایلی به نام index.html تولید می‌شود که می‌توانید آن را باز کرده و شروع به کار با آن کنید. اگر نیاز به تعامل با جاوااسکریپت داشتید، می‌توانید بجای آن، فایل جاوااسکریپت تولید کنید:

elm make src/Main.elm --output=main.js

با اجرای این دستور، یک فایل جاوااسکریپت تولید می‌شود که یک تابع ()Elm.Main.init را در دسترس قرار می‌دهد. بنابراین وقتی main.js را دارید، می‌توانید فایل HTML را مطابق با نیاز خود سفارشی‌سازی کنید.

قرارگیری در HTML

در ادامه، یک قالب حداقلی HTML برای نمایش فایل main.js در مرورگر وب آمده است:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <script src="main.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
  var app = Elm.Main.init({
    node: document.getElementById('app')
  });
  </script>
</body>
</html>

می‌خواهم توجه شما را به خطوط مهم این قالب جلب کنم:

  • قسمت <head> - یک خط برای بارگیری فایل کامپایل شده main.js داریم. این الزامی است! اگر یک ماژول به نام Main کامپایل کنید، یک تابع ()Elm.Main.init در جاوااسکریپت خواهید داشت. اگر یک ماژول به نام Home کامپایل کنید، یک تابع ()Elm.Home.init در جاوااسکریپت خواهید داشت.

  • قسمت <body> - باید دو کار در اینجا انجام دهیم. اول، یک <div> ایجاد می‌کنیم که می‌خواهیم برنامه Elm بر آن مسلط شود. شاید این درون یک برنامه بزرگ‌تر باشد که با چیزهای دیگر احاطه شده است؟ اشکالی ندارد! دوم، یک <script> داریم تا برنامه Elm را راه‌اندازی کنیم. در اینجا تابع ()Elm.Main.init را برای شروع برنامه فراخوانی می‌کنیم و node مورد نظر برای برنامه را پاس می‌دهیم.

اکنون که می‌دانیم چگونه برنامه Elm را در یک فایل HTML جاسازی کنیم، وقت آن است که به بررسی سه گزینه تعامل با جاوااسکریپت بپردازیم: پرچم، پورت و عنصر سفارشی!

یادداشت

این یک فایل عادی HTML است، بنابراین می‌توانید هر چیزی که می‌خواهید در آن قرار دهید! بسیاری از توسعه‌دهندگان فایل‌های CSS و JS اضافی را در <head> قرار می‌دهند. بنابراین، اشکالی ندارد که CSS را به‌صورت دستی بنویسید یا به نوعی آن را تولید کنید. چیزی مانند <link rel="stylesheet" href="whatever-you-want.css"> را در <head> قرار دهید و به آن دسترسی پیدا کنید. (گزینه‌های دیگری برای تعریف CSS درون Elm وجود دارد، اما خارج از بحث ماست!)