همونطور که اطلاع دارید در جلسه قبل مقدماتی در مورد Module ها و کار با اونا بهتون توضیح دادیم. همچنین نحوه کار با ابزار Rollup برای Bundle کردن ماژول ها رو نیز بهتون آموزش دادیم. در این جلسه میخوایم موضوع ماژول ها رو ادامه بدیم و مثالهای عملی و کاربردی رو براتون بزنیم تا بصورت کامل با اونا آشنا بشید.
همونطور که اطلاع دارید در روش CommonJS که در Node.js استفاده میشه، فقط یکبار میتونین چیزایی که میخواید رو export کنید و اونا رو در فایلهای دیگه مورد استفاده قرار بدین. مثلا کد زیر رو در نظر بگیرید (در بالای هر کد یک کامنت بعد از // قرار میگیره و نام فایلی که کدها درونش قرار دارن رو میاریم):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // utility.js function generateRandom() { return Math.random(); } function sum(a, b) { return a + b; } module.exports = { generateRandom: generateRandom, sum: sum }; |
میبینید که در فایل utility.js دو تابع رو تعریف کردیم و در انتها با استفاده از module.exports این دو تابع رو درون یک شئ {} خروجی گرفتیم. حالا میتونیم از این تابع درون فایلهای دیگه از جمله app.js مورد استفاده قرار بدیم:
// app.js var utility = require('./utility'); console.log(utility.generateRandom()); console.log(utility.sum(2, 3)); |
همونطور که میبینید با استفاده از require ماژول utility رو import کردیم و درون متغیر utility قرار دادیم و در خطهای بعدی از متدهای اون استفاده کردیم.
روشهای مختلفی وجود داره که با استفاده از اون میتونین کدهای مورد نظرتون رو export یا import کنید. در ادامه این روشها رو بهتون توضیح میدیم.
اولین روش که خیلی شبیه به Common.js هست اینه که در انتها با استفاده از کلمه کلیدی export اون چیزایی که میخواید رو خروجی بگیرید. کد زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 8 9 10 11 | // utility.js function generateRandom() { return Math.random(); } function sum(a, b) { return a + b; } export { generateRandom, sum }; |
میبینید که دو تابع رو خروجی گرفتیم. حالا میتونیم درون فایلهای دیگه از جمله app.js اونا رو import کنیم. import کردن ماژولها در ES6 با CommonJS فرق داره و دیگه از require استفاده نمیشه. کد زیر رو ببینید:
// app.js import { generateRandom, sum } from './utility'; console.log(generateRandom()); console.log(sum(2, 3)); |
میبینید که همون اسم توابع رو درون {} قرار دادیم و با استفاده از from مشخص کردیم که میخوایم این موارد رو از کدام ماژول import کنیم. در خطوط بعدی نیز از این دو تابع import شده استفاده کردیم.
شما میتونین چه در هنگام import و چه در هنگام export یک نام جایگزین برای تابع یا متغیر و .... در نظر بگیرید.
فرض کنید میخوایم بجای نام generateRandom که طولانی هست، از نام R استفاده کنیم. برای اینکار از کلمه کلیدی as استفاده میشه. کد رو ببینید:
1 2 3 4 5 6 7 8 9 10 11 | // utility.js function generateRandom() { return Math.random(); } function sum(a, b) { return a + b; } export { generateRandom as R, sum }; |
خب حالا در فایل app.js نیز باید بجای generateRandom از R استفاده کنیم چون دیگه generateRandom رو نمیشناسه و اون رو بنام R میشناسه. کد بصورت زیر میشه:
// app.js import { R, sum } from './utility'; console.log(R()); console.log(sum(2, 3)); |
به همین سادگی. خروجی همانند گذشته خواهد بود.
در این حالت کدهای export رو بدون تغییر قرار میدیم:
1 2 3 4 5 6 7 8 9 10 11 | // utility.js function generateRandom() { return Math.random(); } function sum(a, b) { return a + b; } export { generateRandom, sum }; |
در عوض در فایل app.js و در import کردن، نام R رو برای generateRandom در نظر میگیریم:
// app.js import { generateRandom as R, sum } from './utility'; console.log(R()); console.log(sum(2, 3)); |
میبینید که نام اون رو به R تغییر دادیم و در 2 خط بعد از اون استفاده کردیم. اگر بجای R از generateRandom استفاده کنیم، با ارور زیر در Console برخورد میکنیم:
میبینید که میگه generateRandom تعریف نشده است. پس این نام به کلی به R تبدیل شده است. به همین راحتی.
همونطور که دیدید تا اینجای کار فقط با استفاده از یک دستور، مواردی که نیاز داشتیم رو export میکردیم. اما میتونیم در هر جای کد و هر چه که دلمون بخواد از export استفاده کنیم. مثلا بجای کد اولیه که دو تابع رو در یکجا استخراج کردیم، میتونستیم بصورت زیر نیز عمل کنیم:
// utility.js export function generateRandom() { return Math.random(); } export function sum(a, b) { return a + b; } |
میبینید که قبل از هر تابع یک export قرار دادیم. با اینکار این دو تابع خروجی گرفته میشن و میتونین همانند گذشته اونا رو در فایلهای دیگه import کنید. شما میتونین متغیرها، توابع، کلاسها و ... رو export کنید. تعدادی نمونه رو در نظر بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | export function func() { console.log('Sample function'); } export let num = 2; export class Sample { constructor(name) { this.name = name; } getName() { console.log(this.name); } } |
به همین راحتی.
تا اینجای کار همه موارد رو به یک صورت خروجی میگرفتیم و اونا رو درون {}، import میکردیم. ما میتونیم یکی از خروجی ها رو بصورت default یا پیش فرض export کنیم. کد زیر رو در نظر بگیرید:
// utility.js export function generateRandom() { return Math.random(); } export default function sum(a, b) { return a + b; } |
میبینید که تابع sum رو بصورت default خروجی گرفتیم. حالا تابع sum در زمان import کردن دیگه نیازی به {} ندارد. بصورت زیر:
// app.js import sum from './utility'; console.log(sum(2, 3)); |
شما میتونین هم زمان با import کردن خروجی پیش فرض، بقیه خروجی های عادی رو نیز درون {}، import کنید. بصورت زیر:
// app.js import sum, { generateRandom } from './utility'; console.log(generateRandom()); console.log(sum(2, 3)); |
به همین راحتی.
شما میتونین با استفاده از * همه چیز رو از ماژول مورد نظرتون رو به یکباره import کنید. در این حالت باید یک نام رو با استفاده از as برای اونا قرار بدین. کد زیر رو در نظر بگیرید:
// app.js import * as utility from './utility'; console.log(utility.generateRandom()); console.log(utility.sum(2, 3)); |
میبینید که نام utility رو برای همه اونا در نظر گرفتیم و با استفاده از عملگر . به متدهای اون دسترسی پیدا کردیم. به همین راحتی.
موفق و پیروز باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 258