El problema complejo en módulos relativamente independientes, este diseño puede reducir la complejidad de los procedimientos y aumentar la reutilización de código, sino que también favorece el desarrollo del trabajo en equipo y post-mantenimiento y expansión.

Desde ECMAScript2015el comienzo de la introducción del concepto de módulos, que llamamos: ECMAScript Module, denominado:ESM。

2. El núcleo modular

ámbito independiente - será efectivamente aislado de código, el código no se influyen mutuamente entre los módulos
Cómo exportar módulo de datos internos - el acceso de datos modular
Si un módulo externo para importar datos

3.ESM

Desde el ECMAScript2015/ECMAScript6inicio, JavaScriptel nativo introducido el concepto de módulos, y ahora los principales navegadores tienen muy buen soporte.

3.1 Alcance módulos independientes

Un archivo es el módulo, un ámbito independiente, y la exportación de módulos de forma automática en el 严格模式caso , a saber: 'use strict'.

Si el archivo se carga a través de un sistema modular, a continuación:

El archivo tendrá un ámbito separado;
El código predeterminado dentro del archivo se ejecuta en modo estricto a saber: 'use strict'a.

Modo estricto ( 'use strict'):

Las variables deben ser declaradas antes de su uso;
Ninguna variable de elevación (mecanismo de pre-resolución).

de datos interno del módulo 3.2 derivación

Use exportdeclaraciones exportar módulo de datos internos.

// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 默认导出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };

// 模块重定向导出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

módulo de datos externa 3.3 importación

La importación dividido en dos modos

importación estática
dinámica de importación

3.3.1 estático de importación

En el navegador importdeclaración sólo puede ser declarada type="module"mediante el script de la etiqueta .

Y las declaraciones de importación deberán ser escritos en el archivo JS la parte superior;

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

el modo de importación estática no soporta la carga diferida, importusted debe ser el principio de este módulo

document.onclick = function () {

    // import 必须放置在当前模块最开始加载
    // import m1 from './m1.js'

    // console.log(m1);

}

3.3.2ESM Importación y Exportación - Ejemplo:

Ruta del proyecto:

index.html: Observe el uso de la ESM modular, etiquetas de script deben ser atributo type = "módulo".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。 -->
    <script type="module" src="./js/main.js"></script>
</body>
</html>

main.js:

notas:

ruta del archivo debe terminar' js;
Al importar una lista de todos los nombres y nombres de variable debe exportar una sola vez, usted no quiere a once objetos usando un alias;
de importación predeterminado no puede añadir {} la exportación;
Cuando la exportación modular de redirección (que se exporta desde otro archivo de módulo o script), la representación del módulo de un archivo de script existente exportación ...


//导入m1模块
//1.导出单个特性:因为不是默认导出，所以需要声明变量接收,且文件必须有.js结尾
import {cssFunc1,cssFunc2,cssFunc3,M1Class} from './m1.js';

// 2.导入列表：:此处a,b,c必须和导出中的变量名一一对应
import {a,b,c} from './m1.js';

//3.重命名导出：导入导出的变量名需一一对象，想在导入时使用不同名字可使用别名， 变量名 as 别名
// import {name,pw} from './m1.js'
import {name as name1,pw as pw1} from './m1.js';

//4.默认导入：注意：default导入导出都不需要加{}
// import aa from './m1.js';
// import defaultFunc from "./m1.js"
// import defaultFunc2 from './m1.js';
import bb from './m1.js';

// 5.模块重定向导出
import * as obj from './m1.js'
import {v1,v2} from './m1.js';
import {value1,value2} from './m1.js';
import {default as defaultV} from './m1.js';


// 1.导出单个特性
let a1 = 10;
let m1Class = new M1Class();
m1Class.m1ClassFunc();

console.log("main.js",a1,cssFunc1,cssFunc2,cssFunc3);

//2.导入列表
console.log(a,b,c);//1 2 3

//3.重命名导出
// console.log(name,pw);//张三 1234
console.log(name1,pw1);//张三 1234

//4.默认导入
// defaultFunc();
// defaultFunc2();
// console.log(aa);
// console.log(bb);

//5.模块重定向导出
console.log(obj);//Module {…}
console.log(v1,v2);//2 3
console.log(value1,value2);//2 3
console.log(defaultV);//ƒ m2Func(){ console.log(v1+v2); }

m1.js:

console.log("m1模块...");

function css1(){
    console.log("m1模块下的css1方法");
}


//1.导出单个特性
export let cssFunc1 = css1;

export let cssFunc2 = function css2(){
    console.log("m1模块下的css2方法");
}

export function cssFunc3(){
    console.log("m1模块下的cssFunc3方法");
}

export class M1Class{
    constructor(){

    }
    m1ClassFunc(){
        console.log("m1模块下的m1ClassFunc");
    }
}

//2.导出列表
let a = 1,b=2,c=3;
export {a,b,c};

//3.重命名导出
let username = "张三";
let password = "1234";
export {username as name,password as pw};

//4.默认导出
let aa = 1;

// export default aa;
// export default function() { 
//     let defaultVal = 33;
//     console.log("defaultVal:"+defaultVal);
    
//  }
// export default function defaultFunc2() {
//     console.log("defaultFunc2方法");
// }
let bb = 2,cc = 3;
//不能同时导出多个。如export { bb as default,cc as default};
// export { bb as default};

// 5.模块重定向导出: from－从已经存在的模块、脚本文件…导出
export * from './m2.js';
export {v1,v2} from './m2.js';
export { v1 as value1, v2 as value2 } from './m2.js';
export { default } from './m2.js';

m2.js:

let v1=2,v2=3;
export {v1,v2};
export default function m2Func(){
    console.log(v1+v2);
}

resultados:

3.3.3 Dinámica introdujo la importación ()

Además, hay una función similar dinámico import(), que no dependa de type="module"la etiqueta script.
Palabras clave importpueden ser como llamar a una función de importación dinámica de módulos. En este llamado modo, se devolverá una promise.
Uso asíncrono de carga de retardo await es asíncrona, para utilizar el método predeterminado (), derivado como una función de exportación debe tiempo

Método 1: Método del objeto promesa entonces

import('./m.js')
  .then(m => {
    //...
});
// 也支持 await
let m = await import('./m.js');

Por un import()método de introducción de datos de retorno será empaquetado en un objeto, incluso si el defaultverdadero

Ejemplo: La importación () se deriva de un objeto Promise.

M3.js carga el archivo no está en la carga de la página inicial, pero la carga cuando se hace clic.

m3.js:

let obj = {
    a:1,
    b:2
}

export default obj;

main.js: Si se importa a través de la declaración de importación

//6.动态导入：通过import()方法导入，返回一个promise对象进行异步延迟加载
document.onclick = function(){
    //直接通过import导入会报错
    // import obj from 'm3.js';
    // console.log(obj);
    import('./m3.js').then(obj=>{
        console.log(obj);
        
    });
}

resultados:

Segunda manera: el uso asíncrono carga de retardo Await

Uso asíncrono de carga de retardo await es asíncrona, para utilizar el método predeterminado (), derivado como una función de exportación debe tiempo

m3.js:

function css(){
    console.log("css");
}

export default css;

main.js:

//使用async  await进行异步延迟加载
document.onclick = async function(){
    let m1 = await import('./m3.js');
    console.log(m1);
    m1.default();
}

resultados:

4. modular compatible con versiones anteriores

CommonJS
AMD
UMD
ESM

Si es el tipo de especificaciones modulares, centrándose en:

Ámbito módulo independiente
módulo de datos internos de exportación
módulo de importación de datos externos

5.CommonJS

En el front-end temprano para modular y no existe un estándar, pero está sesgada hacia el servidor de aplicaciones tiene una demanda más fuerte, especificación CommonJS es un conjunto de sesgo del lado del servidor modular estandarizado, NodeJS sobre el uso de esta especificación .

NodeJS y distal JS es la misma raíz, el analizador V8 NodeJS, el idioma más ECMAscript subyacente, sobre la base de esta NodeJS extender un archivo, tales como sistemas operativos, redes, discos duros medios que no sean el navegador que operan.

CommonJS backend especificación modular, realizada operando el sistema de archivos, el sistema de archivos no puede funcionar, pero la parte delantera, el usuario no puede utilizar la especificación CommonJS.

5.1 Objeto módulos independientes

Un archivo es el módulo, un ámbito independiente.

método de carga CommonJS es el uso de documentos modulares mixtos síncronos. Sólo después de la carga modular éxito continuará por la aplicación.

5.2 módulo de exportación de datos internos

Por module.exportso exportsmódulo de objetos de datos interna derivadas.

Nota: module.exportso exports dos métodos no se pueden utilizar simultáneamente.

// a.js
let a = 1;
let b = 2;

module.exports = {
  x: a,
  y: b
}
// or
exports.x = a;
exports.y = b;

módulo de datos externo 5.3 importación

Por requirela introducción de datos de la función módulo externo

// b.js
let a = require('./a');
a.x;
a.y;

Especificación utiliza ejemplos 5.4CommonJS

Por medio nodejs, utilizando main.js nodemon comienzan main.js.

m1.js:

let a = 1, b =2;
// module.exports = {
//     x:a,
//     y:b
// }

exports.l = a;
exports.m = b;

main.js:

let obj = require('./m1');
// console.log(obj);//{ x: 1, y: 2 }
console.log(obj);//{ l: 1, m: 2 }

6.AMD

Dado que algunas funciones de especificación CommonJS (basado en el sistema de archivos, se carga la sincronización), no se aplica al navegador, por lo que las especificaciones definidas aún se aplican al navegador

AMD(Asynchronous Module Definition)。AMD没有办法获取本地文件，因此使用异步文件加载方式实现模块化加载。

https://github.com/amdjs/amdjs-api/wiki/AMD

El navegador y no existe un código específico que implementa la especificación, que pueden ser resueltos por algunas bibliotecas de terceros. Como RequireJS.

7.AMD - RequireJS

sitio web oficial: https://requirejs.org/

Debe especificarse por la entrada de archivo en la página de datos principal;

// 1.html
<script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

7.1 Alcance módulos independientes

Por un definemétodo para definir un bloque, y mediante la generación de un segundo parámetros de alcance de devolución de llamada independientes para este método

// scripts/Cart.js
define(function() {
  // 模块内部代码
})

de datos interno del módulo 7.2 derivación

Exportar módulo de dos maneras:

Ida y vuelta;
exportación de estilo Uso CommonJS

Por returnderivar módulo de los datos internos: el método se puede derivar, un objeto otras cosas;

// scripts/Cart.js
define(function() {
  return class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
})

módulo de datos externa 7.3 importación

datos de lista de importación a través del módulo externo frontal dependiente

// scripts/main.js
// 定义一个模块，并导入 ./Cart 模块
define(['./Cart'], function(Cart) {
  let cart = new Cart()
  cart.add({name: 'iphoneXX', price: 1000000})
})

7.4AMD - RequireJS utiliza ejemplos

Debe estar en la página especificada por los datos del archivo de entrada principal ;
Cuando la entrada especifica el archivo con los datos-principales, crea dinámicamente una etiqueta de script, el archivo a través de AJAX manera (solicitud de red Método) para cargar el archivo JS para carga (main.js), porque la página se debe ejecutar en un entorno de servidor ;
Por definela definición de un enfoque modular, y el código de módulo de aislamiento;
módulo de exportación: Modo 1: Por re- returnderivar el módulo de datos internos, en segundo lugar forma: el estilo CommonJS deriva;

index.html:

Debe especificar el archivo de datos principal-entrada

<body>
    <script data-main="js/main.js" src="js/require.js"></script>
</body>
</html>

require.js:

Como las cargas sitio web oficial lentamente, después de la ejecución, la JS y luego copiar la siguiente dirección en la página web de abajo, la generación de archivos require.js en el directorio especificado

https://cdn.bootcss.com/require.js/2.3.6/require.min.js

main.js:

Cuando el archivo de importación, el archivo debe ser utilizado en los corchetes [] para la aplicación

//导入模块化文件时，通过方法的参数获取到模块中导出的数据
//注意导入时，文件名需要使用中括号
define(['./m1'],function(Cart){
    let cart = new Cart()
        return cart.add({name: 'iphoneXX', price: 1000000})
    }
);

m1.js:

Exportar datos modular por medio de retorno

define(function () {
    return class Cart {
        add(item) {
            console.log("m1模块");
            console.log(`添加商品：${item}`, item)
        }
    };
});

resultados:

8.requireJS estilo de CommonJS

require.jsTambién es compatible con CommonJSla sintaxis de estilo

de datos interno del módulo 8.1 derivación

// scripts/Cart.js
define(['require', 'exports', 'module'], function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 忽略不需要的依赖导入
define(['exports'], function(exports) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
define(function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})

módulo de datos externa 8.2 importación

//CommonJS风格导入导出模块化数据
define(function(require) {
    //注意如果导出的是类，则需要将对象中的类解构出来才能用
    let {Cart} = require('./m2');
    let cart = new Cart();
    
    cart.add({name: 'iphoneXX', price: 1000000})
  })

ejemplo de estilo de CommonJS 8.3requireJS

m2.js:

// define(['require', 'exports', 'module'], function(require, exports, module) {
//     class Cart {
//       add(item) {
//             console.log("m2模块");
//             console.log(`添加商品：${item}`, item)
//       }
//     }
//     exports.Cart = Cart;
//   })

// // 忽略不需要的依赖导入
// define(['exports'], function(exports) {
//     class Cart {
//       add(item) {
//         console.log(`添加商品：${item}`,item)
//       }
//     }
//     exports.Cart = Cart;
//   })

  // 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
  define(function(require, exports, module) {
    class Cart {
      add(item) {
        console.log(`添加商品：${item}`,item)
      }
    }
    exports.Cart = Cart;
  })

main.js:

//CommonJS风格导入导出模块化数据
define(function(require) {
    //注意如果导出的是类，则需要将对象中的类解构出来才能用
    let {Cart} = require('./m2');
    let cart = new Cart();
    
    cart.add({name: 'iphoneXX', price: 1000000})
  })

9.UMD

Estrictamente hablando, UMDno pertenece a una especificación del módulo, que se utiliza principalmente para el proceso CommonJS, AMD, CMDlas diferencias en la compatibilidad, código del módulo es capaz de funcionar adecuadamente en la parte delantera del módulo, bajo diferentes ambientes

Si el módulo determina un objeto de destino, y el tipo de exportación obejct se deriva en el entorno nodejs;
y una función para definir define.amd es cierto, entonces el siguiente uso AMD;
Después de que el juez va a realizar la función de exportación en el auto de ejecución;
AMD será capaz de realizar modular exportado en el navegador a través del juicio, y el siguiente y luego ser capaz de utilizar el back-end nodejs CommonJS especificación de exportación modular

(function (root, factory) {
  	if (typeof module === "object" && typeof module.exports === "object") {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    }
    else if (typeof define === "function" && define.amd) {
      	// AMD 模块环境下
        define(['jquery'], factory);
    }
}(this, function ($) { // $ 要导入的外部依赖模块
    $('div')
    // ...
    function b(){}
    function c(){}

    // 模块导出数据
    return {
        b: b,
        c: c
    }
}));

1275012490

Publicado 95 artículos originales · ganado elogios 115 · vistas 120 000 +

carta privada preocupaciones

webpack modular

1. modular

2. El núcleo modular

3.ESM

3.1 Alcance módulos independientes

de datos interno del módulo 3.2 derivación

módulo de datos externa 3.3 importación

3.3.1 estático de importación

3.3.2ESM Importación y Exportación - Ejemplo:

3.3.3 Dinámica introdujo la importación ()

4. modular compatible con versiones anteriores

5.CommonJS

5.1 Objeto módulos independientes

5.2 módulo de exportación de datos internos

módulo de datos externo 5.3 importación

Especificación utiliza ejemplos 5.4CommonJS

6.AMD

7.AMD - RequireJS

7.1 Alcance módulos independientes

de datos interno del módulo 7.2 derivación

módulo de datos externa 7.3 importación

7.4AMD - RequireJS utiliza ejemplos

8.requireJS estilo de CommonJS

de datos interno del módulo 8.1 derivación

módulo de datos externa 8.2 importación

ejemplo de estilo de CommonJS 8.3requireJS

9.UMD

Supongo que te gusta