نام پروژه‌ی من AMD و فایل index.html بدان اضافه شده است. فرض کنید یک پوشه‌ی جدید را به نام modules به آن اضافه میکنیم و در آن دو فایل typescript ی را به نام‌های module1.ts و module2.ts، اضافه میکنیم.
محتویات module1 را اینگونه مینویسیم:
export module module1 {
export abstract class firstCls {
static f1(str: string) {
console.log(str);
}
}
} و همچنین module2 به شکل زیر خواهد بود:
import * as Amd from 'module1';
module module2 {
export class secondCls {
f2(str: string) {
Amd.module1.firstCls.f1(str);
}
}
}
new module2.secondCls().f2(`amd work's`); (دقت کنید بعد از کامپایل شدن لفظ import تبدیل به define میشود)
از طریق add - new item فایل tsconfig.json را به مسیر اصلی پروژه اضافه کنید. در صورتی که آن را پیدا نکردید، به صورت دستی فایل آن را ساخته و محتویات زیر را در آن کپی نمایید:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": false,
"target": "es6",
"module": "amd"
},
"exclude": [
"node_modules"
]
} در ادامه به root پروژه رفته و دستور npm init را ارسال کرده تا فایل package.json تولید شود. همچنین برای requirejs نیز دستور زیر را ارسال مینماییم:
npm install requirejs --save-dev
حال requirejs به پروژه‌ی شما اضافه شده است.
برای مدیریت کردن فراخوانی initial module در پوشه‌ی modules که قبلا ساخته بودیم فایل main.js راساخته و کد‌های زیر را بدان اضافه مینماییم.
(لازم به ذکر است این فایل را میتوانیم با استفاده از typescript نوشته و requirejs definitely typed را به پروژه اضافه کرده و از مزایای intellisense بودن بهره ببریم)
کد‌های زیر را درون main.js مینویسیم:
require(['modules/module2.js'], modules_module2());
function modules_module2() {
//additionals config goes here
} از آنجاییکه ممکن است تعداد وابستگی فایل‌ها زیاد باشد و ترتیب load شدن آنها نیز اهمیت داشته باشد، در این قسمت میتوان configهای بیشتری را همچون sequence در load کردن فایل‌ها، تعریف کرد که میتوانید در وبسایت رسمی requirejs آن را مطالعه بفرمایید.
حال فایل index.html را باز کرده و config برای فراخوانی requirejs, main.js را مینویسیم؛ به صورت زیر:
<h1>Hello requirejs and amd modules</h1> <!--src means require js address--> <!--data-main means initial require config--> <script src="node_modules/requirejs/require.js" data-main="modules/main.js"></script> <script></script>
پر واضح است که src آدرس فایل require.js و همچنین data-main آدرس initial require config پروژه را مشخص میکند.
اکنون پروژه را run کرده و می‌بینید که فایل‌های مورد نیاز به صورت async برای ما load میشوند. اگر از مرورگر کروم استفاده می‌نمایید، بدین صورت میتوانید network و همچنین console را مشاهد نمایید:
مشاهد میکنید که فایل‌های مورد نیاز load شده‌اند و همچنین amd work's در console نمایش داده شده است.
requirejs بدین صورت عمل میکند: بعد از یافتن هر فایل، با استفاده از regex کل فایل را بررسی کرده و به دنبال وابستگی‌های آن فایل میگردد (منظور همان importها میباشد و آن فایل به صورت async لود میشود) و در فایل‌های بعدی نیز همین روال ادامه خواهد یافت. هر چند راهکارهایی برای بهبود کارآیی در آن اندیشیده شده است؛ بدین صورت که اساس کارش با استفاده از singleton میباشد و بعد از require کردن فایلی، هر دفعه که فراخوانی میشود، نیاز به پردازش مجدد ندارد. با این وجود ممکن است در بعضی مواقع و مخصوصا با اشتباهات سهوی برنامه نویسان از کارآیی نرم افزار مطبوع شما بکاهد.
کد‌های این برنامه را میتوانید از اینجا دریافت نمایید (ضمن اینکه وابستگی‌های اضافه‌تری مانند پوشه‌ی node_modules حذف شده‌اند؛ بنابراین npm install فراموش نشود)
دانلود AMD.zip
در قسمت بعد به امکانات توکار کامپایلر typescript برای معماری ماژول‌ها میپردازیم
