JS and AMD module loading

Objective:

Learn about the AMD specification and CMD specification and write a prototype of the module loader.

Basic concepts:

AMD is an asynchronous module definition specification, while CMD is a generic module definition specification. There are other COMMONJS modules specifications.

For specific specifications, you can refer to:

Https://github.com/amdjs/amdjs-api/wiki/AMD AMD Specifications

https://github.com/seajs/seajs/issues/242 CMD specification

http://www.zhihu.com/question/20351507/answer/14859415 Yuber answers to AMD and CMD specifications

Either specification is designed to solve the problem of front-end module dependencies and loading.

Unlike the background language, JS does not block the blocking module/file loading, which is one of the important reasons why we need these modules to load and rely on management tools.

Requirements Analysis:

According to the specification, we need to implement the require and define two interfaces, the define interface is used to define the module (and load dependencies), the Require interface is used to load the module and callback.

We will implement a simplified interface:

Define    define (deps, definition): dependent arrays and module-defined functions    define (definition): module-defined Functions (module-independent) require    require (deps, Callback): dependent array and completion callback    require (ModuleID): Pass in module ID, get module instance (module needs to be loaded in advance via define or require)

Next we analyze the following tasks:

Code (module) Status: Not loaded, load-loading complete, waiting for dependency resolution-dependent completion, module load completion (first use, execute module definition Build module instance) Non-module code is not dependent, after loading directly to the completion state, And no module definition fails to generate the module instance module's Load timeline: Start loading, add load complete callback--load complete, execute define function, register module dependency and module definition, execute code Load completion callback (from here Get Code URL, or module ID), Parsing modules we need to analyze in several cases whether dependencies are met: When the code is loaded and the module is dependent on the condition that it is satisfied when the state is complete: all dependent module states are complete

　　

Define callback incoming dependency module//Compression problem

Function.tostring Dependency Analysis

Browserify, Webpack

ES6 module, do you observe blocking loading?

JS and AMD module loading