Modular Programming ES6
کدنویسی ماژولار یکی از فلسفه های برنامه نویسی شئ گرا است که می توان بخش های هر قسمت از یک برنامه را در یک سری ماژول تقسیم بندی کرد. این ماژول ها در ارتباط با هم می توانند یک روند را در برنامه ایجاد کنند. از سال ۲۰۱۵ به صورت رسمی native module به جاوا اسکریپت اضافه شد. تا پیش از آن نیز با استفاده از کتابخانه های جانبی این ساختار را استفاده می کردند.
Good Programmers Divide Programs into Modules
Module vs text/javascript
قابلیت Import /Export در Ecma Script 6 به جاوا اسکریپت اضافه شد. به جای این که کل Module ها را در یک برگه قرار بدهیم می توانیم یک سری فایل Module بسازیم و هر جا هر کدام لازم بود import کنیم.
این ماژول ها type برابر با module دارند . زمانی که در یک صفحه وب قرار می گیرند ساختار window (BOM) را تحت تاثیر قرار نمی دهند و Namespace اختصاصی خود را دارند. همچنین قابلیت ایجاد شده در همین ماژول قابل تزریق به سایر ماژول ها می باشند. سایر ماژول های موجود در این صفحه (که در همین صفحه وب موجود می باشد با type module) می توانند این قابلیت ماژول را در خود داشته باشند.
در تصویر بالا رنگ سبز در ناحیه اصلی مرورگر یعنی همان window (BOM) می باشد. کد های موجود در این این ناحیه قابلیت درون ریزی ماژول ها را ندارند . همچنین تعریف ساختمان داده های مختلف در این ناحیه در window قرار می گیرد . اصطلاحا این فایل در ناحیه global scope قرار دارد. پس در تصویر بالا ناحیه زرد رنگ و سبز رنگ global scope می باشند.
باکس های بنفش در تصویر بالا یک سری ماژول می باشند که Namespace یا ناحیه تعریف ساختمان داده اختصاصی خود را دارند (Custom Namespace) . در این روش ما می توانیم با سایر ماژول ها در ارتباط باشیم و ساختمان داده های خود را میان آن ها تزریق و دریافت کنیم. به طور مثال ماژول اول یک کلاس به ماژول دوم داده و این کلاس در ماژول دوم استفاده شده است و روند برنامه در ماژول دوم یک شئ ایجاد کرده است .
به صورت کامل در هر یک از فایل های text/javascript و module ما به صفحه وب دسترسی داریم چرا که در این صفحه این فایل ها قرار گرفته اند و شما می توانید در هر یک از ماژول ها صفحه وب را متاثر کنید:
//module 1 document.body.style.background = 'red'
مثلا کد بالا رنگ پس زمنیه body را قرمز می کند که این یک عملیات Dom Modification می باشد.
برای ارسال موجودیت به global scope از طریق ماژول ها می توان از متغیر window استفاده کرد. به طور مثال در یک ماژول ما یک تایمر درست کردیم و این تایمر را می خواهیم در global scope در دسترس داشته باشیم.
class Timer{
# timer body
}
window.timer = new Timer(minute,second)
Import / Export in Modules
هر یک از موجودیت های ساخته شده در هر یک از ماژول ها با این کلمات کلیدی و syntax خاص خود قابلیت تزریق به سایر ماژول ها را دارند.
نکته مهم : برای استفاده از ساختار import/export باید حتما در یک محیط سرور (Server Environment) استفاده کنیم. در غیر این صورت خطای CROSS POLICY در مرورگر خواهیم داشت.
ساختار فایل زیر را در نظر بگیرید:
├── app.js ├── index.html └── main.js
در index.html ماا دو ماژول app.js , main.js را درون ریزی می کنیم . به این ترتیب دو ماژول قرار گرفته در صفحه وب ما ساختار به ساختار این صفحه وب دسترسی دارند:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modules</title>
</head>
<body>
<h1>Node Modules</h1>
<script src="./app.js" type="module"></script>
<script src="./main.js" type="module"></script>
</body>
</html>
در ساختار فایل بالا app.js و main.js یک سری ماژول هستند. به این ترتیب ماژول app یک موجودیت را به main.js تزریق می کند. ساختار app.js به این شکل است:
export const name = 'Abolfazl' export const famil = 'sabagh'
پس از آن برای دریافت دو موجودیت نام و فامیل از app.js در main.js ما این ساختار را داریم.
نکته مهم : برای دریافت این موجودیت ها از آدرس دهی relative باید استفاده کنیم که با './' شروع می شود.
import { name } from './app.js'
import { famil } from './app.js'
console.log(name,famil)
Export declarations
تمامی ساختمان داده هایی که در جاوا اسکریپت تعریف می کنیم چه در زمان declare یا چه در زمان قالب یک متغیر قابلیت export دارند. در مثال های زیر در زمان تعریف (declarations) یک موجودیت از یک ساختمان داده آن را export کرده ایم :
export let name1, name2/*, … */; // All declaration keywords var,let,const
export const name1 = 1, name2 = 2/*, … */; // declaration keywords var,let,const
export function functionName() { /* … */ }
export class ClassName { /* … */ }
export const { name1, name2: bar } = o; //Destructuring object
export const [ name1, name2 ] = array; // Destructuring array
به صورت کلی برای تعریف متغیر دو حالت داشتیم یکی normal declaration , destructuring declaration(Bind) که هر کدام با همان syntax در زمان export نیز قابل استفاده می باشند.
برای export کردن متغیر ها می توان از ساختار Destructuring Binding assignment استفاده کرد . مثل دو مثال اخر . همچنین می توان مثل تعریف متغیر به صورت عادی با , آن ها از هم جدا کنیم حال با مقدار دهی و یا بدون مقدار دهی. به صورت کلی می توان گفت که همان ساختار variable declarations که در مثال های قبل داشتیم را در این ساختار نیز خواهیم داشت فقط باید ابتدای آن کلمه کلیدی export را قرار دهیم دو خط اول.
در ماژول هایی که قرار است موجودیت های بالا را دریافت کند به صورت ساده می توان با syntax زیر مقادیرشان را دریافت کرد:
improt { name1, name2/*, … */ } from './app.js'
import { functionName }
import { ClassName }
Export Default
یک ماژول می تواند یک متغیر را به صورت پیش فرض به سایر ماژول ها تزریق کند. در این حالت می توان در ماژول ثانویه ما می توانیم نام متغیر را فارغ از نام متغیر که در ماژول اول تعیین کردیم می تواند دریافت کند.
var age = 20
export default age
/*-----------------1-----------------*/
export default 20
/*-----------------2-----------------*/
export default function hello(){
console.log('hello')
}
/*-----------------3-----------------*/
var x = 10
var y = 15
function sum(x,y){
return x+y
}
export {sum as default,x,y}
در حالت شماره ۱ بالا ما یک متغیر را تعریف کردیم و سپس به صورت پیش فرض برای این ماژول در نظر گرفتیم. در مثال ۲ ما یک مقدار را مستقیم به صورت پیش فرض برای این ماژول ارسال کردیم . در مثال ۳ ما یک تابع را به صورت پیش فرض برای این ماژول در نظر گرفتیم. در مثال ۴ ما یک سری متغیر را به صورت لیست ارسال کردیم و همچنین یک تابع را هم همراه آن به صورت پیش فرض برای این ماژول در نظر گرفتیم . نحوه ارسال چندین مقدار که پیش تر تعریف شده اند در {} قرار می دهیم .
Export List
در این حالت ما یک سری موجودیت در ماژول تعریف کرده ایم و در آخر قرار است به صورت لیست یا پیش فرض (default , list) به سایر ماژول ها تزریق کنیم. در این حالت از لیست های Destructuring استفاده می کنیم . به این شکل که در {} قرار می دهیم:
/*-----------------1--------------------*/
var name='ali',famil='alavi'
export {name,famil}
/*-----------------2--------------------*/
var name='ali',famil='alavi'
export {name as firstName,famil as lastName}
/*-----------------3--------------------*/
var name='ali',famil='alavi'
var job='sfs'
export {job as default , name as firstName,famil as lastName}
در مثال بالا حالت ۱ دو متغیر تعریف و مقدار دهی کردیم و برای تزریق به سایر ماژول ها export کردیم .
در حالت ۲ ما در خلال export تغییر نام هم دادیم . یعنی در ماژول ثانویه که قرار است دریافت کنیم این ماژول ها را با نام جدید که پس از کلمه کلیدی as قرار گرفته است استفاده کنیم. به طور مثال در حالت import باید به این شکل عمل کنیم:
import {firstName,lastName} from './app.js'
در حالت ۳ ما برای دریافت مقدار job که به صورت پیش فرض است می توانیم با نام دلخواه اقدام کنیم و برای دریافت سایر موارد می توان از ساختار List استفاده کرد.
import freeJob , {firstName,lastName} from './app.js'
Aggregating modules
در این روش می توانیم کل موجودیت های ماژول را در یک خط در یک شئ export کنیم . همچنین می توان از آن طرف مقادیر مربوط را در یک فایل دیگر import کنیم.
var name='ali',famil='alavi'
exoprt {name,famil}
در فایل دیگر قرار است کل مقادیر این ماژول را در قالب یک شئ قرار بدهیم:
import * as app from 'app.js' let name = app.name let famil = app.famil
مطالب مشابه
Generator در جاوا اسکرپیت
ld-in object) که معمولا در بدنه آن ها یک مولد با چرخه بی نهایت وجود دارد و هر زمان که نیاز باشد با یک ارجاع پردازش این...
Webpack Module Bundler Part 2
وب پک یک نرم افزار است که در قالب یک کتابخانه و یک ابزار توسعه برای ساخت سایر نرم افزار ها در با استفاده از node...
Dom Document
مرورگر با استفاده از html , css , javascript محتوای مرورگر را نمایش می دهد. هر پنجره از مرورگر یک شئ window می باشد که...
Date Time in JavaScript
زمان یک میلی ثانیه از تاریخ در جریان است که مستقل از هر platform (این که روی چه سروری است و چه مرورگری در چه منطقه...
اشتراک گذاری :
مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.
دیدگاهتان را بنویسید