From 23b53fb820c2beb0d1899fc8b544a7f618b2235c Mon Sep 17 00:00:00 2001 From: emadPoursina Date: Mon, 5 Apr 2021 18:45:46 +0430 Subject: [PATCH 1/4] translate article.md --- 1-js/13-modules/01-modules-intro/article.md | 277 ++++++++++---------- 1 file changed, 140 insertions(+), 137 deletions(-) diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 9afe0fdaa..73c9b18e7 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -1,32 +1,32 @@ -# Modules, introduction +# ماژول ها، معرفی -As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose. +با بزرگ تر شدن پروژه، ما سعی می کنیم که آن را به فایل های متفاوتی به نام ماژول (modules) تقسیم بندی کنیم. یک ماژول می تواند شامل یک کلاس یا کتابخانه از توابع برای یک هدف خاص باشد. -For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need. +تا مدت ها، جاوااسکریپت سینتکسی برای نوشتن ماژول ها در سطح زبان نداشت. -But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand. +اما با گذر زمان اسکریپت ها بیشتر و بیشتر پیچیپده شدند،‌ در نتیجه برنامه نویسان روش های متفاوتی برای مرتب و ماژول بندی کردن کد خود و کتابخانه های خاص برای بارگذاری ماژول ها در زمان نیاز ابداع کردند. -To name some (for historical reasons): +این ها نمونه هایی از این کتابخانه ها است (این بخش صرفا جنبه تاریخی دارد): -- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](http://requirejs.org/). -- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server. -- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS. +- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- یکی از قدیمی ترین سیستم های ماژول بندی، که اولین بار توسط کتابخانه [require.js](http://requirejs.org/) پیاده سازی شد . +- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- سیستم ماژول بندی که برای سرورهای Node.js درست شد. +- [UMD](https://github.com/umdjs/umd) -- یک سیستم ماژول بندی که به عنوان یک سیستم جهانی شناخته شده و با هردو سیستم AMD و CommonJS همخوانی دارد. -Now all these slowly become a part of history, but we still can find them in old scripts. +همه این سیستم ها کم کم تبدیل به بخشی از تاریخ شدند اما هنوز هم می توان آن ها را در اسکریپت های قدیمی مشاهده کرد. -The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern JavaScript modules from now on. +سیستم ماژول بندی در سطح زبان در استاندار سال 2015 مشاهده شد، از آن موقع کم کم پیشرفت کرده و در حال حاضر توسط تمامی مرورگرهای اصلی و Nodejs پشتیبانی می شود. در نتیجه از اینجا به بعد ما درباره سیستم ماژول بندی مدرن در جاوااسکریپت صحبت می کنیم. -## What is a module? +## ماژول چیست؟ -A module is just a file. One script is one module. As simple as that. +ماژول در اصل یک فایل است. هر اسکریپت یک ماژول است. به همین سادگی. -Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one: +ماژول ها می توانند یکدیگر را لود کرده و به وسیله توابع خاصی مانند `export` و `import` بین هم تابع و کارایی رد و بدل کنند، به وسیله صدا زدن تابعی از یک ماژول در یک ماژول دیگر: -- `export` keyword labels variables and functions that should be accessible from outside the current module. -- `import` allows the import of functionality from other modules. +- `export` این کلید واژه متغیرها و توابعی را مشخص می کند که باید بیرون از این ماژول قابل دسترسی باشند. +- `import` به ما اجازه وارد کردن و استفاده از توانایی های دیگر ماژول ها را می دهد. -For instance, if we have a file `sayHi.js` exporting a function: +برای مثال، اگر ما یک فایل با نام `sayHi.js` داشته باشیم که یک تابع را صادر می کند: ```js // 📁 sayHi.js @@ -35,69 +35,69 @@ export function sayHi(user) { } ``` -...Then another file may import and use it: +...در این حالت یک فایل دیگر می تواند این ماژول را وارد کرده و از این تابع استفاده کند: ```js // 📁 main.js import {sayHi} from './sayHi.js'; -alert(sayHi); // function... +alert(sayHi); // تابع... sayHi('John'); // Hello, John! ``` -The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable. +تابع `import` ماژول را بر اساس مسیر `./sayHi.js` که بر مبنای فایل فعلی است، بارگذاری کرده، سپس تابع صادر شده `sayHi` را به متغیر مناسب اختصاص می دهد. -Let's run the example in-browser. +بگذارید تا این مثال را در مرورگر امتحان کنیم. -As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute ` ``` -### Module-level scope +### اسکوپ های سطح ماژول -Each module has its own top-level scope. In other words, top-level variables and functions from a module are not seen in other scripts. +هر ماژول اسکوپ سطح بالای خود را دارد. به عبارت دیگر، توابع و متغیر های سطح بالا در یک ماژول قابل دسترسی توسط اسکریپت های دیگر نیستند. -In the example below, two scripts are imported, and `hello.js` tries to use `user` variable declared in `user.js`, and fails: +در مثال پایین، دو اسکریپت وارد شده اند، و `hello.js` سعی در استفاده از متغیر `user` که در فایل `user.js` تعریف شده است، کرده و شکست خورده است. [codetabs src="scopes" height="140" current="index.html"] -Modules are expected to `export` what they want to be accessible from outside and `import` what they need. +در موقع کار با ماژول ها انتظار می رود که هر چیزی که قرار است از بیرون قابل دسترسی باشد `export` و هر چیزی که آن ها در اسکریپت خود نیاز دارند `import` شود. -So we should import `user.js` into `hello.js` and get the required functionality from it instead of relying on global variables. +در نتیجه ما باید `user.js` را در `hello.js` وارد کرده و قابلیت مورد نظر خود را از آن دریافت کنیم به جای اینکه به متغیرهای جهانی اطمینان کنیم. -This is the correct variant: +این نمونه درست این کد است: [codetabs src="scopes-working" height="140" current="hello.js"] -In the browser, independent top-level scope also exists for each ` @@ -108,15 +108,15 @@ In the browser, independent top-level scope also exists for each ` ``` -### In a module, "this" is undefined +### در یک ماژول، "this" undefined است -That's kind of a minor feature, but for completeness we should mention it. +این یک قابلیت جزئی است، اما برای کامل بودن آموزش به آن اشاره می کنیم. -In a module, top-level `this` is undefined. +در یک ماژول، ‍`this` سطح بالا undefined است. -Compare it to non-module scripts, where `this` is a global object: +مقایسه آن با اسکریپت های غیر ماژول، که در آن ها `this` آبجکت جهانی است: ```html run height=0 ``` -## Browser-specific features +## قابلیت های مخصوص محیط مرورگر -There are also several browser-specific differences of scripts with `type="module"` compared to regular ones. +اسکریپت ها از نوع ماژول نسبت به انواع معمولی آن تفاوت هایی مخصوص محیط مرورگر هم دارند. -You may want skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser. +اگر این اولین بار است که این آموزش را می خوانید، یا از جاوااسکریپت در مرورگر استفاده نمی کنید، می توانید این بخش را رد کنید. -### Module scripts are deferred +### اسکریپت های ماژولی به تعویق افتاده اند. (deferred) -Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts. +اسکریپت ها از نوع ماژول *همیشه* به تعویق افتاده اند، دقیقا مانند خصوصیت `defer` (در فصل [] (info:script-async-defer) توضیح داده شده است.)، برای هر دو نوع اکسترنال و اینلاین. -In other words: -- downloading external module scripts ` -Compare to regular script below: +در مقایسه با اسکریپت معمولی زیر: ``` -Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`. +توجه کنید که: اسکریپت دوم در حقیقت قبل از اولی اجرا می شود! در نتیجه ما ابتدا `undefined` و سپس `object` را می بینیم. -That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first. +این پدیده به این خاطر است که ماژول ها به تعویق افتاده هستند، در نتیجه ابتدا صبر می کند تا تمام سند بارگیری شود. اسکریپت های معمولی بالافاصله اجرا می شوند. در نتیجه ما خروجی آن را ابتدا مشاهده می کنیم. -When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. +وقتی که از ماژول ها استفاده می کنیم، باید به این نکته توجه کنیم که صفحات HTML همان طور که بارگیری می شوند، به کاربر نشان داده می شوند و ماژول های جاوااسکریپت بعد از آن اجرا می شوند، پس کاربر صفحه را قبل از اینکه برنامه جاوااسکریپت اجرا شود، می بیند. بعضی از قابلیت ها ممکن است که کار نکنند. ما باید از یک "مشخص کننده مقدار بارگیری شده" استفاده کنیم، یا مطمئن شویم که این پدیده باعث سردرگم شدن کاربر نمی شود. -### Async works on inline scripts +### Async در اسکریپت های اینلاین معتبر است. -For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. +در اسکریپت های غیر ماژولی، مشخصه `async` تنها در اسکریپت های اکسترنال کار می کنند. اسکریپت های غیر ترتیبی به محض آماده شدن، اجرا می شوند، بدون توجه به اسکریپت های دیگر یا کد های HTML. -For module scripts, it works on inline scripts as well. +برای اسکریپت های ماژولی، در حالت اینلاین هم معتبر است. -For example, the inline script below has `async`, so it doesn't wait for anything. +برای مثال،‌ اسکریپت اینلاین زیر `async` دارد، در نتیجه برای هیچ چیزی صبر نمی کند. -It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending. +اسکریپت، ایمپورت (fetche `./analytics.js`) را انجام می دهد و وقتی که آماده شد، اجرا می شود. حتی اگر سند HTML یا دیگر اسکریپت ها آماده نباشند. -That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners. +این رفتار برای قابلیت هایی که به هیچ چیز دیگری وابسته نیستند، خوب هست، مانند شمارنده ها، تبلیغات، event listener های در سطح سند. ```html - - + + ``` -2. External scripts that are fetched from another origin (e.g. another site) require [CORS](mdn:Web/HTTP/CORS) headers, as described in the chapter . In other words, if a module script is fetched from another origin, the remote server must supply a header `Access-Control-Allow-Origin` allowing the fetch. +2. اسکریپت های اکسترنالی که از یک منبع دیگر (مانند یک سایت دیگر) دریافت شده اند. به [CORS](mdn:Web/HTTP/CORS) header نیاز دارند، همانگونه که در فصل توضیح داده شد. به عبارت دیگر، اگر یک اسکریپت ماژولی از یک منبع دیگر دریافت شده باشد، سرور دیگر باید هدر `Access-Control-Allow-Origin` را ست کرده باشد تا دریافت امکان پذیر باشد. ```html - - + + ``` - That ensures better security by default. + این قابلیت به صورت پیش فرض باعث افزایش امنیت می شود. -### No "bare" modules allowed +### ماژول های "bare" غیر مجاز هستند. -In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`. +در مرورگر، `import` باید یک لینک رلتیو یا ابسولوت دریافت کند. ماژول هایی که هیچونه آدرسی یا مسیری ندارند را "bare" یا برهنه می نامیم. چنین ماژول هایی در ‍`import` مجاز نیستند. -For instance, this `import` is invalid: +برای مثال، `import` زیر مجاز نیست: ```js import {sayHi} from 'sayHi'; // Error, "bare" module -// the module must have a path, e.g. './sayHi.js' or wherever the module is +// ماژول باید یک مسیر داشته باشد، برای مثال ‍'./sayHi.js' یا هر ماژولی که هست. ``` -Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet. +بعضی محیط ها مانند Node.js یا ابزارهای bundle اجازه استفاده از ماژول های برهنه را می دهند، بدون هیچ مسیری ، به این دلیل که این محیط ها روش های دیگری برای پیدا کردن ماژول ها و هوک ها و تنظیم آن ها دارند. اما مرورگر ها در حال حاضر از ماژول های برهنه پشتیبانی نمی کنند. -### Compatibility, "nomodule" +### سازگاری، "nomodule" -Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the `nomodule` attribute: +مرورگرهای قدیمی منظور را از `type="module"` نمی فهمند. اسکریپت هایی از نوع ناشناخته نادیده گرفته می شوند. برای این موارد این امکان وجود دارد که یک حالت استثنا به وسیله `nomodule` تعریف کنید: ```html run ``` ## Build tools +## ابزار های ساخت و ساز -In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server. +در زندگی واقعی، ماژول های مرورگر به ندرت در حالت "خام" خود استفاده می شوند. معمولا، ما این اسکریپت ها را با ابزارهایی مانند [Webpack](https://webpack.js.org/) با هم استفاده می کنیم و در سرور نهایی اعمال می کنیم. -One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules. +یکی از مزایای استفاده از باندلرها -- اینها به ما کنترل بیشتر بر روی اینکه ماژول ها چگونه اجرا می شوند، می دهد، اجازه اجرا شدن ماژول های برهنه و بسیار کارهای دیگر، مانند ماژول های CSS/HTML. -Build tools do the following: +ابزارهای ساخت برای انجام کارهای زیر: -1. Take a "main" module, the one intended to be put in ` ``` -That said, native modules are also usable. So we won't be using Webpack here: you can configure it later. +با این حساب، ماژول ها بومی و نیتیو هم قابل استفاده هستند. در نتیجه ما از Webpack در اینجا استفاده نمی کنیم: شما می توانید آن را در آینده تنظیم کنید. -## Summary +## خلاصه -To summarize, the core concepts are: +برای خلاصه کردن، مفاهیم اصلی اینها هستند: -1. A module is a file. To make `import/export` work, browsers need ` ``` -### External scripts ### اسکریپت های اکسترنال اسکریپت های اکسترنال که از نوع module ‍‍`type="module"` هستند، دو خصوصیت متفاوت دارند: @@ -344,7 +343,6 @@ import {sayHi} from 'sayHi'; // Error, "bare" module ``` -## Build tools ## ابزار های ساخت و ساز در زندگی واقعی، ماژول های مرورگر به ندرت در حالت "خام" خود استفاده می شوند. معمولا، ما این اسکریپت ها را با ابزارهایی مانند [Webpack](https://webpack.js.org/) با هم استفاده می کنیم و در سرور نهایی اعمال می کنیم. @@ -390,4 +388,4 @@ import {sayHi} from 'sayHi'; // Error, "bare" module در زمان انتشار، برنامه نویسان معمولا از باندل هایی مانند [Webpack](https://webpack.js.org) برای جمع کردن ماژول ها در کنار هم و بالا بردن کارایی و چند دلیل دیگر استفاده می کنند. -در فصل بعد ما مثال های بیشتری از ماژول ها را می بینیم، و اینکه چگونه آن ها صادر/وارد می شوند. \ No newline at end of file +در فصل بعد ما مثال های بیشتری از ماژول ها را می بینیم، و اینکه چگونه آن ها صادر/وارد می شوند. From 68f54838ccaa990cdc17ce2509db92532d3606cf Mon Sep 17 00:00:00 2001 From: emadPoursina Date: Tue, 6 Apr 2021 16:27:29 +0430 Subject: [PATCH 3/4] fix a mistake --- 1-js/13-modules/01-modules-intro/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 82d01a30a..dc2d0dc08 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -380,7 +380,6 @@ import {sayHi} from 'sayHi'; // Error, "bare" module - برای بارگزاری اسکریپت های خارجی(external) از منابع دیگر (دامنه/پروتکل/پورت)، هدر های CORS نیاز هستند. - اسکریپت های مشابه external نادیده گرفته می شوند. 2. ماژول های اسکوپ سطح بالای خود را دارند و از طریق عبارات ‍`import/export` کارایی های خود را با دیگر اسکریپت های به اشتراک می گذارند. -3. Modules always `use strict`. 3. ماژول ها همیشه در حالت ‍`use strict` هستند. 4. کد ماژول ها تنها یک مرتبه اجرا می شوند. Exportها تنها یک مرتبه ساخته شده و سپس بین تمام importer ها به اشتراک گذاشته می شوند. From b6943b0fb1e95b64e55f741441509fdbc6c3a8d1 Mon Sep 17 00:00:00 2001 From: emadPoursina Date: Fri, 9 Apr 2021 14:04:53 +0430 Subject: [PATCH 4/4] fix some errors --- 1-js/13-modules/01-modules-intro/article.md | 52 ++++++++++----------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index dc2d0dc08..3f7fec24f 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -10,7 +10,7 @@ این ها نمونه هایی از این کتابخانه ها است (این بخش صرفا جنبه تاریخی دارد): - [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- یکی از قدیمی ترین سیستم های ماژول بندی، که اولین بار توسط کتابخانه [require.js](http://requirejs.org/) پیاده سازی شد . -- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- سیستم ماژول بندی که برای سرورهای Node.js درست شد. +- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- سیستم ماژول بندی که برای سرورها Node.js درست شد. - [UMD](https://github.com/umdjs/umd) -- یک سیستم ماژول بندی که به عنوان یک سیستم جهانی شناخته شده و با هردو سیستم AMD و CommonJS همخوانی دارد. همه این سیستم ها کم کم تبدیل به بخشی از تاریخ شدند اما هنوز هم می توان آن ها را در اسکریپت های قدیمی مشاهده کرد. @@ -24,9 +24,9 @@ ماژول ها می توانند یکدیگر را لود کرده و به وسیله توابع خاصی مانند `export` و `import` بین هم تابع و کارایی رد و بدل کنند، به وسیله صدا زدن تابعی از یک ماژول در یک ماژول دیگر: - `export` این کلید واژه متغیرها و توابعی را مشخص می کند که باید بیرون از این ماژول قابل دسترسی باشند. -- `import` به ما اجازه وارد کردن و استفاده از توانایی های دیگر ماژول ها را می دهد. +- `import` به ما اجازه ایمپورت کردن و استفاده از توانایی های دیگر ماژول ها را می دهد. -برای مثال، اگر ما یک فایل با نام `sayHi.js` داشته باشیم که یک تابع را صادر می کند: +برای مثال، اگر ما یک فایل با نام `sayHi.js` داشته باشیم که یک تابع را اکسپورت: ```js // 📁 sayHi.js @@ -35,7 +35,7 @@ export function sayHi(user) { } ``` -...در این حالت یک فایل دیگر می تواند این ماژول را وارد کرده و از این تابع استفاده کند: +...در این حالت یک فایل دیگر می تواند این ماژول را ایمپورت کرده و از این تابع استفاده کند: ```js // 📁 main.js @@ -45,7 +45,7 @@ alert(sayHi); // تابع... sayHi('John'); // Hello, John! ``` -تابع `import` ماژول را بر اساس مسیر `./sayHi.js` که بر مبنای فایل فعلی است، بارگذاری کرده، سپس تابع صادر شده `sayHi` را به متغیر مناسب اختصاص می دهد. +تابع `import` ماژول را بر اساس مسیر `./sayHi.js` که بر مبنای فایل فعلی است، بارگذاری کرده، سپس تابع اکسپورت شده `sayHi` را به متغیر مناسب اختصاص می دهد. بگذارید تا این مثال را در مرورگر امتحان کنیم. @@ -55,7 +55,7 @@ sayHi('John'); // Hello, John! [codetabs src="say" height="140" current="index.html"] -مرورگر به صورت خودکار ماژول وارد شده (و ماژول هایی که این ماژول به آن وابسته است) را دریافت و بررسی میکند، سپس اسکریپت را اجرا می کند. +مرورگر به صورت خودکار ماژول ایمپورت شده (و ماژول هایی که این ماژول به آن وابسته است) را دریافت و بررسی میکند، سپس اسکریپت را اجرا می کند. ```warn header="ماژول ها تنها در پروتکل HTTP(s) قابل استفاده اند، و در فایل های محلی نمی توان از آن ها استفاده کرد." اگر سعی کنید که یک صفحه وب را به صورت محلی، از طریق پروتکل `file://` باز کنید، توابع `import/export` کار نمی کنند. برای این کار از یک وب سرور لوکال استفاده کنید، مانند [static-server](https://www.npmjs.com/package/static-server#getting-started) یا از قابلیت "سرور زنده" ویرایشگر متن خود استفاده کنید، مانند VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) برای تست ماژول خود. @@ -77,17 +77,17 @@ sayHi('John'); // Hello, John! ``` -### اسکوپ های سطح ماژول +### محدوده/اسکوپ سطح ماژول هر ماژول اسکوپ سطح بالای خود را دارد. به عبارت دیگر، توابع و متغیر های سطح بالا در یک ماژول قابل دسترسی توسط اسکریپت های دیگر نیستند. -در مثال پایین، دو اسکریپت وارد شده اند، و `hello.js` سعی در استفاده از متغیر `user` که در فایل `user.js` تعریف شده است، کرده و شکست خورده است. +در مثال پایین، دو اسکریپت ایمپورت شده اند، و `hello.js` سعی در استفاده از متغیر `user` که در فایل `user.js` تعریف شده است، کرده و شکست خورده است. [codetabs src="scopes" height="140" current="index.html"] در موقع کار با ماژول ها انتظار می رود که هر چیزی که قرار است از بیرون قابل دسترسی باشد `export` و هر چیزی که آن ها در اسکریپت خود نیاز دارند `import` شود. -در نتیجه ما باید `user.js` را در `hello.js` وارد کرده و قابلیت مورد نظر خود را از آن دریافت کنیم به جای اینکه به متغیرهای جهانی اطمینان کنیم. +در نتیجه ما باید `user.js` را در `hello.js` ایمپورت کرده و قابلیت مورد نظر خود را از آن دریافت کنیم به جای اینکه به متغیرهای جهانی اطمینان کنیم. این نمونه درست این کد است: @@ -110,13 +110,13 @@ sayHi('John'); // Hello, John! اگر واقعا نیاز داریم که یک متغیر جهانی در سطح پنجره مرورگر ایجاد کنیم، نیاز است که به صورت جداگانه و اختصاصی آن متغیر را به `window` اختصاص دهیم و از طریق `window.user` به آن دسترسی پیدا کنیم. اما باید توجه کنیم که این یک استثنا است و برای انجام آن به دلیل موجهی نیاز است. -### کد یک ماژول تنها اولین بار که به اسکریپت ما وارد شده، ارزیابی می شود. +### کد یک ماژول تنها اولین بار که به اسکریپت ما ایمپورت شده، ارزیابی می شود. -اگر یک ماژول مشابه در چندین مکان مختلف وارد شود، کد آن تنها در مرتبه اول اجرا می شود، بعد از آن نتیجه به تمامی مکان های دیگر صادر می شود. +اگر یک ماژول مشابه در چندین مکان مختلف ایمپورت شود، کد آن تنها در مرتبه اول اجرا می شود، بعد از آن نتیجه به تمامی مکان های دیگر اکسپورت می شود. این رفتار عواقب مهمی دارد. بگذارید تا آن ها را در مثال بررسی کنیم: -اول از همه، اگر اجرای کد ما باعث افتادن یک سری اتفاقات شود، مانند نشان دادن یک پیغام ، در این صورت چندین بار وارد کردن کد تنها باعث یک بار اجرا شدن این پیغام می شود. ---- تنها بار اول. +اول از همه، اگر اجرای کد ما باعث افتادن یک سری اتفاقات شود، مانند نشان دادن یک پیغام ، در این صورت چندین بار ایمپورت کردن کد تنها باعث یک بار اجرا شدن این پیغام می شود. ---- تنها بار اول. ```js // 📁 alert.js @@ -124,7 +124,7 @@ alert("Module is evaluated!"); ``` ```js -// وارد کردن یک ماژول مشابه در دو فایل متفاوت +// ایمپورت کردن یک ماژول مشابه در دو فایل متفاوت // 📁 1.js import `./alert.js`; // ماژول ارزیابی و اجرا می شود. @@ -133,11 +133,11 @@ import `./alert.js`; // ماژول ارزیابی و اجرا می شود. import `./alert.js`; // (پیغامی نمایش داده نمی شود.) ``` -در عمل، ماژول های سطح بالا در اغلب موارد برای اختصاص دادن مقادیر مختلف، درست کردن ساختمان های داده داخلی، و زمانی که می خواهیم از چیزی چند مرتبه استفاده کنیم ---- آن را صادر می کنیم. +در عمل، ماژول های سطح بالا در اغلب موارد برای اختصاص دادن مقادیر مختلف، درست کردن ساختمان های داده داخلی، و زمانی که می خواهیم از چیزی چند مرتبه استفاده کنیم ---- آن را اکسپورت می کنیم. خب، حال با هم یک مثال پیشرفته تر را می بینیم. -فرض می کنیم که یک ماژول یک آبجکت را صادر می کند: +فرض می کنیم که یک ماژول یک آبجکت را اکسپورت می کند: ```js // 📁 admin.js @@ -146,9 +146,9 @@ export let admin = { }; ``` -اگر این ماژول چند مرتبه در چند فایل وارد شود، ماژول تنها در مرتبه اول ارزیابی می شود، این به این معناست که آبجکت `admin` یک بار درست شده، و سپس به جاهای دیگر وارد می شود. +اگر این ماژول چند مرتبه در چند فایل ایمپورت شود، ماژول تنها در مرتبه اول ارزیابی می شود، این به این معناست که آبجکت `admin` یک بار درست شده، و سپس به جاهای دیگر ایمپورت می شود. -همه مکانهایی که ماژول وارد شده است، دقیقا یک و تنها یک آبجکت `admin` دریافت می کنند. +همه مکانهایی که ماژول ایمپورت شده است، دقیقا یک و تنها یک آبجکت `admin` دریافت می کنند. ```js // 📁 1.js @@ -160,14 +160,14 @@ import {admin} from './admin.js'; alert(admin.name); // Pete *!* -// هر دو فایل ‍1.js و 2.js یک آبجکت مشابه را وارد می کنند. +// هر دو فایل ‍1.js و 2.js یک آبجکت مشابه را ایمپورت می کنند. // هر تغییری که در فایل 1.js ایجاد شود، در فایل 2.js نیز قابل مشاهده است. */!* ``` -پس بیایید دوباره امتحان کنیم -- ماژول تنها یک مرتبه اجرا می شود. خروجی ها و صادره ها تولید شده، بین وارد کنندها به اشتراک گذاشته می شوند، در نتیجه اگر چیزی آبجکت `admin` را تغییر دهد، بقیه ماژول ها هم متوجه این تغییر می شوند. +پس بیایید دوباره امتحان کنیم -- ماژول تنها یک مرتبه اجرا می شود. اکسپورت های تولید شده، بین ایمپورت کننده ها به اشتراک گذاشته می شوند، در نتیجه اگر چیزی آبجکت `admin` را تغییر دهد، بقیه ماژول ها هم متوجه این تغییر می شوند. -این رفتار به ما اجازه می دهد که در اولین وارد کردن ماژول را *تنظیم* کنیم. ما می توانیم یکبار مشخصات(properties) را تنظیم کرده و در وارده ها و ماژول های بعدی از آن استفاده کنیم. +این رفتار به ما اجازه می دهد که در اولین بار که ماژول را ایمپورت می کنیم، *تنظیم* هم کنیم. ما می توانیم یکبار مشخصات(properties) را تنظیم کرده و در ایمپورت ها و ماژول های بعدی از آن استفاده کنیم. برای مثال، ماژول `admin.js` ممکن است یک سری قابلیت ها به ما بدهد، اما از ما انتظار دارد که یک سری متغیر ها از بیرون آبجکت `admin` به آن پاس دهیم; @@ -199,7 +199,7 @@ alert(admin.name); // *!*Pete*/!* sayHi(); // Ready to serve, *!*Pete*/!*! ``` -### import.meta +### شئ import.meta آبجکت ‍`import.meta` دارای یک سری اطلاعات درباره ماژول فعلی است. @@ -211,7 +211,7 @@ sayHi(); // Ready to serve, *!*Pete*/!*! ``` -### در یک ماژول، "this" undefined است +### در یک ماژول، "this" تعریف نشده است این یک قابلیت جزئی است، اما برای کامل بودن آموزش به آن اشاره می کنیم. @@ -343,13 +343,13 @@ import {sayHi} from 'sayHi'; // Error, "bare" module ``` -## ابزار های ساخت و ساز +## ابزارهای ساخت در زندگی واقعی، ماژول های مرورگر به ندرت در حالت "خام" خود استفاده می شوند. معمولا، ما این اسکریپت ها را با ابزارهایی مانند [Webpack](https://webpack.js.org/) با هم استفاده می کنیم و در سرور نهایی اعمال می کنیم. یکی از مزایای استفاده از باندلرها -- اینها به ما کنترل بیشتر بر روی اینکه ماژول ها چگونه اجرا می شوند، می دهد، اجازه اجرا شدن ماژول های برهنه و بسیار کارهای دیگر، مانند ماژول های CSS/HTML. -ابزارهای ساخت برای انجام کارهای زیر: +ابزارهای ساخت کارهای زیر را انجام می دهند: 1. ماژول "اصلی"، همان ماژولی که قرار است توی `