شروع به کار

از React یا Vue می‌آیید و هیچ‌چیز جور درنمی‌آید؟ اول

مدل ذهنی را بخوانید: پنج دقیقه دربارهٔ اینکه computed، watch، قلاب‌های چرخهٔ عمر و بارگذاریِ داده کجا رفته‌اند.این صفحه شما را از یک پوشهٔ خالی تا یک برنامهٔ واکنش‌گرای $mol در حال اجرا راهنمایی می‌کند. حدود پانزده دقیقه طول می‌کشد. هر قطعهٔ کد زیر کد واقعی و کارآمد است — آن را همان‌طور که هست کپی کنید.مؤلفه را با تایپ‌اسکریپت معمولی می‌نویسید. $mol قالب کوتاه‌تری هم برای توصیف مؤلفه‌ها دارد، view.tree، که در صفحهٔ بعد با آن آشنا می‌شوید. اینجا لازمش نداریم: مؤلفهٔ $mol در هر دو حالت یک کلاس معمولی است.

آنچه نیاز دارید

Node.js 18+ و git. کل فهرست همین است.شما هیچ CLI سراسری‌ای نصب نمی‌کنید و هیچ کد قالبی‌ای که بعداً مجبور به فهمیدنش باشید تولید نمی‌کنید. برنامه‌های $mol درون فضای کاری MAM زندگی می‌کنند، فضایی که همین حالا می‌داند چگونه آن‌ها را بسازد و سرو کند.

۱. فضای کاری را دریافت کنید

MAM ابزار ساخت و مخزن ماژول‌های $mol است. یک بار آن را کلون و نصب کنید.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start سرور توسعه را روی http://localhost:9080/ بالا می‌آورد. فایل‌های شما را می‌پاید و خودکار بازسازی می‌کند — بگذارید در ترمینال خودش در حال اجرا بماند.

۲. یک ماژول بسازید

برنامهٔ $mol فقط یک پوشه است. یک فضای نام (مالِ خودتان، مثلاً my) و یک نام (hello) انتخاب کنید.1mkdir -p my/helloیک قاعده که باید به خاطر بسپارید: زیرخط در نام مؤلفه جداکنندهٔ پوشه است. $my_hello در my/hello/ زندگی می‌کند و $my_hello_form در my/hello/form/ زندگی می‌کرد. نام پوشهٔ ماژول‌ها هرگز زیرخط ندارد.حالا دو فایل درون my/hello/ اضافه کنید.

index.html — نقطهٔ ورود

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>ویژگیِ mol_view_root="$my_hello" مؤلفهٔ شما را هنگام بارگذاری صفحه سوار می‌کند.

hello.view.ts — مؤلفه

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}ویرایش این صفحه در GitHubآیا این مفید بود؟بلهخیرقبلیمدل ذهنی بعدیاز تایپ‌اسکریپت به view.treeدر این صفحهآنچه نیاز دارید ۱. فضای کاری را دریافت کنید ۲. یک ماژول بسازید index.html — نقطهٔ ورود hello.view.ts — مؤلفه ۳. اجرایش کنید ۴. یک مقدار واکنش‌گرای دوم اضافه کنید ۵. ساخت را بررسی کنید شما یک برنامهٔ $mol ساختید