The new JavaScript module system

Copyright belongs to the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Van Hongchun
Links: http://zhuanlan.zhihu.com/FrontendMagazine/19850058
Source: Know

The next generation of JavaScript brings us a modular system that is largely inspired by the node. JS module. The following explains how it works.

Create a module

We're going to develop a simple ASAP module that allows you to schedule some tasks to execute immediately, but asynchronously. In node. js, you can use Process.nexttick, but there are many different implementations in different browsers. We will create a module that can work in any environment.

To begin, we create a file for this module. Named as Asap.js. This module only provides a simple function, which is called the default export in JavaScript. You can export a default value from the module using export default.

var Asap;var isnode = typeof process!== "undefined" && {}.tostring.call (process) = = = "[Object process]"; if (is     Node) {asap = Process.nexttick;} else if (typeof setimmediate!== "undefined") {ASAP = setimmediate;} else { ASAP = setTimeout;} Export default ASAP;

Import Module

We can import the ASAP into another module using import syntax:

Import ASAP from "ASAP"; asap (function () {console.log ("Hello async world!");});

This syntax obtains the default function from the ASAP export and stores it in a variable called ASAP, and then we can call this function.

Named Export

Some modules need to export multiple exports so that their users can refer to them individually by name.

For example, jquery has a separate main export (jquery function), and some other named export (Ajax,getjson,animate, etc.). In node. js, the MKDIRP module has a separate default export, which can be used to create a directory recursively, and a named export called Sync, to do the same thing, just in an asynchronous way.

In our example, in addition to the default export, the ASAP module might provide a later function that executes a function after other network requests or UI work is complete.

Our module looks similar to the previous one, except for the addition of a new export declaration.

var Asap;var isnode = typeof process!== "undefined" && {}.tostring.call (process) = = = "[Object process]"; if (is Node) {asap = Process.nexttick;} else if (typeof setimmediate!== "undefined") {ASAP = setimmediate;} else {as AP = setTimeout;} Export Default Asap;export var later = Isnode? PROCESS.SETIMMEDIATE:ASAP;

Named Import

Now that we export the later, we can import it into another module.

Import {later} from "ASAP", later (function () {Console.log ("Running After other network events");

More interestingly, you can use the same import and import the default export and a few named export:

Import ASAP, {later} from "ASAP";

It's enough to have it!

Shortcut

Renaming a named Import

Sometimes when importing a named export, you want to give it a local name.

Import {unlink as RM} from "FS"; RM (filename, function (err) {/* Check errors */});

Import into a namespace

It may be more convenient to import all named export of a module into a separate local namespace.

Import * as FS from "FS"; Fs.unlink (filename, function (err) {/* Check errors */});

A short named export

You can arbitrarily declare (like VAR or function) a named export in JavaScript and add the export prefix.

Exports this function as "requestanimationframe" Export function Requestanimationframe () {//Cross-browser Requesta Nimationframe}//exports document.location as "location" export var location = document.location;

This is also valid for some new statements, such as class and let.

Exports this class as "file" Export class file () {/* implementation */}//exports "0.6.3" as "VERSION" Export Let V ersion = "0.6.3";

These names can also be accessed in the local scope of the module, so you can use them in other functions.

Named Export Group

You can export any of the local variables.

Export {Getjson, Postjson, animate};function Getjson () {//Implementation}function Postjson () {//Implementatio n}function Animate () {//implementation}

You can place the export declarations that you have grouped in any location in the file, and if you wish, you can import and export them at the top of your module.

Characteristics

JavaScript modules have a number of good features that can be used smoothly and seamlessly in important scenarios, including refactoring and tools.

• The JavaScript module supports late binding polling between the default export and named Export. can all work.

• JavaScript modules differentiate between the default export (and their prototype chain) and other named export to avoid collisions.

• The JavaScript module makes it easier to determine exactly what you are importing by simply using syntax. Added error messages, but it also makes it easier to create tools like Browserify and Jshint, and works stably without warning.

Log

This library will be more detailed, but this is what we have to do wholeheartedly.

The new JavaScript module system