Understanding Modular Development in JavaScript#

function func1(){
    //...
}

function func2(){
    //...
}

var nameModule={
    name:0,
    func1:function(){
        //...
    },
    func2:function(){
        //...
    }
}

var nameModule = (function() {
    var moduleName = "module";  // private

    function setModuleName(name) {
        moduleName = name;
    }

    function getModuleName() {
        return moduleName;
    }
    return { 
        setModuleName: setModuleName, 
        getModuleName: getModuleName
    }
})();

console.log(nameModule.getModuleName()); // module
nameModule.setModuleName("nameModule");
console.log(nameModule.getModuleName()); // nameModule

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

module.exports = {
    a: a,
    b: b
}

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
});

define(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
    return {};
});

/**
`define` and `require` are the same in dependency management and callback execution. The difference lies in that the callback function of `define` needs to have a `return` statement to return the module object (note that it is an object). This way, the module defined by `define` can be referenced by other modules; the callback function of `require` does not need a `return` statement and cannot be referenced by other modules.
*/

// The `<script>` tag in HTML also supports asynchronous loading
// <script src="require.js" defer async="true" ></script> <!-- The `async` attribute indicates that this file needs to be loaded asynchronously to prevent the webpage from becoming unresponsive. IE does not support this attribute, only `defer`, so it is also included here. -->


### CMD
`CMD` (Common Module Definition) is a standardized output of module definition promoted by `SeaJS` during the process of promotion. It is also a modular asynchronous solution on the browser side. The main differences between `CMD` and `AMD` are:
* For dependent modules, `AMD` is executed in advance (relative to the defined callback function, the `AMD` loader loads and calls all dependencies in advance before executing the callback function); `CMD` is executed with a delay (relative to the defined callback function, the `CMD` loader loads all dependencies, executes the callback function, and when it needs a dependent module, it calls the loaded dependency and returns to the callback function). However, starting from `RequireJS 2.0`, `RequireJS` has also been changed to support delayed execution.
* `AMD` uses dependency preloading (when defining a module, its dependent modules must be declared in advance), while `CMD` uses dependency proximity (dependencies are only loaded when a certain module is needed—loading on demand, returns as needed).


```javascript
define(function(require,exports,module){
  var a = require('require.js');
  a.doSomething();
  return {};
});

// Exporting single features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// Exporting a list
export { name1, name2, …, nameN };

// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };

// Exporting and renaming through deconstruction
export const { name1, name2: bar } = o;

// Default export
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Exporting a module set
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

// name‑the name of the export value that is received from the module being imported
// member, memberN‑multiple members of the export module to be imported by their specified names
// defaultMember‑default export members from the export module
// alias, aliasN‑aliases to rename specific imported members
// module-name‑the name of the module to import. It is a filename
// as‑the renaming of the imported member name ("identifier")
// from‑import from an existing module, script file, etc.
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name"; // Executes the global code from the module, but does not actually import any values.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

var c = 3;
var d = a + c;

var obj = { a,b,c }

export {a,b};

export {c,d};

export default obj;