Skip to content

Commit 6dec3cc

Browse files
authored
Update article.md
Grammar suggestions
1 parent dcb9d87 commit 6dec3cc

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

1-js/13-modules/01-modules-intro/article.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ The `import` directive loads the module by path `./sayHi.js` relative the curren
4949

5050
Let's run the example in-browser.
5151

52-
As modules support special keywords and features, we must tell the browser that a script should be treated as module, by using the attribute `<script type="module">`.
52+
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 `<script type="module">`.
5353

5454
Like this:
5555

@@ -165,7 +165,7 @@ So, let's reiterate -- the module is executed only once. Exports are generated,
165165

166166
Such behavior allows to *configure* modules on first import. We can setup its properties once, and then in further imports it's ready.
167167

168-
For instance, `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside:
168+
For instance, the `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside:
169169

170170
```js
171171
// 📁 admin.js
@@ -236,7 +236,7 @@ You may want skip this section for now if you're reading for the first time, or
236236
Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts.
237237
238238
In other words:
239-
- downloading of external module scripts `<script type="module" src="...">` doesn't block HTML processing, they load in parallel with other resources.
239+
- downloading external module scripts `<script type="module" src="...">` doesn't block HTML processing, they load in parallel with other resources.
240240
- module scripts wait until the HTML document is fully ready (even if they are tiny and load faster than HTML), and then run.
241241
- relative order of scripts is maintained: scripts that go first in the document, execute first.
242242
@@ -264,21 +264,21 @@ Compare to regular script below:
264264
<button id="button">Button</button>
265265
```
266266
267-
Please note: the second script actually works before the first! So we'll see `undefined` first, and then `object`.
267+
Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`.
268268
269-
That's because modules are deferred, so we wait for the document to be processed. The regular scripts runs immediately, so we saw its output first.
269+
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.
270270
271271
When using modules, we should be aware that 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.
272272
273273
### Async works on inline scripts
274274
275275
For non-module scripts, `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document.
276276
277-
For module scripts, it works on any scripts.
277+
For module scripts, it works on any script.
278278
279279
For example, the script below has `async`, so it doesn't wait for anyone.
280280
281-
It performs the import (fetches `./analytics.js`) and runs when ready, even if HTML document is not finished yet, or if other scripts are still pending.
281+
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.
282282
283283
That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners.
284284
@@ -296,7 +296,7 @@ That's good for functionality that doesn't depend on anything, like counters, ad
296296
297297
External scripts that have `type="module"` are different in two aspects:
298298
299-
1. External scripts with same `src` run only once:
299+
1. External scripts with the same `src` run only once:
300300
```html
301301
<!-- the script my.js is fetched and executed only once -->
302302
<script type="module" src="my.js"></script>
@@ -322,11 +322,11 @@ import {sayHi} from 'sayHi'; // Error, "bare" module
322322
// the module must have a path, e.g. './sayHi.js' or wherever the module is
323323
```
324324
325-
Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.
325+
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.
326326
327327
### Compatibility, "nomodule"
328328
329-
Old browsers do not understand `type="module"`. Scripts of the unknown type are just ignored. For them, it's possible to provide a fallback using `nomodule` attribute:
329+
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:
330330
331331
```html run
332332
<script type="module">
@@ -350,7 +350,7 @@ Build tools do the following:
350350
1. Take a "main" module, the one intended to be put in `<script type="module">` in HTML.
351351
2. Analyze its dependencies: imports and then imports of imports etc.
352352
3. Build a single file with all modules (or multiple files, that's tunable), replacing native `import` calls with bundler functions, so that it works. "Special" module types like HTML/CSS modules are also supported.
353-
4. In the process, other transforms and optimizations may be applied:
353+
4. In the process, other transformations and optimizations may be applied:
354354
- Unreachable code removed.
355355
- Unused exports removed ("tree-shaking").
356356
- Development-specific statements like `console` and `debugger` removed.
@@ -379,7 +379,7 @@ To summarize, the core concepts are:
379379
3. Modules always `use strict`.
380380
4. Module code is executed only once. Exports are created once and shared between importers.
381381
382-
When we use modules, each module implements the functionality and exports it. Then we use `import` to directly import it where it's needed. Browser loads and evaluates the scripts automatically.
382+
When we use modules, each module implements the functionality and exports it. Then we use `import` to directly import it where it's needed. The browser loads and evaluates the scripts automatically.
383383
384384
In production, people often use bundlers such as [Webpack](https://webpack.js.org) to bundle modules together for performance and other reasons.
385385

0 commit comments

Comments
 (0)