چهارشنبه, 22 آذر 1396

آموزش جاوااسکریپت

ماژول های جاوا اسکریپت، فرمت، لودر و بسته بندی

توسعه جاوا اسکریپت مدرن می تواند خسته کننده باشد. هنگامی که بر روی یک پروژه کار می کنید، ممکن است تعجب کنید که چرا این همه ابزار های متعدد مورد نیاز است. ابزارهایی مانند Webpack و SystemJS چه کاری می کنند؟ و یا AMD، UMD یا CommonJS چه چیزی هستند و چه مفهومی دارند؟ چگونه می توانیم آنها را به یکدیگر ربط دهیم. و کلا چرا به آنها نیاز دارید؟

این مقاله به شما خواهد آموخت که تفاوت بین ماژول های جاوا اسکریپت، فرمت ماژول، بارگذار ماژول (module loaders) و بسته بند ماژول (module bundlers) چیست؟ این متن یک راهنمای عمیق برای هیچکدام از ابزار های خاص و یا الگوها نیست، اما آغازگری برای درک سریع مفاهیم توسعه مدرن جاوا اسکریپت است.

بنابراین اجازه دهید شروع کنیم.

یک ماژول چیست؟

یک ماژول یک قطعه قابل استفاده مجدد از کد است که  جزئیات پیاده سازی را کپسوله سازی می کند و پس از آن به راحتی می تواند از طریق یک API عمومی بارگذاری شده و توسط کد های دیگر استفاده شود.

 چرا ما ماژول نیاز دارید؟

از لحاظ فنی ما می توانیم کدهایمان را بدون استفاده از ماژول بنویسیم. ماژول یک الگویی است که توسعه دهندگان بسیاری از اشکال مختلف و زبان های برنامه نویسی از دهه های 60 و 70 با استفاده نموده اند.

در جاوااسکریپت، یک ماژول ایده آل به ما اجازه می دهد:

انتزاع کد (abstract code):

برای واگذار کردن کار به کتابخانه تخصصی به طوری که ما مجبور به درک پیچیدگی پیاده سازی آن نباشیم.

محفظه سازی کد (encapsulate code):

برای مخفی کردن کد در داخل ماژول اگر ما نمی خواهیم کد تغییرکند.

استفاده مجدد از کد (reuse code):

برای جلوگیری از دوباره و دوباره نوشتن همان کد.

مدیریت وابستگیها (manage dependencies): 

راحتی تغییر وابستگی بدون بازنویسی کدها.

 الگوهای ماژول در ES5

در ECMAScript 5 و نسخه های پیش از آن مفهوم ماژول پیش بینی نشده است. با گذشت زمان، توسعه دهندگان با الگوهای مختلفی برای شبیه سازی طراحی مدولار در جاوا اسکریپت وارد شدند. برای اینکه به شما ایده بدهیم که این الگوها مثل چه چیزی هستند، اجازه بدهید که به دو مورد آسان نگاه سریعی داشته باشیم: «عبارت تابع مستقیما فراخوان شده» و «آشکارسازی ماژول».

عبارت تابع مستقیما فراخوان شده (Immediately Invoked Function Expression (IIFE))

(function(){ // ... })()

یک تابع مستقیما  فراخوان شونده (IIFE)، یک تابع بی نام است که مستقیما در هنگام اعلان فراخوان می شود. توجه کنید که چگونه تابع توسط پرانتز احاطه شده است.

در جاوا اسکریپت، یک خط شروع شونده با کلمه function به عنوان یک اعلان تابع در نظر گرفته می شود:

// Function declaration
function(){  
  console.log('webnegar');
}

فراخوانی مستقیم یک اعلان تابع خطایی را تولید می کند:

// Immediately Invoked Function Declaration
function(){  
  console.log('webnegar');
}()

// => Uncaught SyntaxError: Unexpected token )

 قرار دادن پرانتز در اطراف تابع آن به یک عبارت تابعی (function expression) تبدیل می کند:

// Function expression
(function(){
  console.log('webnegar');
})

// => returns function test(){ console.log('webnegar') }

 این عبارت تابعی را برمی گرداند، بنابراین می توانید بلافاصله آن را صدا بزنید:

// Immediately Invoked Function Expression
(function(){
  console.log('webnegar');
})()

// => writes 'webnegar' to the console and returns undefined

یک عبارت مستقیما فراخوان شونده مزایای زیر را برای ما ایجاد می کند:

  • پیچیدگی کد داخل IIFE کپسوله می شود، بنابراین برای ما لازم نیست که درک کنیم که کد IIFE چه کاری می کند.
  • تعریف متغیرها در داخل IIFE طوری است که آنها دامنه های سراسری را آلوده نمی کند (عبارات var در داخل IIFE در محدوده IIFE به صورت محدود شده باقی می ماند).

اما آنها یک مکانیزم برای مدیریت وابستگی ها ارائه نمی دهند.

الگوی آشکار سازی ماژول

الگوی آشکار سازی ماژول شبیه به یک IIFE است، اما ما مقدار بازگشتی را به یک متغیر اختصاص  می دهیم:

// Expose module as global variable
var singleton = function(){

  // Inner logic
  function sayHello(){
    console.log('Hello');
  }

  // Expose API
  return {
    sayHello: sayHello
  }
}()

توجه داشته باشید در اینجا لازم نیست که  احاطه پرانتز استفاده کنیم. چونکه واژه تابع در ابتدای خط نیست. هم اکنون می توانیم به  API ماژول از طریق متغیر دسترسی داشته باشیم:

// Access module functionality
singleton.sayHello();  
// => Hello

همچنین به جای یک singleton، یک ماژول می تواند یک تابع سازنده را افشا کند:

// Expose module as global variable
var Module = function(){

  // Inner logic
  function sayHello(){
    console.log('Hello');
  }

  // Expose API
  return {
    sayHello: sayHello
  }
}

توجه کنید که چگونه ما تابع را در زمان اعلام اجرا نمی کنیم. در عوض، ما یک نمونه از یک ماژول با استفاده از تابع ماژول سازنده را نمونه سازی می کنیم:

var module = new Module();  

 برای دسترسی به API های عمومی آن:

module.sayHello();  
// => Hello

الگوی آشکار کردن ماژول مزایای مشابه به عنوان یک IIFE را ارائه می دهد، اما دوباره هیچ مکانیزمی برای مدیریت وابستگی ارائه نمی دهد. به عنوان جاوا اسکریپت تکامل یافته، بسیاری از ترکیبات مختلف برای تعریف ماژول، هر کدام با منافع و جنبه های منفی خود اختراع شد. ما آنها را فرمت های ماژول می نامیم.

 

ادامه دارد...

http://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/

مطالب پربازدید

کانال تلگرام وب نگار

آدرس کانال تلگرام وب نگار

از آخرین آموزش ها و مقالات به سرعت با خبر شوید.

Newsletter

با عضویت در خبرنامه ما به روز باشید

مخزن گیت هاب آموزش آنگولار