Modular development

Introduction to ES6 module

  • AMD ----One of the oldest modular systems, originally developed by require.js Library implementation.
  • CommonJS ——Module system created for Node.js server.
  • UMD ——Another module system is recommended as a general module system, which is compatible with AMD and CommonJS.

What is a module?

A module is a file. A script is a module. It's that simple.

Modules can be loaded with each other, and special instructions export and import can be used to exchange functions. Functions of one module can be called from another module:

  • The export keyword marks variables and functions that can be accessed from outside the current module.
  • The import keyword allows you to import functions from other modules
// sayHi.js
export function sayHi(user) {
    return `hello,${user}`
}
<script type="module"> 
  			//	type="module" must be added
        import {sayHi} from './sayHi.js'; document.body.innerHTML = sayHi('Tom');//Output hello, Tom on the page
    </script>

The browser will automatically obtain and evaluate the imported module (and analyze the import of the module if necessary), and then run the script.

The module works only through HTTP(s), but not in local files

If you try to open a Web page locally through the file: / / protocol, you will find that the import/export instruction does not work. You can use a local Web server, such as static-server , or use the editor's "real time server" function, such as VS Code Live Server Extension To test the module.

Always use "use strict":

The module always uses use strict by default. For example, assigning a value to an undeclared variable will cause an error.

<script type="module">
  a = 5; // error
</script>

Module level scope

Each module has its own top-level scope. In other words, the top-level scoped variables and functions in a module are not visible in other scripts.

Import user.js into hello.js and get the required functions from it without relying on global variables.

	// hello.js
import {user} from './user.js';
document.body.innerHTML = user; // Tom
	// user.js
export let user = "Tom";
  <script type="module" src="hello.js"> </script>

In the browser, each < script type = "module" > also has an independent top-level scope

<script type="module">
  // Variables are only visible within this module script
  let user = "Tom";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

If we really need to create a window level global variable, we can explicitly assign it to window and access it as window.user. (not recommended)

The module child code is parsed only on the first pour

If the same module is imported to multiple other locations, its code will only be executed at the first import, and then the export content will be provided to all importer s.

//  alert.js
alert("Module is evaluated!");
// Import the same module in different files

// πŸ“ 1.js
import `./alert.js`; // Module is evaluated!

// πŸ“ 2.js
import `./alert.js`; // (nothing is displayed)

In actual development, the top-level module code is mainly used for initialization and the creation of internal data structure. If we want something to be reused, please export it.

Comprehensive application

//Suppose a module exports an object
// admin.js
export let admin = {
  name: "John"
};
// πŸ“ 1.js
import {admin} from './admin.js';
admin.name = "Pete";

// πŸ“ 2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// 1.js and 2.js import the same object
// Changes made to objects in 1.js are also visible in 2.js

The following admin.js module may provide specific functions, but you want the credential to enter the admin object from the outside:

//  admin.js
export let admin = { };

export function sayHi() {
  alert(`Ready to serve, ${admin.name}!`);
}

In init.js - the first script of our APP, we set admin.name. It can now be seen in every location, including calls inside admin.js.

// init.js
import {admin} from './admin.js';
admin.name = "Pete";

Another module can also see admin.name:

// πŸ“ other.js
import {admin, sayHi} from './admin.js';

alert(admin.name); // Pete

sayHi(); // Ready to serve, Pete!

import.meta

The import.meta object contains information about the current module.

Its content depends on its environment. In the browser environment, it contains the URL of the current script or, if it is in HTML, the URL of the current page.

<script type="module">
  alert(import.meta.url); // The URL of the script (for an embedded script, the URL of the current HTML page)
</script>

In a module, "this" is undefined

In a module, the top-level this is undefined.

Comparing it with a non module script, you will find that the top-level this of a non module script is a global object:

<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); // undefined
</script>

Tags: Javascript

Posted on Tue, 28 Sep 2021 16:22:30 -0400 by NoMansLand