preface

Most of our current VUE projects use WebPack to build systems, and essentially webPack is a static module packaging tool for modern JavaScript applications, that is, it operates on the concept of JavaScript modularity.

In addition, today’s popular component libraries, thousands of demos, and the introduction and use of JavaScript function libraries (such as LoDash) are based on the concept of JavaScript modularity, so learning JavaScript modularity programming is important.

It’s not just JavaScript that has this concept, but in many ways the concept of structurally/functionally breaking a complete product/requirement into large modules, which in turn can be broken into smaller modules, which in turn can be broken into smaller modules… Follow the big and small, small and the idea of solving problems. The JavaScript Array and Object prototype native method also follows this philosophy.

Ahem, I digress. For example:

  • For components: for example, the popover in a front-end page has its own independent component + style + logic, which is completely independent module. At this time, we can use vUE framework to build such popover components based on webpack system, which is an embodiment of the concept of JavaScript modularization.
  • For the function: In addition we usenew Date()Method to create a stringThu Jul 15 2021 13:51:38 GMT+0800We want to convert it to our usual time formatThe 2021-07-15 13:51:38If more than one page (component) needs to do this, you can create a new JavaScript file in your project folder and use it where you need it.

If the written component/function is found to be acceptable to all developers, then put the component/function on the server and let others import it in

To implement these two requirements (and similar requirements), both require and import are usually introduced:

The require way

Three features

  • Run time loading
  • Copy to this page
  • All the introduction of

Three kinds of specifications

  • CommonJS specification
  • AMD specification
  • CMD specification

There are three specifications for the require mode, each of which specifies a different

CommonJS specification

CommonJS is an organization interested in building a JavaScript ecosystem. It has a mailing list and a lot of developers participate. The entire community is committed to making JavaScript programs portable and interchangeable, both on the server side and the browser side.

Node.js uses the CommonJS specification

Require ([module])
// Use the function without creating an instance
var math = require('math');
math.add(2.3);

// Use the function after the instance is created
var math = require('math');
const Math = new math(2.3)
Math.add();
Copy the code
Module. exports = XXX/exports.prop = XXX
/ / module. The way of exports
module.exports = class math {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
  add() {
    returnx+y; }};/ / way of exports
exports.add = (x,y) = > x+y;
Copy the code

Module. exports and exports are different from each other

AMD specification

See below for details on why AMD specifications are needed

AMD specification: the use of asynchronous mode load module, module load does not affect the following statement run. All statements that depend on this module are defined in a callback function that will not run until the load is complete

Require ([module], callback)

AMD also uses the require() statement to load modules, but unlike CommonJS, it requires two arguments:

require([module], callback);
Copy the code
  • The first argument, [module], is an array whose members areThe module to load;
  • The second argument, callback, isThe callback function after successfully loading.

If you rewrite the previous code to AMD form, it looks like this:

require(['math'].function (math) {
    math.add(2.3);
});
Copy the code

The add method is not executed until the Math module is loaded. Globally, this code does not block and the browser does not fake death. So clearly, AMD is a good fit for the browser environment

Define ((ID), (otherModule), Factory)

Parameter interpretation:

  • Id:The name of the module(Optional).String type
  • Othermodule: It’s usThe dependency module to load(Optional), use a relative path. Pay attention to isAn array type
  • Factory: Factory method that returns a module function

math.js

// No module name, no other module is used
define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});
// No module name, other modules are used
define(['a'.'b'].function(a,b){
    function foo(){
        a.doSomething();// Execute the dependency ahead of time
        b.doSomething();
    }
    return {
        foo : foo
    };
});
Copy the code

CMD specification

CMD is short for “Common Module Definition”. Similar to require.js, but sea-js relies on nearby, delayed execution, whereas require.js relies on front-loaded, pre-executed execution

Sea-.js is the CMD idea used

Seajs.config (); seajs.use( [module],function )
seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'}}); seajs.use(['./hello'.'jquery'].function(hello, $) {$('#beautiful-sea').click(hello.sayHello);
});
Copy the code
Define ((ID), (otherModule), Factory)
define(function(require.exports.module) {
  var$=require('jquery');

  exports.sayHello = function() {$('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // Rely on proximity and delay execution
});
Copy the code

The import way

Historical background

Prior to ES6, there were several module loading schemes developed by the community, the most important being CommonJS and AMD. The former is used for servers and the latter for browsers. ES6 in the language standard level, the realization of module function, and the implementation is quite simple, can completely replace CommonJS and AMD specifications, become a common browser and server module solution

ES6 implements module functions on the level of language standards. ES6 modules are not objects, but:

  • The output code is explicitly specified through the export command
  • Enter by using the import command

Three features

  • Compile time loading
  • Just refer to the definition
  • According to the need to load

Several ways to write import

1. import defaultName from './modules.js';
2. import { export } from 'modules';
3. import { export as ex1 } from 'modules';
4. import { export1, export2 } from 'modules.js';
5. import { export1 as ex1, export2 as ex2 } from 'moduls.js';
6. import defaultName, { expoprt } from 'modules';
7. import * as moduleName from 'modules.js';
8. importDefaultName, *as moduleName from 'modules';
9. import 'modules';
Copy the code

Import usage

  • Import fromSpecifies the location of the module file, can be a relative path or an absolute path, suffix.jsCan be omitted.
  • The as keyword used by the above code is equivalent to the alias of the ‘value’ imported.
  • import * from 'xx' 将 Import the contents of the entire moduleIn contrast, import defaultName and import {export1, export2} import an object or value of export
  • The final way to import ‘modules’ runs global code in the module without importing any values.

The import form requires export support. For example, import defaultName from ‘module.js exports the export default object or value in modules.js:

Several uses of export

1.export { name1, name2, …, nameN };
2.export { variable1 as name1, variable2 asName2,... , nameN };3.export letName1 name2,... , nameN;// also var
4.export letName1 =... , name2 =... ,... , nameN;// also var, const
5.export function FunctionName() {... }6.export class ClassName {... }7.export default expression;
8.export default function (...) {... }// also class, function*
9.export default function name1(...) {... }// also class, function*
10.export { name1 as default,... };11.export * from... ;12.export { name1, name2, …, nameN } from... ;13.export { import1 as name1, import2 asName2,... , nameN }from... ;Copy the code

Export export

  1. Named after the export
// module.js
const ex1 = 'xxx';
const fun = function() {... }export { ex1, fun as demoFun};
export let ex2 = 'demo';
export function multiply(x, y) {
  return x * y;
};
// main.js
import { ex1, demoFun, ex2, multiply } from 'module.js';
Copy the code
  1. The — export default command is exported by default

The export name must be the same as the import name. The export default command, on the other hand, specifies the default output for the module so that it can be named at will when importing. A module can only have one default output, that is, export default can only be used once for a module

// a.js prints a default function
export default function add(x, y) { return x + y; }
import anyName from 'a.js';
// b.js prints a default object
letobj = {... };export default obj;
import anyName from 'b.js'
// c.js prints a class
export default class { ...}
import anyClass from 'c.js';
// d.js prints a value
export default 1;
import value from 'd.js'
Copy the code
  1. Mixing export and import (module redirection)

That is, in a module, input and output of the same module. Such as:

<! -- Named export -->export { foo, bar } from 'my_module';
// Equivalent, it is worth noting that foo and bar cannot be used directly in this module.
import { foo, bar } from 'my_module';
export { foo, bar };

export * from  './other-module';  // Export all methods, but note that this method does not go to the default export variable in the export module.js.
// Export the default export is written as follows
export {default} from './other-module';
Copy the code

Additional problem solving

Module. exports and exports

Module. exports and exports refer to the same empty object {}. Compared with exports, I personally recommend module. Exports for the following reasons:

  • Differences in module export modes:
    • Exports: exportsAdd attributes or methods to the empty object
    exports.num = Awesome! // The exported object gets the num attribute with a dot operation
exports.func = function () {} // Export objects with dot operations using func functions
Copy the code
    • Module. exports: exportsDiscard the object, optionally assign data of other data types
    module.exports = { num : Awesome! } Num: 666} {num: 666}
module.exports = function () {} // The output is a function that the user needs to assign to a variable to use
Copy the code
  • Module exported as a function:
    • Exports: The module user needs to know the function name to import it
    • Module. exports mode: module userYou don't need to know the function nameIt can be introduced and used
    exports.func = function () {} // The module writer uses exports to define it
const { func } = require('./module'); // Module users must know the name of the function to use it

module.exports = function () {} // Module writers use module.exports to define
const fn = require('./module'); // Module users can define the name of the introduced function.
Copy the code

Here’s a quick introduction to Node.js

In 2009, American programmer Ryan Dahl created the Node.js project to use the Javascript language for server-side programming. This marks the official birth of “Javascript modular programming “. In contrast to the browser environment, the server side must have modules, because you have to interact with the operating system and other applications, otherwise you can’t program at all.

Therefore, node.js module system is implemented according to CommonJS specification

Why do YOU need an AMD specification

If the server module is used on the client (browser) module, follow the CommonJS specification:

var math = require('math');
math.add(2.3);
Copy the code

The execution of math.add(2, 3) requires the execution of require(‘math’), so looking at the code globally must wait until math.js loads. That is, if require(‘math’) is not finished executing, math.add(2, 3) will return an error. The whole code goes here and doesn’t go any further, and the browser is in suspended animation.

Therefore, browser-side modules cannot use “synchronous loading”, can only use “asynchronous loading”. That is, we want the rest of the code to have nothing to do with the loading of math.js, so that it doesn’t interfere with the rest of the code. This is the background from which the AMD specification was born.

Refer to the article

  • Module – Official documentation
  • Require and import
  • Javascript modular programming (I) : module writing
  • Javascript modular programming (II) : AMD specification
  • Module. exports and exports
  • What is CommonJS?
  • Summary of javascript usage of import and export