Key points:

CommonJS imports exports as an object

  • Synchronous or asynchronous: Synchronous
  • Execution order, i.e. how to solve the problem of circular references? Just execute the output and skip it and never jump back
  • Value or reference copy? Copy the value
  • Require cache: Only the first require call, followed by the require call directly from the cache

ES module

  • Synchronous or Asynchronous: Asynchronous (browsers need to be asynchronous, otherwise they will all block)
  • Execution order: entry file organization dependency map, dependency map of each node stored is the reference address, circular reference will play a tag is being resolved, resolved to inform me I directly update, the implementation of the following to give him a signal
  • Value or reference copy? Reference copy
  • The cache

What is a module

Is a kind of external communication interface, code segmentation management mode

Why modularity

  1. Separation of concerns: decomposing complex problems into multiple sub-problems;
  2. Suitable for multi-person, large-scale software development: cohesion (variables, behavior cohesion in the module, external exposed interface access); Convenient reuse and management;

The history of

Function age → Namespaces → Utilizing closures → Modern modularity mechanism (CommonJS/ESM)

  • The namespace

Isolation is achieved by naming objects, which is cumbersome and space expensive

  • Use a closure

Question 1: Where in the memory structure is the stuff inside the closure?

Function inside put variable is on the stack, function performs the stack memory will be released, stack space is limited but can quickly absorb release, because it is the immediate execution of a function features, is also the most applications, has been executed – release – – release, so the variable in a function will certainly choose to store the stack.

Closures can always hold access to variables inside them, so where does the stuff inside a closure live in memory? Heap memory is always there before it can be accessed.

Escape analysis: What does a feature provided by the browser’s underlying engine (the browser helps me analyze which variables I still use and which I don’t) have to do with closures? The core of closures, implemented through browser underlying principles

  • CommonJS

CommonJS execution order: Synchronous execution, which executes the previously printed parts

Exports, when exposed, hang on an object and other people can take it through the object.

When require is introduced, require will have a cache, only execute once, and then cache the result, and then fetch it directly from the cache the next time it’s required

★ Question: How does commonJS solve the problem of circular reference in synchronous execution

To be clear: is commonJS a value copy or a reference copy? Copy the value

Circular reference: A imports the contents of B from module B, and B imports the contents of A from module B

The require a file in a has been skipped to b, so the const b on the front page actually takes the result in the cache and does not execute b.js again

If there’s no value, no execution when you jump it’s going to be an empty object

  • ESM

Is ESM value copy or reference copy? Asynchronous alternate execution, reference copy

For example, as above entry index requests modules A and B, where A and B import each other.

A will be tagged with a tag that is being parsed, and will not be skipped until the parsing is finished. Please inform me when parsing is finished, and I will directly update (publish and subscribe).

How to implement asynchrony? The import file organizes the dependency graph, and each node on the dependency graph stores the reference address. According to the graph, the whole parsing module is divided into three steps: execute first, and the other pending, and send a signal to him after the execution

Imports are also cached.

Supplementary knowledge

AMD and CMD

ESM cartoon figure

Each module has its own instance through three steps